React Router sign-in-or-up docs (#1821)

docs/manifest.json

@@ -2443,8 +2443,8 @@
                           "href": "/docs/references/react-router/read-session-data"
                         },
                         {
-                          "title": "Add custom sign up and sign in pages",
-                          "href": "/docs/references/react-router/custom-sign-up-signin-pages"
+                          "title": "Add custom sign-in-or-up page",
+                          "href": "/docs/references/react-router/custom-sign-in-or-up-page"
                         },
                         {
                           "title": "Library mode",

docs/references/react-router/custom-sign-in-or-up-page.mdx

@@ -0,0 +1,76 @@
+---
+title: Build your own sign-in-or-up page for your React Router app with Clerk
+description: Learn how to add a custom sign-in-or-up page to your React Router app with Clerk's prebuilt components.
+---
+
+This guide shows you how to use the [`<SignIn />`](/docs/components/authentication/sign-in) component with the [React Router Splat route](https://reactrouter.com/start/framework/routing#splats) in order to build a custom page for your Next.js app that allows users to sign-in or sign-up within a single flow.
+
+If the prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the [custom flow guides](/docs/custom-flows/overview).
+
+<Steps>
+  ## Build a sign-in-or-up page
+
+  The following example demonstrates how to render the [`<SignIn />`](/docs/components/authentication/sign-up) component to allow users to both sign-in or sign-up from a single flow.
+
+  ```tsx {{ filename: 'app/routes/sign-in.tsx' }}
+  import { SignIn } from '@clerk/react-router'
+
+  export default function SignInPage() {
+    return (
+      <div>
+        <h1>Sign in or up route</h1>
+        <SignIn />
+      </div>
+    )
+  }
+  ```
+
+  ## Configure routes
+
+  React Router expects you to define routes in [`app/routes.ts`](https://reactrouter.com/start/framework/routing). Add the previously created sign-in-or-up page to your route configuration.
+
+  ```tsx {{ filename: 'app/routes.ts', mark: [5] }}
+  import { type RouteConfig, index, route } from '@react-router/dev/routes'
+
+  export default [
+    index('routes/home.tsx'),
+    route('sign-in/*', 'routes/sign-in.tsx'),
+  ] satisfies RouteConfig
+  ```
+
+  ## Configure redirect behavior
+
+  Update your environment variables to point to your custom sign-in-or-up page. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables).
+
+  ```env {{ filename: '.env' }}
+  CLERK_SIGN_IN_FALLBACK_URL=/
+  CLERK_SIGN_IN_URL=/sign-in
+  ```
+
+  ## Visit your new page
+
+  Run your project with the following command:
+
+  <CodeBlockTabs options={["npm", "yarn", "pnpm"]}>
+    ```bash {{ filename: 'terminal' }}
+    npm run dev
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    yarn dev
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    pnpm dev
+    ```
+  </CodeBlockTabs>
+
+  Visit your new custom page locally at [localhost:5173/sign-in](http://localhost:5173/sign-in).
+</Steps>
+
+## Next steps
+
+<Cards>
+  - [Custom sign-up page](/docs/references/react-router/custom-sign-up-page)
+  - Learn how to add a custom sign-up page to your React Router app with Clerk's prebuilt components.
+</Cards>

docs/references/react-router/custom-signup-signin-pages.mdx → docs/references/react-router/custom-sign-up-page.mdx

@@ -1,9 +1,9 @@
 ---
-title: Build your own sign-up and sign-in pages for your React Router app with Clerk
-description: Learn how to add custom sign-up and sign-in pages to your React Router app with Clerk's prebuilt components.
+title: Build your own sign-up page for your React Router app with Clerk
+description: Learn how to add a custom sign-up page to your React Router app with Clerk's prebuilt components.
 ---
 
-This guide shows you how to use the [`<SignIn />`](/docs/components/authentication/sign-in) and [`<SignUp />`](/docs/components/authentication/sign-up) components with the [React Router Splat route](https://reactrouter.com/start/framework/routing#splats) to build custom sign-up and sign-in pages for your React Router app. See the [quickstart tutorial](/docs/quickstarts/react-router) for a step-by-step guide.
+By default, the [`<SignIn />`](/docs/references/react-router/custom-sign-in-or-up-page) component handles signing-in or signing-up, but if you'd like to have a dedicated sign-up page, this guide shows you how to use the [`<SignUp />`](/docs/components/authentication/sign-up) component with the [React Router Splat route](https://reactrouter.com/start/framework/routing#splats) in order to build custom sign-up page for your React Router app.
 
 If the prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the [custom flow guides](/docs/custom-flows/overview).
 
@@ -25,28 +25,11 @@ If the prebuilt components don't meet your specific needs or if you require more
   }
   ```
 
-  ## Build a sign-in page
-
-  The following example demonstrates how to render the [`<SignIn />`](/docs/components/authentication/sign-in) component.
-
-  ```tsx {{ filename: 'app/routes/sign-in.tsx' }}
-  import { SignIn } from '@clerk/react-router'
-
-  export default function SignInPage() {
-    return (
-      <div>
-        <h1>Sign in route</h1>
-        <SignIn />
-      </div>
-    )
-  }
-  ```
-
   ## Configure routes
 
-  React Router expects you to define routes in [`app/routes.ts`](https://reactrouter.com/start/framework/routing). Add the previously created sign-in and sign-up pages to your route configuration.
+  React Router expects you to define routes in [`app/routes.ts`](https://reactrouter.com/start/framework/routing). Add the previously created sign-up page to your route configuration.
 
-  ```tsx {{ filename: 'app/routes.ts', mark: [5, 6] }}
+  ```tsx {{ filename: 'app/routes.ts', mark: [6] }}
   import { type RouteConfig, index, route } from '@react-router/dev/routes'
 
   export default [
@@ -58,9 +41,9 @@ If the prebuilt components don't meet your specific needs or if you require more
 
   ## Configure redirect behavior
 
-  Update your environment variables to point to your custom sign-up and sign-in pages. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables).
+  Update your environment variables to point to your custom sign-up page. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables).
 
-  ```env {{ filename: '.env' }}
+  ```env {{ filename: '.env', mark: [2,4] }}
   CLERK_SIGN_IN_FALLBACK_URL=/
   CLERK_SIGN_UP_FALLBACK_URL=/
   CLERK_SIGN_IN_URL=/sign-in
@@ -69,7 +52,7 @@ If the prebuilt components don't meet your specific needs or if you require more
 
   These values control the behavior of the `<SignUp />` and `<SignIn />` components and when you visit the respective links at the bottom of each component.
 
-  ## Visit your new pages
+  ## Visit your new page
 
   Run your project with the following command:
 
@@ -87,5 +70,5 @@ If the prebuilt components don't meet your specific needs or if you require more
     ```
   </CodeBlockTabs>
 
-  Visit your new custom pages locally at [localhost:5173/sign-up](http://localhost:5173/sign-up) and [localhost:5173/sign-in](http://localhost:5173/sign-in).
+  Visit your new custom page locally at [localhost:5173/sign-up](http://localhost:5173/sign-up).
 </Steps>