// React import Router, { useRouter } from "next/router" import { useCallback, useEffect, useState } from "react" // Ory SDK import { SettingsFlow, UpdateSettingsFlowBody } from "@ory/client" import { ory } from "@/pkg/sdk" import { SetUriFlow } from "@/pkg/helpers" // Misc. import { AxiosError } from "axios" // Ory Elements // We will use UserSettingsCard from Ory Elements to display the settings form. import Layout from "@/components/layout" import { gridStyle, NodeMessages, UserSettingsCard, UserSettingsFlowType, } from "@ory/elements" import { HandleError } from "@/pkg/hooks" import { NextPageWithLayout } from "./_app" const Settings: NextPageWithLayout = () => { const [flow, setFlow] = useState() // Get flow information from the URL const router = useRouter() const flowId = String(router.query.flow || "") const returnTo = String(router.query.return_to || "") const getFlow = useCallback( (id: string) => ory .getSettingsFlow({ id }) .then(({ data }) => { setFlow(data) }) .catch(handleError), [], ) const handleError = useCallback( (error: AxiosError) => { const handle = HandleError(getFlow, setFlow, "/settings", true) return handle(error) }, [getFlow], ) const createFlow = useCallback( (returnTo: string) => ory .createBrowserSettingsFlow({ returnTo, }) .then(({ data }) => { setFlow(data) SetUriFlow(Router, data.id) }) .catch(handleError), [handleError], ) useEffect(() => { if (!router.isReady) { return } // If ?flow=.. was in the URL, we fetch it if (flowId) { getFlow(String(flowId || "")).catch(() => createFlow(String(returnTo || "")), ) return } // Otherwise we initialize it createFlow(returnTo) }, [router.isReady]) const onSubmit = (values: UpdateSettingsFlowBody) => ory .updateSettingsFlow({ flow: String(flow?.id), updateSettingsFlowBody: values, }) .then(({ data }) => { // The settings have been saved and the flow was updated. Let's show it to the user! setFlow(data) }) .catch(handleError) // if the flow is not set, we show a loading indicator return flow ? ( // create a settings form that dynamically renders based on the flow data using Ory Elements // This card is more complicated, as it is dynamically rendered based on the flow data from your Ory Console project.
{/* Show a success message if the user changed their password */} {/* here we simply map all of the settings flows we could have. These flows won't render if they aren't enabled inside your Ory Network project */} {( [ "profile", "password", "totp", "webauthn", "lookup_secret", "oidc", ] as UserSettingsFlowType[] ).map((flowType: UserSettingsFlowType, index) => ( // here we render the settings flow using Ory Elements onSubmit(body as UpdateSettingsFlowBody)} /> ))}
) : (
Loading...
) } Settings.getLayout = (page) => {page} export default Settings