Build your own sign-in-or-up page for your Remix app with Clerk

Build a sign-in-or-up page
Configure your sign-in-or-up page
Visit your new page
Next steps

Available in other SDKs

Warning

The Remix SDK is in maintenance mode and will only receive security updates. Please migrate to the React Router SDK for continued development and new features.

This guide shows you how to use the <SignIn /> component to build a custom page that allows users to sign in or sign up within a single flow.

To set up separate sign-in and sign-up pages, follow this guide, and then follow the custom sign-up page guide.

Note

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

The following example demonstrates how to render the <SignIn /> component on a dedicated page using the Remix optional route.

app/routes/sign-in.$.tsx

import { SignIn } from '@clerk/remix'

export default function Page() {
  return <SignIn />
}

SSR Mode

SPA Mode

Set the CLERK_SIGN_IN_URL environment variable to tell Clerk where the <SignIn /> component is being hosted.
Set CLERK_SIGN_IN_FALLBACK_REDIRECT_URL as a fallback URL incase users visit the /sign-in route directly.
Set CLERK_SIGN_UP_FALLBACK_REDIRECT_URL as a fallback URL incase users select the 'Don't have an account? Sign up' link at the bottom of the component.

Learn more about these environment variables and how to customize Clerk's redirect behavior in the dedicated guide.

.env

CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

Set the signInUrl property to your ClerkApp options to tell Clerk where the <SignIn /> component is being hosted.
Set the signInFallbackRedirectUrl property to a fallback URL incase users visit the /sign-in route directly.
Set the signUpFallbackRedirectUrl property to a fallback URL incase users select the 'Don't have an account? Sign up' link at the bottom of the component.

Learn more about these environment variables and how to customize Clerk's redirect behavior in the dedicated guide.

app/root.tsx

export default ClerkApp(App, {
  publishableKey: PUBLISHABLE_KEY,
  signInUrl: '/sign-in',
  signInFallbackRedirectUrl: '/',
  signUpFallbackRedirectUrl: '/',
})

Visit your new page

Run your project with the following terminal command from the root directory of your project:

npm

pnpm

yarn

bun

terminal

npm run dev

terminal

pnpm run dev

terminal

yarn dev

terminal

bun run dev

Visit your new custom page locally at localhost:3000/sign-in.

Edit on GitHub

Build your own sign-in-or-up page for your Remix app with Clerk

Visit your new page

Next steps

Create a custom sign-up page

Protect content and read user data

Client-side helpers

Prebuilt components

Clerk Remix SDK Reference

Build your own sign-in-or-up page for your Remix app with Clerk

Feedback