From d3ab30dba72d297689cd3dbfb02870ab85384e8f Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 15:23:20 -0500 Subject: [PATCH 01/31] init --- docs/components/authentication/sign-in.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index 6addc5bd39..38b1cd44ed 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -5,7 +5,7 @@ description: Clerk's component renders a UI for signing in users. ![The \ component renders a UI for signing in users.](/docs/images/ui-components/sign-in.png){{ style: { maxWidth: '460px' } }} -The `` component renders a UI for signing in users. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). You can further customize your `` component by passing additional [properties](#properties) at the time of rendering. +The `` component renders a UI to allow users to sign-in or sign-up by default. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). You can further customize your `` component by passing additional [properties](#properties) at the time of rendering. > [!NOTE] > The `` and `` components cannot render when a user is already signed in, unless the application allows multiple sessions. If a user is already signed in and the application only allows a single session, Clerk will redirect the user to the Home URL instead. From be8cb9e00d954aa0e7491b21aae7e5a41503fd44 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 15:55:04 -0500 Subject: [PATCH 02/31] 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 [``](/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. */} + + + ### Build a sign-in page + + The following example demonstrates how to render the [``](/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 + } + ``` + + ### 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: + + + ```bash {{ filename: 'terminal' }} + npm run dev + ``` + + ```bash {{ filename: 'terminal' }} + yarn dev + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dev + ``` + + + Visit your new custom page locally at [localhost:3000/sign-in](http://localhost:3000/sign-in). + + +## Next steps + + + - [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. + From 8d5fbd9546f48eb9dc26412fe1e85ac375e5ba91 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 16:42:09 -0500 Subject: [PATCH 03/31] wip --- docs/quickstarts/nextjs.mdx | 4 +- ...e.mdx => custom-signin-or-signup-page.mdx} | 9 +- docs/references/nextjs/custom-signup-page.mdx | 112 ++++++++++++++++++ 3 files changed, 121 insertions(+), 4 deletions(-) rename docs/references/nextjs/{custom-combined-sign-in-or-up-page.mdx => custom-signin-or-signup-page.mdx} (88%) create mode 100644 docs/references/nextjs/custom-signup-page.mdx diff --git a/docs/quickstarts/nextjs.mdx b/docs/quickstarts/nextjs.mdx index e7e6e9f178..25e8946de9 100644 --- a/docs/quickstarts/nextjs.mdx +++ b/docs/quickstarts/nextjs.mdx @@ -186,8 +186,8 @@ description: Add authentication and user management to your Next.js app with Cle --- - - [Create custom sign-up and sign-in pages](/docs/references/nextjs/custom-signup-signin-pages) - - Learn how add custom sign-up and sign-in pages with Clerk components. + - [Create a custom sign-in or sign-up page](/docs/references/nextjs/custom-signin-or-signup-page) + - Learn how add a custom sign-in or sign-up page with Clerk components. --- diff --git a/docs/references/nextjs/custom-combined-sign-in-or-up-page.mdx b/docs/references/nextjs/custom-signin-or-signup-page.mdx similarity index 88% rename from docs/references/nextjs/custom-combined-sign-in-or-up-page.mdx rename to docs/references/nextjs/custom-signin-or-signup-page.mdx index 973a9345ae..578013a426 100644 --- a/docs/references/nextjs/custom-combined-sign-in-or-up-page.mdx +++ b/docs/references/nextjs/custom-signin-or-signup-page.mdx @@ -1,11 +1,11 @@ --- -title: Build your own sign-in or up page for your Next.js app with Clerk +title: Build your own sign-in or sign-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 [``](/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). +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)! @@ -88,6 +88,11 @@ If the prebuilt components don't meet your specific needs or if you require more ## Next steps + - [Custom sign-up page](/docs/references/nextjs/custom-signup-page) + - Learn how to add a custom sign-up page to your Next.js app with Clerk's prebuilt components. + + --- + - [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. diff --git a/docs/references/nextjs/custom-signup-page.mdx b/docs/references/nextjs/custom-signup-page.mdx new file mode 100644 index 0000000000..5d67684ea6 --- /dev/null +++ b/docs/references/nextjs/custom-signup-page.mdx @@ -0,0 +1,112 @@ +--- +title: Build your own sign-up page for your Next.js app with Clerk +description: Learn how to add a custom sign-up page to your Next.js app with Clerk's prebuilt components. +--- + +By default, the [``](/docs/references/nextjs/custom-signin-or-signup-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 [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) in order to build custom sign-up page for your Next.js 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/nextjs)! + +{/* TODO: Update these Steps once Steps component accepts other headings types. These headings should be H2s. */} + + + ### Build a sign-up page + + The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component. + + ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx' }} + import { SignUp } from '@clerk/nextjs' + + export default function Page() { + return + } + ``` + + ### Make the sign-up 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-up route public: + + - Navigate to your `middleware.ts` file. + - Add the sign-up route to your existing route matcher that is making routes public. + + ```tsx {{ filename: 'middleware.ts', ins: [5] }} + import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' + + const isPublicRoute = createRouteMatcher([ + '/sign-in(.*)', + '/sign-up(.*)' + ]) + + 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 and sign-up pages. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables). + + ```env {{ filename: '.env.local', ins: [2] }} + NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in + NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up + ``` + + ### 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:3000/sign-up](http://localhost:3000/sign-up). + + +## Next steps + + + + - [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. + From fdb95554be8af5eba6971e75116b5c9ad5bb8bca Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 4 Dec 2024 16:46:13 -0500 Subject: [PATCH 04/31] format --- docs/references/nextjs/custom-signup-page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/references/nextjs/custom-signup-page.mdx b/docs/references/nextjs/custom-signup-page.mdx index 5d67684ea6..3cbf8bae9b 100644 --- a/docs/references/nextjs/custom-signup-page.mdx +++ b/docs/references/nextjs/custom-signup-page.mdx @@ -37,6 +37,7 @@ If the prebuilt components don't meet your specific needs or if you require more ```tsx {{ filename: 'middleware.ts', ins: [5] }} import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' + // prettier-ignore const isPublicRoute = createRouteMatcher([ '/sign-in(.*)', '/sign-up(.*)' @@ -91,7 +92,6 @@ If the prebuilt components don't meet your specific needs or if you require more ## Next steps - - [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. From cc2f39e2831f87a07d7360bd09f56818641fb001 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 6 Dec 2024 14:43:13 -0500 Subject: [PATCH 05/31] updates --- docs/references/nextjs/custom-signin-or-signup-page.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/references/nextjs/custom-signin-or-signup-page.mdx b/docs/references/nextjs/custom-signin-or-signup-page.mdx index 578013a426..7ecd7f1bef 100644 --- a/docs/references/nextjs/custom-signin-or-signup-page.mdx +++ b/docs/references/nextjs/custom-signin-or-signup-page.mdx @@ -1,6 +1,6 @@ --- -title: Build your own sign-in or sign-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. +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 [``](/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. @@ -13,9 +13,9 @@ If the prebuilt components don't meet your specific **needs** or if you require {/* TODO: Update these Steps once Steps component accepts other headings types. These headings should be H2s. */} - ### Build a sign-in page + ### Build a sign-in-or-up page - The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component. + The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component to allow users to both sign-in and sign-up from a single flow. ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }} import { SignIn } from '@clerk/nextjs' From 89d772c592fba05a70f5bb40651c8782f1d5eedd Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 6 Dec 2024 15:01:52 -0500 Subject: [PATCH 06/31] updates --- docs/quickstarts/nextjs.mdx | 2 +- ...-signin-or-signup-page.mdx => custom-sign-in-or-up-page.mdx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename docs/references/nextjs/{custom-signin-or-signup-page.mdx => custom-sign-in-or-up-page.mdx} (100%) diff --git a/docs/quickstarts/nextjs.mdx b/docs/quickstarts/nextjs.mdx index 25e8946de9..e83255efe0 100644 --- a/docs/quickstarts/nextjs.mdx +++ b/docs/quickstarts/nextjs.mdx @@ -186,7 +186,7 @@ description: Add authentication and user management to your Next.js app with Cle --- - - [Create a custom sign-in or sign-up page](/docs/references/nextjs/custom-signin-or-signup-page) + - [Create a custom sign-in or sign-up page](/docs/references/nextjs/custom-sign-in-or-up-page) - Learn how add a custom sign-in or sign-up page with Clerk components. --- diff --git a/docs/references/nextjs/custom-signin-or-signup-page.mdx b/docs/references/nextjs/custom-sign-in-or-up-page.mdx similarity index 100% rename from docs/references/nextjs/custom-signin-or-signup-page.mdx rename to docs/references/nextjs/custom-sign-in-or-up-page.mdx From 902709e3066220d93a87696ff98ae3fd5fcc96ed Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 6 Dec 2024 15:05:59 -0500 Subject: [PATCH 07/31] fix link --- docs/references/nextjs/custom-signup-page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/references/nextjs/custom-signup-page.mdx b/docs/references/nextjs/custom-signup-page.mdx index 3cbf8bae9b..cd06005092 100644 --- a/docs/references/nextjs/custom-signup-page.mdx +++ b/docs/references/nextjs/custom-signup-page.mdx @@ -3,7 +3,7 @@ title: Build your own sign-up page for your Next.js app with Clerk description: Learn how to add a custom sign-up page to your Next.js app with Clerk's prebuilt components. --- -By default, the [``](/docs/references/nextjs/custom-signin-or-signup-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 [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) in order to build custom sign-up page for your Next.js app. +By default, the [``](/docs/references/nextjs/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 [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) in order to build custom sign-up page for your Next.js 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). From daaf49cf3f3eb5fe217fdd3f47ee8a8e6eb294fb Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 14:15:22 -0500 Subject: [PATCH 08/31] Delete custom-signup-signin-pages.mdx --- .../nextjs/custom-signup-signin-pages.mdx | 124 ------------------ 1 file changed, 124 deletions(-) delete mode 100644 docs/references/nextjs/custom-signup-signin-pages.mdx diff --git a/docs/references/nextjs/custom-signup-signin-pages.mdx b/docs/references/nextjs/custom-signup-signin-pages.mdx deleted file mode 100644 index 14a2899bb8..0000000000 --- a/docs/references/nextjs/custom-signup-signin-pages.mdx +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Build your own sign-in and sign-up pages for your Next.js app with Clerk -description: Learn how to add custom sign-in and sign-up pages to your Next.js 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 [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) in order to build custom sign-in and sign-up pages for your Next.js 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] -> Watch the video version of this guide on the Clerk YouTube channel → [YouTube (4 minutes)](https://youtu.be/fsuHLafTYyg). - -> [!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. */} - - - ### Build a sign-up page - - The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component. - - ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx' }} - import { SignUp } from '@clerk/nextjs' - - export default function Page() { - return - } - ``` - - ### Build a sign-in page - - The following example demonstrates how to render the [``](/docs/components/authentication/sign-in) component. - - ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }} - import { SignIn } from '@clerk/nextjs' - - export default function Page() { - return - } - ``` - - ### Make the sign-up and sign-in routes 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-up and sign-in routes public: - - - Navigate to your `middleware.ts` file. - - Create a new [route matcher](/docs/references/nextjs/clerk-middleware#create-route-matcher) that matches the sign-up and sign-in routes, or you can add them to an 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(.*)', '/sign-up(.*)']) - - 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 and sign-up pages. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables). - - ```env {{ filename: '.env.local' }} - NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in - NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up - ``` - - ### Visit your new pages - - 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 pages locally at [localhost:3000/sign-in](http://localhost:3000/sign-in) and [localhost:3000/sign-up](http://localhost:3000/sign-up). - - -## Next steps - - - - [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. - From a592b6a6ce670fd8909c00e2ed87b1fdcdb2842f Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 14:17:14 -0500 Subject: [PATCH 09/31] or --- docs/references/nextjs/custom-sign-in-or-up-page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/references/nextjs/custom-sign-in-or-up-page.mdx b/docs/references/nextjs/custom-sign-in-or-up-page.mdx index 7ecd7f1bef..746062f195 100644 --- a/docs/references/nextjs/custom-sign-in-or-up-page.mdx +++ b/docs/references/nextjs/custom-sign-in-or-up-page.mdx @@ -15,7 +15,7 @@ If the prebuilt components don't meet your specific **needs** or if you require ### 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 and sign-up from a single flow. + 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/sign-in/[[...sign-in]]/page.tsx' }} import { SignIn } from '@clerk/nextjs' From 866f4dc8dc3629c19b6e483969b4a20e74351ce6 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 14:18:56 -0500 Subject: [PATCH 10/31] Update custom-sign-in-or-up-page.mdx --- docs/references/nextjs/custom-sign-in-or-up-page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/references/nextjs/custom-sign-in-or-up-page.mdx b/docs/references/nextjs/custom-sign-in-or-up-page.mdx index 746062f195..d77f69c6b7 100644 --- a/docs/references/nextjs/custom-sign-in-or-up-page.mdx +++ b/docs/references/nextjs/custom-sign-in-or-up-page.mdx @@ -25,7 +25,7 @@ If the prebuilt components don't meet your specific **needs** or if you require } ``` - ### Make the sign-in route public + ### Make the sign-in-or-up 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. From 1df7dd113368fd84c77e046995024cfbfb28bec6 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 14:33:40 -0500 Subject: [PATCH 11/31] update links --- docs/components/authentication/sign-in.mdx | 2 +- docs/components/authentication/sign-up.mdx | 2 +- docs/guides/authjs-migration.mdx | 2 +- docs/guides/waitlist.mdx | 2 +- docs/integrations/databases/firebase.mdx | 3 +-- docs/manifest.json | 4 ++-- docs/references/nextjs/overview.mdx | 2 +- 7 files changed, 8 insertions(+), 9 deletions(-) diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index 38b1cd44ed..8a8740c34c 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -99,7 +99,7 @@ The following example includes basic implementation of the `` componen The following example demonstrates how you can use the `` component on a public page. - If you would like to create a dedicated `/sign-in` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages). + If you would like to create a dedicated `/sign-in` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-sign-in-or-up-page). ```tsx {{ filename: 'app/page.tsx' }} import { SignIn, useUser } from '@clerk/nextjs' diff --git a/docs/components/authentication/sign-up.mdx b/docs/components/authentication/sign-up.mdx index 950fe34e60..6e67000724 100644 --- a/docs/components/authentication/sign-up.mdx +++ b/docs/components/authentication/sign-up.mdx @@ -92,7 +92,7 @@ The following example includes basic implementation of the `` componen The following example demonstrates how you can use the `` component on a public page. - If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages). + If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-sign-up-page). ```tsx {{ filename: 'app/page.tsx' }} import { SignUp, useUser } from '@clerk/nextjs' diff --git a/docs/guides/authjs-migration.mdx b/docs/guides/authjs-migration.mdx index 7ccf9daa74..840f7af739 100644 --- a/docs/guides/authjs-migration.mdx +++ b/docs/guides/authjs-migration.mdx @@ -114,7 +114,7 @@ This guide shows how to migrate an application using Auth.js (formerly NextAuth. If Clerk's Account Portal pages aren't a good fit your app, you can build a custom sign-in and sign-up UI in one of two ways: - - use the [prebuilt components](/docs/references/nextjs/custom-signup-signin-pages), such as the [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components + - use the [prebuilt components](/docs/references/nextjs/custom-sign-in-or-up-page), such as the [``](/docs/components/authentication/sign-in) and [``](/docs/components/authentication/sign-up) components - build a [fully custom UI using the Clerk API](/docs/custom-flows/overview), leveraging Clerk's React hooks such as [`useSignIn()`](/docs/references/react/use-sign-in) and [`useSignUp()`](/docs/references/react/use-sign-up) ### Protect your app diff --git a/docs/guides/waitlist.mdx b/docs/guides/waitlist.mdx index b1d25f2da8..4a88bf2220 100644 --- a/docs/guides/waitlist.mdx +++ b/docs/guides/waitlist.mdx @@ -144,7 +144,7 @@ In [**Waitlist** mode](/docs/authentication/configuration/restrictions#waitlist) } ``` - Update your environment variables to point to your custom sign-in page. For more information on building custom sign-in and sign-up pages, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages). + Update your environment variables to point to your custom sign-in page. For more information on building a custom sign-in-or-up page, see the [dedicated guide](/docs/references/nextjs/custom-sign-in-or-up-page). ```env {{ filename: '.env.local' }} NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in" diff --git a/docs/integrations/databases/firebase.mdx b/docs/integrations/databases/firebase.mdx index 51c692f0eb..b6c445ddd4 100644 --- a/docs/integrations/databases/firebase.mdx +++ b/docs/integrations/databases/firebase.mdx @@ -204,8 +204,7 @@ Integrating Firebase with Clerk gives you the benefits of using Firebase's featu - Learn how to sync Firebase auth or Firestore data with Clerk data using webhooks. --- - - - [Create custom sign-up and sign-in pages in your Next.js app](/docs/references/nextjs/custom-signup-signin-pages) + - [Create a custom sign-in-or-up page in your Next.js app](/docs/references/nextjs/custom-sign-in-or-up-page) - Learn how add custom sign-up and sign-in pages with Clerk components in your Next.js application. --- diff --git a/docs/manifest.json b/docs/manifest.json index 2528ecbe33..5aa6764125 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1757,8 +1757,8 @@ "href": "/docs/references/nextjs/read-session-data" }, { - "title": "Add custom sign up and sign in pages", - "href": "/docs/references/nextjs/custom-signup-signin-pages" + "title": "Add a custom sign-in-or-up page", + "href": "/docs/references/nextjs/custom-sign-in-or-up-page" }, { "title": "Integrate Clerk into your app with tRPC", diff --git a/docs/references/nextjs/overview.mdx b/docs/references/nextjs/overview.mdx index f48eac6e73..e7819082ff 100644 --- a/docs/references/nextjs/overview.mdx +++ b/docs/references/nextjs/overview.mdx @@ -8,7 +8,7 @@ Clerk makes it simple to add authentication to your Next.js application. This do ## Guides - [Read session and user data](/docs/references/nextjs/read-session-data) -- [Add custom sign up and sign in pages](/docs/references/nextjs/custom-signup-signin-pages) +- [Add a custom sign-in-or-up page](/docs/references/nextjs/custom-sign-in-or-up-page) - [Integrate Clerk into your app with tRPC](/docs/references/nextjs/trpc) ## Client-side helpers From b699ea3f2c351373659b4773f63bc3231a1e8776 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 14:35:02 -0500 Subject: [PATCH 12/31] fix path --- docs/components/authentication/sign-up.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/authentication/sign-up.mdx b/docs/components/authentication/sign-up.mdx index 6e67000724..4ce33b4081 100644 --- a/docs/components/authentication/sign-up.mdx +++ b/docs/components/authentication/sign-up.mdx @@ -92,7 +92,7 @@ The following example includes basic implementation of the `` componen The following example demonstrates how you can use the `` component on a public page. - If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-sign-up-page). + If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-page). ```tsx {{ filename: 'app/page.tsx' }} import { SignUp, useUser } from '@clerk/nextjs' From 9d5a91fda78dd8693cf31387c260da49188b8c68 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 14:56:24 -0500 Subject: [PATCH 13/31] format --- docs/integrations/databases/firebase.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/integrations/databases/firebase.mdx b/docs/integrations/databases/firebase.mdx index b6c445ddd4..6a1b2d9c5a 100644 --- a/docs/integrations/databases/firebase.mdx +++ b/docs/integrations/databases/firebase.mdx @@ -204,6 +204,7 @@ Integrating Firebase with Clerk gives you the benefits of using Firebase's featu - Learn how to sync Firebase auth or Firestore data with Clerk data using webhooks. --- + - [Create a custom sign-in-or-up page in your Next.js app](/docs/references/nextjs/custom-sign-in-or-up-page) - Learn how add custom sign-up and sign-in pages with Clerk components in your Next.js application. From bf5ae13935449d061e1d436d1dca56ef37068568 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 16:24:21 -0500 Subject: [PATCH 14/31] update account portal overview --- docs/customization/account-portal/overview.mdx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/docs/customization/account-portal/overview.mdx b/docs/customization/account-portal/overview.mdx index f5287b11f9..96737d202c 100644 --- a/docs/customization/account-portal/overview.mdx +++ b/docs/customization/account-portal/overview.mdx @@ -28,21 +28,13 @@ For each application environment, Clerk provides pages for sign-up, sign-in, use ## Hosted pages -### Sign-in +### Sign-in-or-up -The sign-in page hosts the prebuilt [``](/docs/components/authentication/sign-in) component, which renders a UI for signing in users. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). +The sign-in page hosts the prebuilt [``](/docs/components/authentication/sign-in) component, which renders a UI for allowing users to sign-in or up. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). ![The Account Portal sign-in page hosts the \ component](/docs/images/account-portal/sign-in.png) -Redirect users to the sign-in page using the [``](/docs/components/control/redirect-to-signin) control component. - -### Sign-up - -The sign-up page hosts the prebuilt [``](/docs/components/authentication/sign-up) component, which renders a UI for signing up users. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). - -![The Account Portal sign-up page hosts the \ component](/docs/images/account-portal/sign-up.png) - -Redirect users to the sign-up page using the [``](/docs/components/control/redirect-to-signup) control component. +Redirect users to the sign-in page using the [``](/docs/components/control/redirect-to-signin) control component. Redirect users to the sign-up flow using the [``](/docs/components/control/redirect-to-signup) control component. ### User profile From 9aa364bacbe202b3797e8a214fcb0ef0b9a7c00b Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 16:25:16 -0500 Subject: [PATCH 15/31] update account portal links --- docs/authentication/configuration/legal-compliance.mdx | 2 +- docs/custom-flows/embedded-email-links.mdx | 2 +- docs/custom-flows/invitations.mdx | 2 +- docs/organizations/accept-organization-invitations.mdx | 2 +- docs/organizations/invitations.mdx | 2 +- docs/quickstarts/astro.mdx | 2 +- docs/quickstarts/nextjs.mdx | 2 +- docs/quickstarts/remix.mdx | 2 +- docs/quickstarts/tanstack-start.mdx | 2 +- docs/users/invitations.mdx | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/authentication/configuration/legal-compliance.mdx b/docs/authentication/configuration/legal-compliance.mdx index 78d544f5b0..61176d02a9 100644 --- a/docs/authentication/configuration/legal-compliance.mdx +++ b/docs/authentication/configuration/legal-compliance.mdx @@ -3,7 +3,7 @@ title: Legal compliance description: Learn how to configure your legal compliance settings in the Clerk Dashboard. --- -Clerk provides a legal compliance setting that allows you to require users to agree to your terms of service or privacy policy before they can sign up to your application. After enabling the setting, there will be a checkbox to accept the terms in your [`` component](/docs/components/authentication/sign-up) or [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up). +Clerk provides a legal compliance setting that allows you to require users to agree to your terms of service or privacy policy before they can sign up to your application. After enabling the setting, there will be a checkbox to accept the terms in your [`` component](/docs/components/authentication/sign-up) or [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-in-or-up). To configure the setting: diff --git a/docs/custom-flows/embedded-email-links.mdx b/docs/custom-flows/embedded-email-links.mdx index a7c6a6a6e9..0604850a79 100644 --- a/docs/custom-flows/embedded-email-links.mdx +++ b/docs/custom-flows/embedded-email-links.mdx @@ -32,7 +32,7 @@ This guide will demonstrate how to generate a sign-in token and use it to sign i -d '{ "user_id": "user_123" }' ``` - This will return a `url` property, which can be used as your email link. Keep in mind that this link will use the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in) to sign in the user. + This will return a `url` property, which can be used as your email link. Keep in mind that this link will use the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up) to sign in the user. If you would rather use your own sign-in page, you can use the `token` property that is returned. Add the `token` as a query param in any link, such as the following example: diff --git a/docs/custom-flows/invitations.mdx b/docs/custom-flows/invitations.mdx index 12d73336ea..fe173b5e8f 100644 --- a/docs/custom-flows/invitations.mdx +++ b/docs/custom-flows/invitations.mdx @@ -5,7 +5,7 @@ description: Learn how to use the Clerk API to build a custom flow for handling -When a user visits an [invitation](/docs/users/invitations) link, and no custom redirect URL was specified, then they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up) and **their email address will be automatically verified.** +When a user visits an [invitation](/docs/users/invitations) link, and no custom redirect URL was specified, then they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-in-or-up) and **their email address will be automatically verified.** However, if you specified [a redirect URL when creating the invitation](/docs/users/invitations#redirect-url), you must handle the sign-up flow in your code for that page. You can either embed the [``](/docs/components/authentication/sign-up) component on that page, or if the prebuilt component doesn'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. diff --git a/docs/organizations/accept-organization-invitations.mdx b/docs/organizations/accept-organization-invitations.mdx index 9d449c7eb3..4bbaf5f407 100644 --- a/docs/organizations/accept-organization-invitations.mdx +++ b/docs/organizations/accept-organization-invitations.mdx @@ -5,7 +5,7 @@ description: Learn how to use the Clerk API to build a custom flows for handling -When a user visits an [organization invitation](/docs/organizations/invitations) link, and no custom redirect URL was specified, and they have an account for your application, then they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). If they do not have an account for your application, they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up). +When a user visits an [organization invitation](/docs/organizations/invitations) link, and no custom redirect URL was specified, and they have an account for your application, then they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up). If they do not have an account for your application, they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-in-or-up). However, if you specified [a redirect URL when creating the invitation](/docs/users/invitations#redirect-url), you must handle the sign-up and sign-in flows in your code for that page. You can either embed the [`](/docs/components/authentication/sign-in) component on that page, or if the prebuilt component doesn'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. diff --git a/docs/organizations/invitations.mdx b/docs/organizations/invitations.mdx index bac4c3d7ae..f86a47a037 100644 --- a/docs/organizations/invitations.mdx +++ b/docs/organizations/invitations.mdx @@ -5,7 +5,7 @@ description: Learn how to invite users to your organization. Organization invitations allow you to add new members to your organization, granting them access to organization-specific features and resources. -Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the organization invitation link, they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). If the user is already signed in, they will be redirected to your application's homepage (`/`). If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation](#redirect-url). +Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the organization invitation link, they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up). If the user is already signed in, they will be redirected to your application's homepage (`/`). If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation](#redirect-url). ## Create an invitation diff --git a/docs/quickstarts/astro.mdx b/docs/quickstarts/astro.mdx index f1767b7ed2..55690b206e 100644 --- a/docs/quickstarts/astro.mdx +++ b/docs/quickstarts/astro.mdx @@ -125,7 +125,7 @@ description: Add authentication and user management to your Astro app with Clerk - [``](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**. - [``](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**. - [``](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options. - - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). + - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up). ```astro {{ filename: 'src/layouts/SiteLayout.astro' }} --- diff --git a/docs/quickstarts/nextjs.mdx b/docs/quickstarts/nextjs.mdx index af6231f42a..aea98c36c5 100644 --- a/docs/quickstarts/nextjs.mdx +++ b/docs/quickstarts/nextjs.mdx @@ -104,7 +104,7 @@ description: Add authentication and user management to your Next.js app with Cle - [``](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**. - [``](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**. - [``](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options. - - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). + - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up). Select your preferred router to learn how to make this data available across your entire app: diff --git a/docs/quickstarts/remix.mdx b/docs/quickstarts/remix.mdx index 419f7fa983..a43cf5f365 100644 --- a/docs/quickstarts/remix.mdx +++ b/docs/quickstarts/remix.mdx @@ -197,7 +197,7 @@ Learn how to use Clerk to quickly and easily add secure authentication and user - [``](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**. - [``](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**. - [``](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options. - - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in) + - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up) ```tsx {{ filename: 'routes/_index.tsx' }} import { diff --git a/docs/quickstarts/tanstack-start.mdx b/docs/quickstarts/tanstack-start.mdx index 4363013d83..94725c86ef 100644 --- a/docs/quickstarts/tanstack-start.mdx +++ b/docs/quickstarts/tanstack-start.mdx @@ -143,7 +143,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat - [``](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**. - [``](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**. - [``](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options. - - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). + - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up). ```tsx {{ filename: 'app/routes/index.tsx' }} import { diff --git a/docs/users/invitations.mdx b/docs/users/invitations.mdx index 30432aff28..3d630b3b11 100644 --- a/docs/users/invitations.mdx +++ b/docs/users/invitations.mdx @@ -5,7 +5,7 @@ description: Learn how to invite users to your Clerk application. Inviting users to your Clerk application allows you to onboard new users seamlessly by sending them a unique invitation link. -Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the invitation link, they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up) and **their email address will be automatically verified.** If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation](#redirect-url). +Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the invitation link, they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-in-or-up) and **their email address will be automatically verified.** If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation](#redirect-url). Invitations expire after a month. If the user clicks on an expired invitation, they will get redirected to the application's sign-up page and will have to go through the normal sign-up flow. Their email address will not be auto-verified. From 3777c6b837b5706e72ed5e1c94779fdc4ca7c729 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 12 Dec 2024 17:23:53 -0500 Subject: [PATCH 16/31] update headings in steps component --- docs/references/nextjs/custom-sign-in-or-up-page.mdx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/references/nextjs/custom-sign-in-or-up-page.mdx b/docs/references/nextjs/custom-sign-in-or-up-page.mdx index d77f69c6b7..05ed514d6a 100644 --- a/docs/references/nextjs/custom-sign-in-or-up-page.mdx +++ b/docs/references/nextjs/custom-sign-in-or-up-page.mdx @@ -5,15 +5,13 @@ description: Learn how to add a custom sign-in-or-up page to your Next.js app wi This guide shows you how to use the [``](/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). +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. */} - - ### Build a sign-in-or-up page + ## 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. @@ -25,7 +23,7 @@ If the prebuilt components don't meet your specific **needs** or if you require } ``` - ### Make the sign-in-or-up route public + ## Make the sign-in-or-up 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. @@ -56,7 +54,7 @@ If the prebuilt components don't meet your specific **needs** or if you require } ``` - ### Update your environment variables + ## 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). @@ -64,7 +62,7 @@ If the prebuilt components don't meet your specific **needs** or if you require NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in ``` - ### Visit your new page + ## Visit your new page Run your project with the following command: From 6a6b3abfe246d16d3a522153f52d5122e793ce27 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 13 Dec 2024 09:33:31 -0500 Subject: [PATCH 17/31] Expo Web sign-in-or-up docs (#1794) Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/manifest.json | 8 ++- ...ages.mdx => custom-sign-in-or-up-page.mdx} | 33 ++++------ .../expo/web-support/custom-sign-up-page.mdx | 66 +++++++++++++++++++ 3 files changed, 85 insertions(+), 22 deletions(-) rename docs/references/expo/web-support/{custom-signup-signin-pages.mdx => custom-sign-in-or-up-page.mdx} (63%) create mode 100644 docs/references/expo/web-support/custom-sign-up-page.mdx diff --git a/docs/manifest.json b/docs/manifest.json index c9ba7a21ef..b57ad0c7fc 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -2296,8 +2296,8 @@ "href": "/docs/references/expo/use-local-credentials" }, { - "title": "useOAuth()", - "href": "/docs/references/expo/use-oauth" + "title": "Add custom sign-in-or-up page", + "href": "/docs/references/expo/web-support/custom-sign-up-page" } ] ] @@ -2333,6 +2333,10 @@ { "title": "Add custom sign-up and sign-in pages", "href": "/docs/references/expo/web-support/custom-signup-signin-pages" + }, + { + "title": "Add custom sign-in-or-up page", + "href": "/docs/references/expo/web-support/custom-sign-up-page" } ] ] diff --git a/docs/references/expo/web-support/custom-signup-signin-pages.mdx b/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx similarity index 63% rename from docs/references/expo/web-support/custom-signup-signin-pages.mdx rename to docs/references/expo/web-support/custom-sign-in-or-up-page.mdx index 5890a38cdf..6a85e78499 100644 --- a/docs/references/expo/web-support/custom-signup-signin-pages.mdx +++ b/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx @@ -1,28 +1,16 @@ --- -title: Build sign in and sign up pages with prebuilt components on web -description: Learn how to add custom sign-in and sign-up pages to your Expo app with Clerk's prebuilt components. +title: Build your own sign-in-or-up page with prebuilt components on web +description: Learn how to add custom sign-in-or-up page to your Expo 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) prebuilt components in order to build custom sign-in and sign-up pages for your Expo **web** app. +This guide shows you how to use the [``](/docs/components/authentication/sign-in) prebuilt component in order to build custom sign-in-or-up page for your Expo **web** app. -This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and the [platform-specific extensions](https://docs.expo.dev/router/create-pages/#platform-specific-extensions) to build the sign-up and sign-in pages specifically for the **web** platform. +This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and the [platform-specific extensions](https://docs.expo.dev/router/create-pages/#platform-specific-extensions) to build the sign-in-or-up page specifically for the **web** platform. - ### Build a sign-up page + ## Build a sign-in-or-up page - The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component. - - ```tsx filename="/app/sign-up.web.tsx" - import { SignUp } from '@clerk/clerk-expo/web' - - export default function Page() { - return - } - ``` - - ### Build a sign-in page - - The following example demonstrates how to render the [``](/docs/components/authentication/sign-in) component. + The following example demonstrates how to render the [``](/docs/components/authentication/sign-in) component to allow users to both sign-in or sign-up from a single flow. ```tsx filename="/app/sign-in.web.tsx" import { SignIn } from '@clerk/clerk-expo/web' @@ -32,7 +20,7 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th } ``` - ### Visit your new pages + ## Visit your new page To run your project, use the following command: @@ -50,7 +38,7 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th ``` - Visit your new custom pages locally at [localhost:8081/sign-in](http://localhost:8081/sign-in) and [localhost:8081/sign-up](http://localhost:8081/sign-up). + Visit your new custom pages locally at [localhost:8081/sign-in](http://localhost:8081/sign-in). ## More resources @@ -58,6 +46,11 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers. + - [Custom sign-up page](/docs/references/expo/web-support/custom-sign-up-page) + - Learn how to add a custom sign-up page to your Next.js app with Clerk's prebuilt components. + + --- + - [Prebuilt components](/docs/components/overview) - Learn more about Clerk's suite of components that let you quickly add authentication to your app. diff --git a/docs/references/expo/web-support/custom-sign-up-page.mdx b/docs/references/expo/web-support/custom-sign-up-page.mdx new file mode 100644 index 0000000000..2b5e0c4bf8 --- /dev/null +++ b/docs/references/expo/web-support/custom-sign-up-page.mdx @@ -0,0 +1,66 @@ +--- +title: Build your own sign-up page with prebuilt components on web +description: Learn how to add custom sign-up page to your Expo app with Clerk's prebuilt components. +--- + +This guide shows you how to use the [``](/docs/components/authentication/sign-up) prebuilt component in order to build custom sign-up page for your Expo **web** app. + +This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and the [platform-specific extensions](https://docs.expo.dev/router/create-pages/#platform-specific-extensions) to build the sign-in-or-up page specifically for the **web** platform. + + + ## Build a sign-up page + + The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component. + + ```tsx filename="/app/sign-up.web.tsx" + import { SignUp } from '@clerk/clerk-expo/web' + + export default function Page() { + return + } + ``` + + ## Visit your new page + + To run your project, use the following command: + + + ```bash filename="terminal" + npm run web + ``` + + ```bash filename="terminal" + yarn web + ``` + + ```bash filename="terminal" + pnpm web + ``` + + + Visit your new custom pages locally at [localhost:8081/sign-up](http://localhost:8081/sign-up). + + +## More resources + +Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers. + + + - [Prebuilt components](/docs/components/overview) + - Learn more about Clerk's suite of components that let you quickly add authentication to your app. + + --- + + - [Customization & localization](/docs/customization/overview) + - Learn how to customize and localize Clerk components. + + --- + + - [Custom flows](/docs/custom-flows/overview) + - Expo native apps require custom flows in place of prebuilt components. Learn more about custom flows. + + --- + + - [Client-side helpers](/docs/references/react/use-user) + - Learn more about our client-side helpers and how to use them. + From 44424dbdac99c8f324e6bb0eb3fabe60dc12c043 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 13 Dec 2024 09:34:03 -0500 Subject: [PATCH 18/31] TanStack Start sign-in-or-up docs (#1792) Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/manifest.json | 4 +- docs/quickstarts/tanstack-start.mdx | 4 +- .../custom-sign-in-or-up-page.mdx | 71 +++++++++++++++++++ ...ignin-pages.mdx => custom-signup-page.mdx} | 31 ++------ 4 files changed, 82 insertions(+), 28 deletions(-) create mode 100644 docs/references/tanstack-start/custom-sign-in-or-up-page.mdx rename docs/references/tanstack-start/{custom-signup-signin-pages.mdx => custom-signup-page.mdx} (51%) diff --git a/docs/manifest.json b/docs/manifest.json index b57ad0c7fc..a38581d890 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -2516,8 +2516,8 @@ "items": [ [ { - "title": "Add custom sign up and sign in pages", - "href": "/docs/references/tanstack-start/custom-signup-signin-pages", + "title": "Add custom sign-in-or-up-page", + "href": "/docs/references/tanstack-start/custom-sign-in-or-up-page", "wrap": true }, { diff --git a/docs/quickstarts/tanstack-start.mdx b/docs/quickstarts/tanstack-start.mdx index 33b15bf8c5..7180270478 100644 --- a/docs/quickstarts/tanstack-start.mdx +++ b/docs/quickstarts/tanstack-start.mdx @@ -243,8 +243,8 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat ## Next steps - - [Create custom sign-up and sign-in pages](/docs/references/tanstack-start/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/tanstack-start/custom-sign-in-or-up-page) + - Learn how add custom sign-in-or-up page with Clerk components. --- diff --git a/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx b/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx new file mode 100644 index 0000000000..c57b39ae52 --- /dev/null +++ b/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx @@ -0,0 +1,71 @@ +--- +title: Build your own sign-in-or-up page for your TanStack Start app with Clerk +description: Learn how to add a custom sign-in-or-up page to your TanStack Start app with Clerk's prebuilt components. +--- + +This guide shows you how to use the [``](/docs/components/authentication/sign-in) component with the [Tanstack Router catch-all route](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing#splat--catch-all-routes) in order to build a custom page for your TanStack Start app that allows users to sign-in or sign-up within a single flow. + +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 TanStack Start? See the [quickstart tutorial](/docs/quickstarts/tanstack-start)! + + + ## 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/tanstack-start' + import { createFileRoute } from '@tanstack/react-router' + + export const Route = createFileRoute('/sign-in/$')({ + component: Page, + }) + + function Page() { + return + } + ``` + + ## Configure your sign-in-or-up page + + To tell Clerk where to find your sign-in-or-up page, set the following [environment variables](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects): + + ```env {{ filename: '.env' }} + CLERK_SIGN_IN_URL=/sign-in + CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/ + ``` + + ## 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:3000/sign-in](http://localhost:3000/sign-in). + + +## Next steps + + + - [Create custom sign-up page](/docs/references/tanstack-start/custom-signup-page) + - Learn how to add a custom sign-up page to your TanStack Start app with Clerk's prebuilt components. + + --- + + - [Read user and session data](/docs/references/tanstack-start/read-session-data) + - Learn how to use Clerk's hooks and helpers to access the active session and user data in your TanStack Start application. + diff --git a/docs/references/tanstack-start/custom-signup-signin-pages.mdx b/docs/references/tanstack-start/custom-signup-page.mdx similarity index 51% rename from docs/references/tanstack-start/custom-signup-signin-pages.mdx rename to docs/references/tanstack-start/custom-signup-page.mdx index 3abd5ac433..86e125a0a4 100644 --- a/docs/references/tanstack-start/custom-signup-signin-pages.mdx +++ b/docs/references/tanstack-start/custom-signup-page.mdx @@ -1,9 +1,9 @@ --- -title: Build your own sign-in and sign-up pages for your TanStack Start app with Clerk -description: Learn how to add custom sign-in and sign-up pages to your TanStack Start app with Clerk's prebuilt components. +title: Build your own sign-up page for your TanStack Start app with Clerk +description: Learn how to add a custom sign-up page to your TanStack Start 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 [TanStack Router Catch-All Routes](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing#splat--catch-all-routes) in order to build custom sign-in and sign-up pages for your TanStack Start app. +By default, the [``](/docs/references/nextjs/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 [TanStack Router catch-all route](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing#splat--catch-all-routes) in order to build custom sign-up page for your TanStack Start 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). @@ -28,28 +28,11 @@ If Clerk's prebuilt components don't meet your specific needs or if you require } ``` - ## Build a sign-in page + ## Configure your sign-up page - The following example demonstrates how to render the [``](/docs/components/authentication/sign-in) component. + To tell Clerk where to find your sign-up page, set the following [environment variables](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects): - ```tsx {{ filename: 'app/routes/sign-in.$.tsx' }} - import { SignIn } from '@clerk/tanstack-start' - import { createFileRoute } from '@tanstack/react-router' - - export const Route = createFileRoute('/sign-in/$')({ - component: Page, - }) - - function Page() { - return - } - ``` - - ## Configure your sign-up and sign-in pages - - To tell Clerk where to find your sign-in and sign-up pages, set the following [environment variables](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects): - - ```env {{ filename: '.env' }} + ```env {{ filename: '.env', mark: [2, 4] }} CLERK_SIGN_IN_URL=/sign-in CLERK_SIGN_UP_URL=/sign-up CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/ @@ -74,7 +57,7 @@ If Clerk's prebuilt components don't meet your specific needs or if you require ``` - Visit your new custom pages locally at [localhost:3000/sign-in](http://localhost:3000/sign-in) and [localhost:3000/sign-up](http://localhost:3000/sign-up). + Visit your new custom page locally at [localhost:3000/sign-up](http://localhost:3000/sign-up). ## Next steps From 4a1654037c92c44357966ff87299a24d80688a5e Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 13 Dec 2024 13:02:14 -0500 Subject: [PATCH 19/31] Remix sign-in-or-up docs (#1791) Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/manifest.json | 4 +- docs/quickstarts/remix.mdx | 4 +- .../remix/custom-sign-in-or-up-page.mdx | 82 ++++++++++++++ docs/references/remix/custom-signup-page.mdx | 81 +++++++++++++ .../remix/custom-signup-signin-pages.mdx | 107 ------------------ 5 files changed, 167 insertions(+), 111 deletions(-) create mode 100644 docs/references/remix/custom-sign-in-or-up-page.mdx create mode 100644 docs/references/remix/custom-signup-page.mdx delete mode 100644 docs/references/remix/custom-signup-signin-pages.mdx diff --git a/docs/manifest.json b/docs/manifest.json index a38581d890..12e5f44198 100644 --- a/docs/manifest.json +++ b/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", diff --git a/docs/quickstarts/remix.mdx b/docs/quickstarts/remix.mdx index a43cf5f365..7eeafcf4fe 100644 --- a/docs/quickstarts/remix.mdx +++ b/docs/quickstarts/remix.mdx @@ -280,8 +280,8 @@ Learn how to use Clerk to quickly and easily add secure authentication and user ## Next steps - - [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. --- diff --git a/docs/references/remix/custom-sign-in-or-up-page.mdx b/docs/references/remix/custom-sign-in-or-up-page.mdx new file mode 100644 index 0000000000..487740cf06 --- /dev/null +++ b/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 [``](/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)! + + + ## 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/remix' + + export default function Page() { + return + } + ``` + + ## Configure your sign-in-or-up page + + + + 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=/ + ``` + + + + 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: '/', + }) + ``` + + + + ## Visit your new page + + Run your project with the following terminal command from the root directory of your project: + + + ```bash {{ filename: 'terminal' }} + npm run dev + ``` + + ```bash {{ filename: 'terminal' }} + yarn dev + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dev + ``` + + + Visit your new custom page locally at [localhost:3000/sign-in](http://localhost:3000/sign-in). + + +## Next steps + + + - [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. + diff --git a/docs/references/remix/custom-signup-page.mdx b/docs/references/remix/custom-signup-page.mdx new file mode 100644 index 0000000000..8ca3595905 --- /dev/null +++ b/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 [``](/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 [``](/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)! + + + ## Build a sign-up page + + The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component. + + ```tsx {{ filename: 'app/routes/sign-up.$.tsx' }} + import { SignUp } from '@clerk/remix' + + export default function Page() { + return + } + ``` + + ## Configure your sign-up page + + + + 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=/ + ``` + + + + 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: '/', + }) + ``` + + + + ## 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:3000/sign-up](http://localhost:3000/sign-up). + + +## Next steps + + + - [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. + diff --git a/docs/references/remix/custom-signup-signin-pages.mdx b/docs/references/remix/custom-signup-signin-pages.mdx deleted file mode 100644 index f0a2cb40dd..0000000000 --- a/docs/references/remix/custom-signup-signin-pages.mdx +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Build your own sign-in and sign-up pages for your Remix app with Clerk -description: Learn how to add custom sign-in and sign-up pages to your Remix 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 [Remix optional route](https://reactrouter.com/en/main/route/route#optional-segments) in order to build custom sign-in and sign-up pages 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). - -The functionality of the components are controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com). - -> [!NOTE] -> Just getting started with Clerk and Remix? See the [quickstart tutorial](/docs/quickstarts/remix)! - - - ### Build your sign-up page - - The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component. - - ```tsx {{ filename: 'app/routes/sign-up.$.tsx' }} - import { SignUp } from '@clerk/remix' - - export default function SignUpPage() { - return ( -
-

Sign Up route

- -
- ) - } - ``` - - ### Build your 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/remix' - - export default function SignInPage() { - return ( -
-

Sign In route

- -
- ) - } - ``` - - ### Configure your sign-up and sign-in pages - - - - For SSR Mode, add environment variables for the `signIn`, `signUp`, `afterSignUp`, and `afterSignIn` paths: - - ```env {{ filename: '.env' }} - CLERK_SIGN_IN_URL=/sign-in - CLERK_SIGN_UP_URL=/sign-up - CLERK_SIGN_IN_FALLBACK_URL=/ - CLERK_SIGN_UP_FALLBACK_URL=/ - ``` - - - - 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, 6]] }} - export default ClerkApp(App, { - publishableKey: PUBLISHABLE_KEY, - signInUrl: '/sign-in', - signUpUrl: '/sign-up', - signInFallbackRedirectUrl: '/', - signUpFallbackRedirectUrl: '/', - }) - ``` - - - - These values 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. - - ### Visit your new pages - - Run your project with the following terminal command from the root directory of your project: - - - ```bash {{ filename: 'terminal' }} - npm run dev - ``` - - ```bash {{ filename: 'terminal' }} - yarn dev - ``` - - ```bash {{ filename: 'terminal' }} - pnpm dev - ``` - - - Visit your new custom pages locally at [localhost:3000/sign-in](http://localhost:3000/sign-in) and [localhost:3000/sign-up](http://localhost:3000/sign-up). - - -## Next steps - - - - [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. - From e2e150d7dc3b3031e287168b23e02f59b5645600 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 13 Dec 2024 13:21:42 -0500 Subject: [PATCH 20/31] fix link --- docs/references/tanstack-start/overview.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/references/tanstack-start/overview.mdx b/docs/references/tanstack-start/overview.mdx index 68a1d12288..219dfe5b3a 100644 --- a/docs/references/tanstack-start/overview.mdx +++ b/docs/references/tanstack-start/overview.mdx @@ -8,7 +8,7 @@ Clerk makes it simple to add authentication to your TanStack Start application. ## Guides - [Read session and user data](/docs/references/tanstack-start/read-session-data) -- [Add custom sign up and sign in pages](/docs/references/tanstack-start/custom-signup-signin-pages) +- [Add custom sign-in-or-up page](/docs/references/tanstack-start/custom-sign-in-or-up-page) ## Client-side helpers From 507f71d2218860845764c882ab38f75af244d880 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 17 Dec 2024 13:34:44 -0500 Subject: [PATCH 21/31] sign-up -> signup --- docs/references/expo/web-support/custom-sign-in-or-up-page.mdx | 2 +- .../{custom-sign-up-page.mdx => custom-signup-page.mdx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename docs/references/expo/web-support/{custom-sign-up-page.mdx => custom-signup-page.mdx} (100%) diff --git a/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx b/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx index 6a85e78499..4dd1f6e509 100644 --- a/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx +++ b/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx @@ -46,7 +46,7 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers. - - [Custom sign-up page](/docs/references/expo/web-support/custom-sign-up-page) + - [Custom sign-up page](/docs/references/expo/web-support/custom-signup-page) - Learn how to add a custom sign-up page to your Next.js app with Clerk's prebuilt components. --- diff --git a/docs/references/expo/web-support/custom-sign-up-page.mdx b/docs/references/expo/web-support/custom-signup-page.mdx similarity index 100% rename from docs/references/expo/web-support/custom-sign-up-page.mdx rename to docs/references/expo/web-support/custom-signup-page.mdx From df507beb43c5fa62a96dc5adc08c2511af9631c6 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 17 Dec 2024 13:38:04 -0500 Subject: [PATCH 22/31] sign-up vs signup --- docs/components/authentication/sign-up.mdx | 2 +- docs/manifest.json | 4 ++-- .../references/expo/web-support/custom-sign-in-or-up-page.mdx | 2 +- .../{custom-signup-page.mdx => custom-sign-up-page.mdx} | 0 docs/references/nextjs/custom-sign-in-or-up-page.mdx | 2 +- .../{custom-signup-page.mdx => custom-sign-up-page.mdx} | 0 docs/references/remix/custom-sign-in-or-up-page.mdx | 2 +- .../remix/{custom-signup-page.mdx => custom-sign-up-page.mdx} | 0 docs/references/tanstack-start/custom-sign-in-or-up-page.mdx | 2 +- .../{custom-signup-page.mdx => custom-sign-up-page.mdx} | 0 10 files changed, 7 insertions(+), 7 deletions(-) rename docs/references/expo/web-support/{custom-signup-page.mdx => custom-sign-up-page.mdx} (100%) rename docs/references/nextjs/{custom-signup-page.mdx => custom-sign-up-page.mdx} (100%) rename docs/references/remix/{custom-signup-page.mdx => custom-sign-up-page.mdx} (100%) rename docs/references/tanstack-start/{custom-signup-page.mdx => custom-sign-up-page.mdx} (100%) diff --git a/docs/components/authentication/sign-up.mdx b/docs/components/authentication/sign-up.mdx index a6b1d2ff1b..0e76106084 100644 --- a/docs/components/authentication/sign-up.mdx +++ b/docs/components/authentication/sign-up.mdx @@ -92,7 +92,7 @@ The following example includes basic implementation of the `` componen The following example demonstrates how you can use the `` component on a public page. - If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-page). + If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-sign-up-page). ```tsx {{ filename: 'app/page.tsx' }} import { SignUp, useUser } from '@clerk/nextjs' diff --git a/docs/manifest.json b/docs/manifest.json index ec3e159876..7f22044dac 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -2352,7 +2352,7 @@ }, { "title": "Add custom sign-up and sign-in pages", - "href": "/docs/references/expo/web-support/custom-signup-signin-pages" + "href": "/docs/references/expo/web-support/custom-sign-up-signin-pages" }, { "title": "Add custom sign-in-or-up page", @@ -2448,7 +2448,7 @@ }, { "title": "Add custom sign up and sign in pages", - "href": "/docs/references/react-router/custom-signup-signin-pages" + "href": "/docs/references/react-router/custom-sign-up-signin-pages" }, { "title": "Library mode", diff --git a/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx b/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx index 4dd1f6e509..6a85e78499 100644 --- a/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx +++ b/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx @@ -46,7 +46,7 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers. - - [Custom sign-up page](/docs/references/expo/web-support/custom-signup-page) + - [Custom sign-up page](/docs/references/expo/web-support/custom-sign-up-page) - Learn how to add a custom sign-up page to your Next.js app with Clerk's prebuilt components. --- diff --git a/docs/references/expo/web-support/custom-signup-page.mdx b/docs/references/expo/web-support/custom-sign-up-page.mdx similarity index 100% rename from docs/references/expo/web-support/custom-signup-page.mdx rename to docs/references/expo/web-support/custom-sign-up-page.mdx diff --git a/docs/references/nextjs/custom-sign-in-or-up-page.mdx b/docs/references/nextjs/custom-sign-in-or-up-page.mdx index 05ed514d6a..c3d44344a5 100644 --- a/docs/references/nextjs/custom-sign-in-or-up-page.mdx +++ b/docs/references/nextjs/custom-sign-in-or-up-page.mdx @@ -86,7 +86,7 @@ If the prebuilt components don't meet your specific needs or if you require more ## Next steps - - [Custom sign-up page](/docs/references/nextjs/custom-signup-page) + - [Custom sign-up page](/docs/references/nextjs/custom-sign-up-page) - Learn how to add a custom sign-up page to your Next.js app with Clerk's prebuilt components. --- diff --git a/docs/references/nextjs/custom-signup-page.mdx b/docs/references/nextjs/custom-sign-up-page.mdx similarity index 100% rename from docs/references/nextjs/custom-signup-page.mdx rename to docs/references/nextjs/custom-sign-up-page.mdx diff --git a/docs/references/remix/custom-sign-in-or-up-page.mdx b/docs/references/remix/custom-sign-in-or-up-page.mdx index 487740cf06..6ab377ac4d 100644 --- a/docs/references/remix/custom-sign-in-or-up-page.mdx +++ b/docs/references/remix/custom-sign-in-or-up-page.mdx @@ -72,7 +72,7 @@ If Clerk's prebuilt components don't meet your specific needs or if you require ## Next steps - - [Custom sign-up page](/docs/references/remix/custom-signup-page) + - [Custom sign-up page](/docs/references/remix/custom-sign-up-page) - Learn how to add a custom sign-up page to your Remix app with Clerk's prebuilt components. --- diff --git a/docs/references/remix/custom-signup-page.mdx b/docs/references/remix/custom-sign-up-page.mdx similarity index 100% rename from docs/references/remix/custom-signup-page.mdx rename to docs/references/remix/custom-sign-up-page.mdx diff --git a/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx b/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx index c57b39ae52..8e98c7ea6c 100644 --- a/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx +++ b/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx @@ -61,7 +61,7 @@ If Clerk's prebuilt components don't meet your specific needs or if you require ## Next steps - - [Create custom sign-up page](/docs/references/tanstack-start/custom-signup-page) + - [Create custom sign-up page](/docs/references/tanstack-start/custom-sign-up-page) - Learn how to add a custom sign-up page to your TanStack Start app with Clerk's prebuilt components. --- diff --git a/docs/references/tanstack-start/custom-signup-page.mdx b/docs/references/tanstack-start/custom-sign-up-page.mdx similarity index 100% rename from docs/references/tanstack-start/custom-signup-page.mdx rename to docs/references/tanstack-start/custom-sign-up-page.mdx From e35aac764396007bdee61956b08d48f67ff0185c Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 17 Dec 2024 13:40:17 -0500 Subject: [PATCH 23/31] fix manifest links --- docs/manifest.json | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/docs/manifest.json b/docs/manifest.json index 7f22044dac..d0b2ab034a 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -2316,8 +2316,8 @@ "href": "/docs/references/expo/use-local-credentials" }, { - "title": "Add custom sign-in-or-up page", - "href": "/docs/references/expo/web-support/custom-sign-up-page" + "title": "useOAuth()", + "href": "/docs/references/expo/use-oauth" } ] ] @@ -2350,13 +2350,9 @@ "title": "Overview", "href": "/docs/references/expo/web-support/overview" }, - { - "title": "Add custom sign-up and sign-in pages", - "href": "/docs/references/expo/web-support/custom-sign-up-signin-pages" - }, { "title": "Add custom sign-in-or-up page", - "href": "/docs/references/expo/web-support/custom-sign-up-page" + "href": "/docs/references/expo/web-support/custom-sign-in-or-up-page" } ] ] From da11741324d2ff78b547baa414a2184f5ba8061b Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 17 Dec 2024 17:16:33 -0500 Subject: [PATCH 24/31] 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). From 2f59681d4863cfe01a0a167ebd1cb6e499de77bc Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 18 Dec 2024 08:51:30 -0500 Subject: [PATCH 25/31] format --- docs/references/react-router/custom-sign-in-or-up-page.mdx | 2 +- docs/references/react-router/custom-sign-up-page.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index 3bd94e2f0e..ebcb932317 100644 --- a/docs/references/react-router/custom-sign-in-or-up-page.mdx +++ b/docs/references/react-router/custom-sign-in-or-up-page.mdx @@ -73,4 +73,4 @@ If the prebuilt components don't meet your specific needs or if you require more - [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-sign-up-page.mdx b/docs/references/react-router/custom-sign-up-page.mdx index 51f34fabe2..f04ecb9ca0 100644 --- a/docs/references/react-router/custom-sign-up-page.mdx +++ b/docs/references/react-router/custom-sign-up-page.mdx @@ -43,7 +43,7 @@ If the prebuilt components don't meet your specific needs or if you require more 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', mark: [2,4] }} + ```env {{ filename: '.env', mark: [2, 4] }} CLERK_SIGN_IN_FALLBACK_URL=/ CLERK_SIGN_UP_FALLBACK_URL=/ CLERK_SIGN_IN_URL=/sign-in From a647b31b9271d66330030a177abffd2054c7553e Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 18 Dec 2024 09:32:39 -0500 Subject: [PATCH 26/31] Update manifest.json --- docs/manifest.json | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/docs/manifest.json b/docs/manifest.json index 87a9fe9a4a..8e413cfb17 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1801,6 +1801,10 @@ "title": "Add a custom sign-in-or-up page", "href": "/docs/references/nextjs/custom-sign-in-or-up-page" }, + { + "title": "Add a custom sign-up page", + "href": "/docs/references/nextjs/custom-sign-up-page" + }, { "title": "Integrate Clerk into your app with tRPC", "href": "/docs/references/nextjs/trpc" @@ -2351,8 +2355,12 @@ "href": "/docs/references/expo/web-support/overview" }, { - "title": "Add custom sign-in-or-up page", + "title": "Add a custom sign-in-or-up page", "href": "/docs/references/expo/web-support/custom-sign-in-or-up-page" + }, + { + "title": "Add a custom sign-up page", + "href": "/docs/references/expo/web-support/custom-sign-up-page" } ] ] @@ -2446,6 +2454,10 @@ "title": "Add custom sign-in-or-up page", "href": "/docs/references/react-router/custom-sign-in-or-up-page" }, + { + "title": "Add custom sign-up page", + "href": "/docs/references/react-router/custom-sign-up-page" + }, { "title": "Library mode", "href": "/docs/references/react-router/library-mode" @@ -2493,6 +2505,11 @@ "wrap": true, "href": "/docs/references/remix/custom-sign-in-or-up-page" }, + { + "title": "Add custom sign-up page", + "wrap": true, + "href": "/docs/references/remix/custom-sign-up-page" + }, { "title": "Read session and user data", "wrap": true, @@ -2536,6 +2553,11 @@ "href": "/docs/references/tanstack-start/custom-sign-in-or-up-page", "wrap": true }, + { + "title": "Add custom sign-up-page", + "href": "/docs/references/tanstack-start/custom-sign-up-page", + "wrap": true + }, { "title": "Read session and user data", "href": "/docs/references/tanstack-start/read-session-data", From dc045f4a681738aa9c19f21956757cc703b5e311 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 8 Jan 2025 16:01:50 -0500 Subject: [PATCH 27/31] revert account portal changes --- docs/customization/account-portal/overview.mdx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/customization/account-portal/overview.mdx b/docs/customization/account-portal/overview.mdx index 96737d202c..14be888263 100644 --- a/docs/customization/account-portal/overview.mdx +++ b/docs/customization/account-portal/overview.mdx @@ -28,13 +28,21 @@ For each application environment, Clerk provides pages for sign-up, sign-in, use ## Hosted pages -### Sign-in-or-up +### Sign-in -The sign-in page hosts the prebuilt [``](/docs/components/authentication/sign-in) component, which renders a UI for allowing users to sign-in or up. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). +The sign-in page hosts the prebuilt [``](/docs/components/authentication/sign-in) component, which renders a UI for signing in users. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). ![The Account Portal sign-in page hosts the \ component](/docs/images/account-portal/sign-in.png) -Redirect users to the sign-in page using the [``](/docs/components/control/redirect-to-signin) control component. Redirect users to the sign-up flow using the [``](/docs/components/control/redirect-to-signup) control component. +Redirect users to the sign-in page using the [``](/docs/components/control/redirect-to-signin) control component. + +### Sign-up + +The sign-up page hosts the prebuilt [``](/docs/components/authentication/sign-up) component, which renders a UI for signing up users. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). + +![The Account Portal sign-up page hosts the \ component](/docs/images/account-portal/sign-up.png) + +Redirect users to the sign-up page using the [``](/docs/components/control/redirect-to-signup) control component. ### User profile @@ -72,4 +80,4 @@ Redirect your authenticated users to their organization profile page using the [ The waitlist page hosts the prebuilt [``](/docs/components/waitlist) component which renders a form that allows users to join for early access to your app. -![The Account Portal waitliste page hosts the \ component](/docs/images/account-portal/waitlist.png) +![The Account Portal waitliste page hosts the \ component](/docs/images/account-portal/waitlist.png) \ No newline at end of file From 8a98df8ce40fb9052184af9cbc2532df32bfb5a9 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 10 Jan 2025 10:41:55 -0500 Subject: [PATCH 28/31] make card consistent --- docs/quickstarts/react-router.mdx | 4 ++-- docs/quickstarts/remix.mdx | 2 +- docs/quickstarts/tanstack-start.mdx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/quickstarts/react-router.mdx b/docs/quickstarts/react-router.mdx index 48c27b5398..f775bce785 100644 --- a/docs/quickstarts/react-router.mdx +++ b/docs/quickstarts/react-router.mdx @@ -227,8 +227,8 @@ This guide assumes that you're using [React Router v7 or later](https://api.reac ## Next steps - - [Add custom sign-up and sign-in pages](/docs/references/react-router/custom-signup-signin-pages) - - Learn how to add custom sign-up and sign-in pages to your React Router app with Clerk's prebuilt components. + - [Create a custom sign-in-or-up page](/docs/references/react-router/custom-sign-in-or-up-page) + - Learn how add custom sign-in-or-up page with Clerk components. --- diff --git a/docs/quickstarts/remix.mdx b/docs/quickstarts/remix.mdx index fc4f6c3b21..34a03ffbc0 100644 --- a/docs/quickstarts/remix.mdx +++ b/docs/quickstarts/remix.mdx @@ -280,7 +280,7 @@ Learn how to use Clerk to quickly and easily add secure authentication and user ## Next steps - - [Create custom sign-in-or-up page](/docs/references/remix/custom-sign-in-or-up-page) + - [Create a 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. --- diff --git a/docs/quickstarts/tanstack-start.mdx b/docs/quickstarts/tanstack-start.mdx index 964cf320f7..cf3232c372 100644 --- a/docs/quickstarts/tanstack-start.mdx +++ b/docs/quickstarts/tanstack-start.mdx @@ -243,7 +243,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat ## Next steps - - [Create custom sign-in-or-up page](/docs/references/tanstack-start/custom-sign-in-or-up-page) + - [Create a custom sign-in-or-up page](/docs/references/tanstack-start/custom-sign-in-or-up-page) - Learn how add custom sign-in-or-up page with Clerk components. --- From acfc53ffa6da23f12429cd6cff024ec22ce48834 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 10 Jan 2025 10:42:42 -0500 Subject: [PATCH 29/31] format --- docs/customization/account-portal/overview.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/customization/account-portal/overview.mdx b/docs/customization/account-portal/overview.mdx index 14be888263..f5287b11f9 100644 --- a/docs/customization/account-portal/overview.mdx +++ b/docs/customization/account-portal/overview.mdx @@ -80,4 +80,4 @@ Redirect your authenticated users to their organization profile page using the [ The waitlist page hosts the prebuilt [``](/docs/components/waitlist) component which renders a form that allows users to join for early access to your app. -![The Account Portal waitliste page hosts the \ component](/docs/images/account-portal/waitlist.png) \ No newline at end of file +![The Account Portal waitliste page hosts the \ component](/docs/images/account-portal/waitlist.png) From 78634dad5c6bdfffbe2789f7a1d57c4e243b1786 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 10 Jan 2025 16:47:32 -0500 Subject: [PATCH 30/31] add withSignUp prop --- docs/components/authentication/sign-in.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index ee8b7b477b..c5c763dd07 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -92,6 +92,13 @@ All props are optional. --- + - `withSignUp?` + - `boolean` + + Opt into sign-in-or-up flow by setting this prop to `true`. Defaults to `false`. When true, if a user does not exist, they will be prompted to sign up. If a user exists, they will be prompted to sign in. + + --- + - `fallback?` - `ReactNode` From f6e9713065e2e0c347e09af8195be8ab08715431 Mon Sep 17 00:00:00 2001 From: Bryce Kalow Date: Thu, 16 Jan 2025 12:57:00 -0600 Subject: [PATCH 31/31] Apply suggestions from code review Co-authored-by: Jacek Radko --- docs/components/authentication/sign-in.mdx | 2 +- docs/references/nextjs/custom-sign-in-or-up-page.mdx | 2 +- docs/references/react-router/custom-sign-in-or-up-page.mdx | 4 ++-- docs/references/remix/custom-sign-in-or-up-page.mdx | 2 +- docs/references/tanstack-start/custom-sign-in-or-up-page.mdx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index 578a445a60..a2a1134721 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -5,7 +5,7 @@ description: Clerk's component renders a UI for signing in users. ![The \ component renders a UI for signing in users.](/docs/images/ui-components/sign-in.png){{ style: { maxWidth: '460px' } }} -The `` component renders a UI to allow users to sign-in or sign-up by default. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). You can further customize your `` component by passing additional [properties](#properties) at the time of rendering. +The `` component renders a UI to allow users to sign in or sign up by default. The functionality of the `` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). You can further customize your `` component by passing additional [properties](#properties) at the time of rendering. > [!NOTE] > The `` and `` components cannot render when a user is already signed in, unless the application allows multiple sessions. If a user is already signed in and the application only allows a single session, Clerk will redirect the user to the Home URL instead. diff --git a/docs/references/nextjs/custom-sign-in-or-up-page.mdx b/docs/references/nextjs/custom-sign-in-or-up-page.mdx index c3d44344a5..23f5a4159d 100644 --- a/docs/references/nextjs/custom-sign-in-or-up-page.mdx +++ b/docs/references/nextjs/custom-sign-in-or-up-page.mdx @@ -3,7 +3,7 @@ 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 [``](/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. +This guide shows you how to use the [``](/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). 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 index ebcb932317..2b95e62986 100644 --- a/docs/references/react-router/custom-sign-in-or-up-page.mdx +++ b/docs/references/react-router/custom-sign-in-or-up-page.mdx @@ -3,9 +3,9 @@ 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. +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). +If the prebuilt components don’t fully meet your needs or you want greater control over the logic, you can recreate Clerk’s existing flows using the Clerk API. For more information, see the [custom flow guides](/docs/custom-flows/overview). ## Build a sign-in-or-up page diff --git a/docs/references/remix/custom-sign-in-or-up-page.mdx b/docs/references/remix/custom-sign-in-or-up-page.mdx index 6ab377ac4d..6e210a6668 100644 --- a/docs/references/remix/custom-sign-in-or-up-page.mdx +++ b/docs/references/remix/custom-sign-in-or-up-page.mdx @@ -3,7 +3,7 @@ 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 [``](/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. +This guide shows you how to use the [``](/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). diff --git a/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx b/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx index 8e98c7ea6c..5aa3e58f9d 100644 --- a/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx +++ b/docs/references/tanstack-start/custom-sign-in-or-up-page.mdx @@ -3,7 +3,7 @@ title: Build your own sign-in-or-up page for your TanStack Start app with Clerk description: Learn how to add a custom sign-in-or-up page to your TanStack Start app with Clerk's prebuilt components. --- -This guide shows you how to use the [``](/docs/components/authentication/sign-in) component with the [Tanstack Router catch-all route](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing#splat--catch-all-routes) in order to build a custom page for your TanStack Start app that allows users to sign-in or sign-up within a single flow. +This guide shows you how to use the [``](/docs/components/authentication/sign-in) component with the [Tanstack Router catch-all route](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing#splat--catch-all-routes) in order to build a custom page for your TanStack Start app that allows users to sign in or sign up within a single flow. 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).