For a React Native app that also runs on the web (browser), it's recommended to use different flows for each case - native and browser. Here's why: 1. For the native mobile app part: Use the API flows designed for native applications. These flows are specifically tailored for mobile apps, desktop applications, and other non-browser environments. [Ory Docs](https://www.ory.sh/docs/kratos/self-service#api-flows-native-mobile--desktop-apps-command-line-interfaces-smart-tvs-and-more) state that API flows should be used for "Native Mobile & Desktop Apps, Command Line Interfaces, Smart TVs and more". These flows don't use cookies or redirects, which makes them suitable for native app environments. 2. For the web (browser) part: Use the browser flows, which are designed for applications running in web browsers. [Ory Docs](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#browser-vs-native-apps) mention that "Browser applications are apps with which users interact through their web browsers. Two common types of browser applications are server-side rendered apps (SSR) and single-page apps (SPA)." The key difference is in the API endpoints you'll use: - For native app flows: Use endpoints at

/self-service/{flow_type}/api

- For browser flows: Use endpoints at

/self-service/{flow_type}/browser

It's crucial to use the correct endpoints for each environment because they implement different security measures. For example, browser flows set CSRF cookies, which are not needed in native apps. [Ory Docs](https://www.ory.sh/docs/kratos/self-service#performing-login-registration-settings--flows) explicitly warn: "Never use API flows to implement Browser applications! Using API flows in Single-Page-Apps as well as server-side apps opens up several potential attack vectors, including Login and other CSRF attacks." Therefore, for your React Native app that also runs on the web, you should implement both types of flows and use them accordingly based on the environment the app is running in.

For a React app with Next.js, you should use the browser flows, specifically the ones designed for client-side applications like Single-Page Apps (SPAs). Next.js can be used to create both server-side rendered (SSR) and client-side rendered applications, but for the client-side parts, you'll want to use the SPA approach. Here's what you need to know: 1. Use Browser Flows: [Ory Docs](https://www.ory.sh/docs/kratos/self-service#browser-flows-for-client-side-apps-single-page-apps-reactjs-angular-nextjs-) explicitly mention Next.js as an example of a client-side app that should use browser flows. 2. AJAX Requests: Your Next.js app should use AJAX to perform requests. The [Ory Docs](https://www.ory.sh/docs/kratos/self-service#browser-flows-for-client-side-apps-single-page-apps-reactjs-angular-nextjs-) state: "Browser-based flows also support client-side applications such as Single-Page-Apps (React.js, Angular, Next.js, ...) that use AJAX to perform requests." 3. Same Top-Level Domain: Ensure that your Ory Identities and your Next.js UI are hosted on the same top-level domain. For example,

<http://kratos.bar.com|kratos.bar.com>

and

<http://ui.bar.com|ui.bar.com>

will work, but

<http://kratos.bar.com|kratos.bar.com>

and

<http://not-bar.com|not-bar.com>

won't. 4. JSON Responses: Set the

Accept

HTTP Header to

application/json

in your requests. This tells Ory Identities to respond with JSON instead of HTTP redirects. 5. Form Submission: For form submissions, [Ory Docs](https://www.ory.sh/docs/kratos/self-service#form-submission-and-payload-validation-1) recommend intercepting the submission and sending the form as JSON using

fetch

or the Ory SDK. 6. Flow Initialization: To start a flow (like login or registration), make a GET request to the appropriate endpoint. For example, for login:

javascript    const response = await fetch('https://$<http://PROJECT_SLUG.projects.oryapis.com/self-service/login/browser|PROJECT_SLUG.projects.oryapis.com/self-service/login/browser>', {      headers: {        'Accept': 'application/json'      }    });    const flow = await response.json();

7. Form Rendering and Submission: Use the flow data to render your form and handle submissions. [Ory Docs](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#single-page-application-1) provide an example: "For example, login is a POST request to

https://$<http://PROJECT_SLUG.projects.oryapis.com/self-service/login/browser?flow=<id|PROJECT_SLUG.projects.oryapis.com/self-service/login/browser?flow=<id>>

." For a practical example, you can refer to the [Next.js UI Reference Implementation](https://github.com/ory/kratos-selfservice-ui-react-nextjs) mentioned in the [Ory Docs](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui#reference-implementations-and-examples). Remember, always use browser flows for your Next.js app, even if it's a SPA, to ensure proper security measures are in place.