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. -