Docs

Build your own sign-in and sign-up pages for your Remix app with Clerk

This guide shows you how to use the <SignIn /> and <SignUp /> components with the Remix optional route 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.

The functionality of the components are controlled by the instance settings you specify in the Clerk Dashboard.

Note

Just getting started with Clerk and Remix? See the quickstart tutorial!

Build your sign-up page

The following example demonstrates how to render the <SignUp /> component.

app/routes/sign-up.$.tsx
import { SignUp } from '@clerk/remix'

export default function SignUpPage() {
  return (
    <div>
      <h1>Sign Up route</h1>
      <SignUp />
    </div>
  )
}

Build your sign-in page

The following example demonstrates how to render the <SignIn /> component.

app/routes/sign-in.$.tsx
import { SignIn } from '@clerk/remix'

export default function SignInPage() {
  return (
    <div>
      <h1>Sign In route</h1>
      <SignIn />
    </div>
  )
}

Configure your sign-up and sign-in pages

For SSR Mode, add environment variables for the signIn, signUp, afterSignUp, and afterSignIn paths:

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

app/root.tsx
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:

terminal
npm run dev
terminal
yarn dev
terminal
pnpm dev

Visit your new custom pages locally at localhost:3000/sign-in and localhost:3000/sign-up.

Next steps

Read user and session data

Learn how to use Clerk's hooks and helpers to access the active session and user data in your Remix application.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on