Build your own sign-up page for your Remix app with Clerk
By default, the <SignIn /> 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 <SignUp /> component with the Next.js optional catch-all route 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.
Build a sign-up page
The following example demonstrates how to render the <SignUp /> component.
import { SignUp } from '@clerk/remix'
export default function Page() {
return <SignUp />
}For SSR Mode, add environment variables for the signUp and afterSignUp paths:
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.
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:
npm run devyarn devpnpm 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