alert-room-61990
10/05/2024, 4:46 PMbrief-egg-61061
10/05/2024, 4:46 PMbrief-egg-61061
10/05/2024, 4:47 PMreturnTo
parameter of the recovery flow should be set to the settings page of your application. This is because, as per the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#recovery), when a recovery flow is submitted, a session is issued to the application, allowing the user to reset their password and update their profile information on the settings page. Here is an example of how to create a recovery flow in a React application, where the returnTo
parameter is set to the settings page: jsx import { Configuration, FrontendApi, RecoveryFlow, UiNode, UiNodeInputAttributes, } from "@ory/client" import { filterNodesByGroups, isUiNodeInputAttributes, } from "@ory/integrations/ui" import { useEffect, useState } from "react" import { useSearchParams } from "react-router-dom" const frontend = new FrontendApi( new Configuration({ basePath: "<http://localhost:4000>", // Use your local Ory Tunnel URL baseOptions: { withCredentials: true, // we need to include cookies }, }), ) export const Recovery = () => { const [flow, setFlow] = useState<RecoveryFlow>() const [searchParams] = useSearchParams() useEffect(() => { // we can redirect the user back to the page they were on before login const returnTo = searchParams.get("return_to") frontend .createBrowserRecoveryFlow({ returnTo: returnTo || "/", // redirect to the root path after login }) .then(({ data: flow }) => { // set the flow data setFlow(flow) }) .catch((err) => { // Couldn't create login flow // handle the error }) }, []) // ... rest of the component }
In this example, the returnTo
parameter is set to the page the user was on before the login. If no such page exists, it defaults to the root path. You should replace this with the path to your settings page. Please note that the recovery flow has two methods: link
and code
. The link
method requires the user to open the recovery link from their email client using a browser on the same device. The code
method is more user-friendly since the code can be entered on the same device where the user requested the code from. This is the preferred method as spam filters and email clients can invalidate recovery links. Just one recovery method can be enabled at a time. The code
method is enabled by default in all new Ory Network projects.alert-room-61990
10/05/2024, 4:53 PMbrief-egg-61061
10/05/2024, 4:53 PMbrief-egg-61061
10/05/2024, 4:54 PMredirect_browser_to
field, which indicates where the user should be redirected to next. Here's an example of a 422 error response: json { "error": { "id": "browser_location_change_required", "code": 422, "status": "Unprocessable Entity", "reason": "In order to complete this flow please redirect the browser to: /ui/login?flow=ad574ad7-1a3c-4b52-9f54-ef9e866f3cec", "message": "browser location change required", }, "redirect_browser_to": "/ui/login?flow=ad574ad7-1a3c-4b52-9f54-ef9e866f3cec", }
In this case, you should redirect the user to the URL specified in the redirect_browser_to
field. This is necessary to complete the flow. If you're using an SPA, you can handle this error in your application by extracting the new flow ID from the payload and retrieving the response in the background instead of performing a full redirect. This approach allows you to maintain a smooth user experience in your SPA. If you continue to encounter issues, please ensure that your Ory Kratos configuration is correct and that you're correctly handling the recovery flow in your application. You can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-advanced-integration#spas-and-the-422-error) for more information on handling 422 errors in SPAs.