Build your own sign-up page for your Remix app with Clerk
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.
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.
import { SignUp } from '@clerk/remix'
export default function Page() {
return <SignUp />
}- Set the
CLERK_SIGN_UP_URLenvironment variable to tell Clerk where the<SignUp />component is being hosted. - Set
CLERK_SIGN_UP_FALLBACK_REDIRECT_URLas a fallback URL incase users visit the/sign-uproute directly. - Set
CLERK_SIGN_IN_FALLBACK_REDIRECT_URLas 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.
CLERK_SIGN_UP_URL=/sign-up
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/- Set the
signUpUrlproperty to yourClerkAppoptions to tell Clerk where the<SignUp />component is being hosted. - Set the
signUpFallbackRedirectUrlproperty to a fallback URL incase users visit the/sign-uproute directly. - Set the
signInFallbackRedirectUrlproperty 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.
export default ClerkApp(App, {
publishableKey: PUBLISHABLE_KEY,
signUpUrl: '/sign-up',
signUpFallbackRedirectUrl: '/',
signInFallbackRedirectUrl: '/',
})Visit your new page
Run your project with the following command:
npm run devyarn devpnpm devbun devVisit your new custom page locally at localhost:3000/sign-up.
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
Last updated on