import Link from "next/link"; import { Configuration, PublicApi } from "@ory/kratos-client"; import config from "../../src/config"; const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public })); export async function getServerSideProps(context) { const flow = context.query.flow; // The flow is used to identify the login and registration flow and // return data like the csrf_token and so on. if (!flow || typeof flow !== "string") { console.log("No flow ID found in URL, initializing registration flow."); return { redirect: { permanent: false, destination: `${config.kratos.browser}/self-service/registration/browser`, }, }; } try { const { status, data } = await kratos.getSelfServiceRegistrationFlow(flow); if (status === 200) return { props: { flow: data } }; throw new Error(`Failed to retrieve flow ${flow} with code ${status}`); } catch (error) { return { redirect: { permanent: false, destination: `${config.kratos.browser}/self-service/registration/browser`, }, }; } } const fieldProps = { "traits.email": { label: "Email address", autoComplete: "email", position: 0, }, "traits.name.first": { label: "First name", autoComplete: "given-name", position: 1, }, "traits.name.last": { label: "Last name", autoComplete: "family-name", position: 2, }, password: { label: "Password", autoComplete: "new-password", position: 4, }, csrf_token: { position: 99, }, }; export default function Registration({ flow }) { const fields = flow.methods.password.config.fields .map((field) => ({ ...field, ...fieldProps[field.name], })) .sort((a, b) => (a.position < b.position ? -1 : 1)); console.log(flow); return (

Sign up for a new account

or{" "} sign in {" "} if you already have one

); }