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 recovery flow."); return { redirect: { permanent: false, destination: `${config.kratos.browser}/self-service/recovery/browser`, }, }; } try { const { status, data } = await kratos.getSelfServiceRecoveryFlow(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/recovery/browser`, }, }; } } const fieldProps = { email: { label: "Your email", autoComplete: "email", position: 0, }, csrf_token: { position: 99, }, }; export default function Registration({ flow }) { const fields = flow.methods.link.config.fields .map((field) => ({ ...field, ...fieldProps[field.name], })) .sort((a, b) => (a.position < b.position ? -1 : 1)); console.log(flow); return (

Recover your account

or{" "} sign in {" "} if you suddenly remembered your password

); }