From da11741324d2ff78b547baa414a2184f5ba8061b Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 17 Dec 2024 17:16:33 -0500 Subject: [PATCH] React Router sign-in-or-up docs (#1821) --- docs/manifest.json | 4 +- .../custom-sign-in-or-up-page.mdx | 76 +++++++++++++++++++ ...gnin-pages.mdx => custom-sign-up-page.mdx} | 35 +++------ 3 files changed, 87 insertions(+), 28 deletions(-) create mode 100644 docs/references/react-router/custom-sign-in-or-up-page.mdx rename docs/references/react-router/{custom-signup-signin-pages.mdx => custom-sign-up-page.mdx} (54%) diff --git a/docs/manifest.json b/docs/manifest.json index d0b2ab034a..87a9fe9a4a 100644 --- a/docs/manifest.json +++ b/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", diff --git a/docs/references/react-router/custom-sign-in-or-up-page.mdx b/docs/references/react-router/custom-sign-in-or-up-page.mdx new file mode 100644 index 0000000000..3bd94e2f0e --- /dev/null +++ b/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 [``](/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). + + + ## Build a sign-in-or-up page + + The following example demonstrates how to render the [``](/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 ( +
+

Sign in or up route

+ +
+ ) + } + ``` + + ## 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: + + + ```bash {{ filename: 'terminal' }} + npm run dev + ``` + + ```bash {{ filename: 'terminal' }} + yarn dev + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dev + ``` + + + Visit your new custom page locally at [localhost:5173/sign-in](http://localhost:5173/sign-in). + + +## Next steps + + + - [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. + \ No newline at end of file diff --git a/docs/references/react-router/custom-signup-signin-pages.mdx b/docs/references/react-router/custom-sign-up-page.mdx similarity index 54% rename from docs/references/react-router/custom-signup-signin-pages.mdx rename to docs/references/react-router/custom-sign-up-page.mdx index 5a445e7093..51f34fabe2 100644 --- a/docs/references/react-router/custom-signup-signin-pages.mdx +++ b/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 [``](/docs/components/authentication/sign-in) and [``](/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 [``](/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 [``](/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 [``](/docs/components/authentication/sign-in) component. - - ```tsx {{ filename: 'app/routes/sign-in.tsx' }} - import { SignIn } from '@clerk/react-router' - - export default function SignInPage() { - return ( -
-

Sign in route

- -
- ) - } - ``` - ## 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 `` and `` 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 ``` - 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).