Remix sign-in-or-up docs (#1791)

Co-authored-by: Alexis Aguilar <[email protected]>

docs/manifest.json

@@ -2473,9 +2473,9 @@
                     "href": "/docs/references/remix/spa-mode"
                   },
                   {
-                    "title": "Add custom sign up and sign in pages",
+                    "title": "Add custom sign-in-or-up page",
                     "wrap": true,
-                    "href": "/docs/references/remix/custom-signup-signin-pages"
+                    "href": "/docs/references/remix/custom-sign-in-or-up-page"
                   },
                   {
                     "title": "Read session and user data",

docs/quickstarts/remix.mdx

@@ -280,8 +280,8 @@ Learn how to use Clerk to quickly and easily add secure authentication and user
 ## Next steps
 
 <Cards>
-  - [Create custom sign-up and sign-in pages](/docs/references/remix/custom-signup-signin-pages)
-  - Learn how add custom sign-up and sign-in pages with Clerk components.
+  - [Create custom sign-in-or-up page](/docs/references/remix/custom-sign-in-or-up-page)
+  - Learn how add custom sign-in-or-up page with Clerk components.
 
   ---
 

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

@@ -0,0 +1,82 @@
+---
+title: Build your own sign-in-or-up page for your Remix app with Clerk
+description: Learn how to add a custom sign-in-or-up page to your Remix app with Clerk's prebuilt components.
+---
+
+This guide shows you how to use the [`<SignIn />`](/docs/components/authentication/sign-in) component with the [Remix optional route](https://reactrouter.com/en/main/route/route#optional-segments) in order to build a custom page for that allows users to sign-in or sign-up within a single flow for your Remix app.
+
+If Clerk's 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).
+
+> [!NOTE]
+> Just getting started with Clerk and Remix? See the [quickstart tutorial](/docs/quickstarts/remix)!
+
+<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/remix'
+
+  export default function Page() {
+    return <SignIn />
+  }
+  ```
+
+  ## Configure your sign-in-or-up page
+
+  <Tabs items={["SSR Mode", "SPA Mode"]}>
+    <Tab>
+      For SSR Mode, add environment variables for the `signIn` and `afterSignIn` paths:
+
+      ```env {{ filename: '.env' }}
+      CLERK_SIGN_IN_URL=/sign-in
+      CLERK_SIGN_IN_FALLBACK_URL=/
+      ```
+    </Tab>
+
+    <Tab>
+      For SPA Mode, add paths to your `ClerkApp` options to control the behavior of the components when you sign in or sign up and when you click on the respective links at the bottom of each component.
+
+      ```ts {{ filename: 'app/root.tsx', mark: [[3, 4]] }}
+      export default ClerkApp(App, {
+        publishableKey: PUBLISHABLE_KEY,
+        signInUrl: '/sign-in',
+        signInFallbackRedirectUrl: '/',
+      })
+      ```
+    </Tab>
+  </Tabs>
+
+  ## Visit your new page
+
+  Run your project with the following terminal command from the root directory of your project:
+
+  <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:3000/sign-in](http://localhost:3000/sign-in).
+</Steps>
+
+## Next steps
+
+<Cards>
+  - [Custom sign-up page](/docs/references/remix/custom-signup-page)
+  - Learn how to add a custom sign-up page to your Remix app with Clerk's prebuilt components.
+
+  ---
+
+  - [Read user and session data](/docs/references/remix/read-session-data)
+  - Learn how to use Clerk's hooks and helpers to access the active session and user data in your Remix application.
+</Cards>

docs/references/remix/custom-signup-page.mdx

@@ -0,0 +1,81 @@
+---
+title: Build your own sign-up page for your Remix app with Clerk
+description: Learn how to add a custom sign-up page to your Remix app with Clerk's prebuilt components.
+---
+
+By default, the [`<SignIn />`](/docs/references/remix/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 [Next.js optional catch-all route](https://reactrouter.com/en/main/route/route#optional-segments) in order to build custom sign-up page for your Remix 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).
+
+> [!NOTE]
+> Just getting started with Clerk and Next.js? See the [quickstart tutorial](/docs/quickstarts/remix)!
+
+<Steps>
+  ## Build a sign-up page
+
+  The following example demonstrates how to render the [`<SignUp />`](/docs/components/authentication/sign-up) component.
+
+  ```tsx {{ filename: 'app/routes/sign-up.$.tsx' }}
+  import { SignUp } from '@clerk/remix'
+
+  export default function Page() {
+    return <SignUp />
+  }
+  ```
+
+  ## Configure your sign-up page
+
+  <Tabs items={["SSR Mode", "SPA Mode"]}>
+    <Tab>
+      For SSR Mode, add environment variables for the `signUp` and `afterSignUp` paths:
+
+      ```env {{ filename: '.env', mark: [2, 4] }}
+      CLERK_SIGN_IN_URL=/sign-in
+      CLERK_SIGN_UP_URL=/sign-up
+      CLERK_SIGN_IN_FALLBACK_URL=/
+      CLERK_SIGN_UP_FALLBACK_URL=/
+      ```
+    </Tab>
+
+    <Tab>
+      For SPA Mode, add paths to your `ClerkApp` options to control the behavior of the components when you sign in or sign up and when you click on the respective links at the bottom of each component.
+
+      ```ts {{ filename: 'app/root.tsx', mark: [4, 6] }}
+      export default ClerkApp(App, {
+        publishableKey: PUBLISHABLE_KEY,
+        signInUrl: '/sign-in',
+        signUpUrl: '/sign-up',
+        signInFallbackRedirectUrl: '/',
+        signUpFallbackRedirectUrl: '/',
+      })
+      ```
+    </Tab>
+  </Tabs>
+
+  ## 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:3000/sign-up](http://localhost:3000/sign-up).
+</Steps>
+
+## Next steps
+
+<Cards>
+  - [Read user and session data](/docs/references/remix/read-session-data)
+  - Learn how to use Clerk's hooks and helpers to access the active session and user data in your Remix application.
+</Cards>