From be8cb9e00d954aa0e7491b21aae7e5a41503fd44 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 4 Dec 2024 15:55:04 -0500
Subject: [PATCH] Create custom-combined-sign-in-or-up-page.mdx

---
 .../custom-combined-sign-in-or-up-page.mdx    | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 docs/references/nextjs/custom-combined-sign-in-or-up-page.mdx

diff --git a/docs/references/nextjs/custom-combined-sign-in-or-up-page.mdx b/docs/references/nextjs/custom-combined-sign-in-or-up-page.mdx
new file mode 100644
index 0000000000..973a9345ae
--- /dev/null
+++ b/docs/references/nextjs/custom-combined-sign-in-or-up-page.mdx
@@ -0,0 +1,108 @@
+---
+title: Build your own sign-in or up page for your Next.js app with Clerk
+description: Learn how to add a custom sign-in or up page to your Next.js app with Clerk's prebuilt components.
+---
+
+This guide shows you how to use the [`<SignIn />`](/docs/components/authentication/sign-in) component with the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) 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).
+
+> [!NOTE]
+> Just getting started with Clerk and Next.js? See the [quickstart tutorial](/docs/quickstarts/nextjs)!
+
+{/* TODO: Update these Steps once Steps component accepts other headings types. These headings should be H2s. */}
+
+<Steps>
+  ### Build a sign-in page
+
+  The following example demonstrates how to render the [`<SignIn />`](/docs/components/authentication/sign-up) component.
+
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
+  import { SignIn } from '@clerk/nextjs'
+
+  export default function Page() {
+    return <SignIn />
+  }
+  ```
+
+  ### Make the sign-in route public
+
+  By default, `clerkMiddleware()` makes all routes public. **This step is specifically for applications that have configured `clerkMiddleware()` to make [all routes protected](/docs/references/nextjs/clerk-middleware#protect-all-routes).** If you have not configured `clerkMiddleware()` to protect all routes, you can skip this step.
+
+  To make the sign-in route public:
+
+  - Navigate to your `middleware.ts` file.
+  - Create a new [route matcher](/docs/references/nextjs/clerk-middleware#create-route-matcher) that matches the sign-in route, or you can add it to your existing route matcher that is making routes public.
+  - Create a check to see if the user's current route is a public route. If it is not a public route, use [`auth.protect()`](/docs/references/nextjs/auth#protect) to protect the route.
+
+  ```tsx {{ filename: 'middleware.ts' }}
+  import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
+
+  const isPublicRoute = createRouteMatcher(['/sign-in(.*)'])
+
+  export default clerkMiddleware(async (auth, request) => {
+    if (!isPublicRoute(request)) {
+      await auth.protect()
+    }
+  })
+
+  export const config = {
+    matcher: [
+      // Skip Next.js internals and all static files, unless found in search params
+      '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+      // Always run for API routes
+      '/(api|trpc)(.*)',
+    ],
+  }
+  ```
+
+  ### Update your environment variables
+
+  Update your environment variables to point to your custom sign-in page. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables).
+
+  ```env {{ filename: '.env.local' }}
+  NEXT_PUBLIC_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:3000/sign-in](http://localhost:3000/sign-in).
+</Steps>
+
+## Next steps
+
+<Cards>
+  - [Read user and session data](/docs/references/nextjs/read-session-data)
+  - Learn how to use Clerk's hooks and helpers to access the active session and user data in your Next.js application.
+
+  ---
+
+  - [Client-side helpers](/docs/references/nextjs/overview#client-side-helpers)
+  - Learn more about Next.js client-side helpers and how to use them.
+
+  ---
+
+  - [Next.js SDK Reference](/docs/references/nextjs/overview)
+  - Learn more about additional Next.js methods.
+
+  ---
+
+  - [Clerk components](/docs/components/overview)
+  - Learn more about Clerk's prebuilt components that make authentication and user management easy.
+</Cards>