Based on the information provided in the knowledge sources, I can explain why this is happening and suggest a solution. When using a custom UI for account recovery in Ory, users are indeed redirected to the settings page after completing the recovery flow. This is by design, as explained in the [Recovery 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. This allows the user to reset their password and update their profile information on the settings page. Browser applications are automatically redirected to the settings page, while native applications must take the user to the settings page." To ensure that users are redirected to your custom UI instead of Ory's default settings page, you need to configure the UI URL for the settings flow. You can do this by setting the following configuration value:

yaml selfservice:   flows:     settings:       ui_url: <http://your-custom-ui.com/settings>

You can also set this configuration using the environment variable

SELFSERVICE_FLOWS_SETTINGS_UI_URL

. If you're using Ory Network, you can configure this in the Ory Console. As mentioned in the [Configure Ory to use your UI documentation](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui), you can go to Branding → UI URLs in the Ory Console to define the URLs for your custom UI views for every self-service flow, including the settings flow. By setting the correct UI URL for the settings flow, you can ensure that users are redirected to your custom UI after completing the account recovery process.

Yes, there is a reference implementation for the Ory Account Experience for a React Single Page Application (SPA) without Next.js, which you can use as a starting point for your own custom UI. Ory provides several reference implementations and examples for building custom user interfaces, including one specifically for React SPA. You can find this example in the Ory Elements repository. Here's how you can access and use this reference implementation: 1. The example is available in the Ory Elements repository on GitHub. You can find it in the

examples/react-spa

directory. 2. To get started with this example, you can follow the instructions provided in the [Custom user interface with Ory Elements documentation](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements#run-the-sample-application). Here's a summary of the steps:

git clone --depth 1 git@github.com:ory/elements.git    cd elements    npm run initialize    npm run build:clean    cd examples/react-spa

3. After setting up, you can start the application locally and connect it to your Ory Network project using the Ory CLI. 4. This example uses Ory Elements, which is a component library designed to make building login, registration, and account pages for Ory straightforward. It's modular and customizable, allowing you to use only the components you need and style them to match your implementation's design. 5. The example includes implementations for various pages such as login, registration, verification, recovery, and settings. You can find these in the respective

.tsx

files in the

src

directory of the example. By using this reference implementation, you can see how to integrate Ory with a React SPA, how to use the Ory SDK, and how to implement various authentication flows. You can then customize and extend this implementation to create your own custom UI that fits your specific needs. Remember, while this example provides a great starting point, you should always ensure that your final implementation adheres to security best practices and meets your specific requirements. [Custom user interface with Ory Elements](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements)