Skip to main content
Docs

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

Warning

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

By default, the <SignIn /> component handles signing in and signing up, but if you'd like to have a dedicated sign-up page, this guide shows you how to use the <SignUp /> component to build a custom sign-up page.

To set up a single sign-in-or-up page, follow the custom sign-in-or-up page guide.

Note

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

Build a sign-up page

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

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

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

Configure your sign-up page

  • Set the CLERK_SIGN_UP_URL environment variable to tell Clerk where the <SignUp /> component is being hosted.
  • Set CLERK_SIGN_UP_FALLBACK_REDIRECT_URL as a fallback URL incase users visit the /sign-up route directly.
  • Set CLERK_SIGN_IN_FALLBACK_REDIRECT_URL as a fallback URL incase users select the 'Already have an account? Sign in' 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_UP_URL=/sign-up
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
  • Set the signUpUrl property to your ClerkApp options to tell Clerk where the <SignUp /> component is being hosted.
  • Set the signUpFallbackRedirectUrl property to a fallback URL incase users visit the /sign-up route directly.
  • Set the signInFallbackRedirectUrl property to a fallback URL incase users select the 'Already have an account? Sign in' 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,
  signUpUrl: '/sign-up',
  signUpFallbackRedirectUrl: '/',
  signInFallbackRedirectUrl: '/',
})

Visit your new page

Run your project with the following command:

terminal
npm run dev
terminal
yarn dev
terminal
pnpm dev
terminal
bun dev

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

Next steps

Protect content and read user data

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

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on