<@U04UQ68083H> the recovery flow on my React SPA s...
# ory-copilot
a
@chilly-king-10285 the recovery flow on my React SPA stopped working properly as I now receive a 422 error asking to redirect the user to the settings page defined in the Ory identity config. Should the returnTo of the recovery flow be towards the settings page on my app? Note that I am not using Ory's UI.
b
A message from kapa.ai
Yes, the
returnTo
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:
Copy code
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.
a
@chilly-king-10285 it does not work, I am using createBrowserRecoveryFlow with returnTo set to "/settings/profile" and it with 422 when I try to submit it.
b
A message from kapa.ai
The 422 error you're encountering is likely due to the flow requiring a browser location change. This is a common issue when working with Single Page Applications (SPAs) and Ory Kratos. When you receive a 422 error, the response will include a
redirect_browser_to
field, which indicates where the user should be redirected to next. Here's an example of a 422 error response:
Copy code
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.