Build your own sign-up page for your React Router 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 React Router Splat route in order to build custom sign-up page for your React Router 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/react-router'
export default function SignUpPage() {
return (
<div>
<h1>Sign up route</h1>
<SignUp />
</div>
)
}Configure routes
React Router expects you to define routes in app/routes.ts. Add the previously created sign-up page to your route configuration.
import { type RouteConfig, index, route } from '@react-router/dev/routes'
export default [
index('routes/home.tsx'),
route('sign-in/*', 'routes/sign-in.tsx'),
route('sign-up/*', 'routes/sign-up.tsx'),
] satisfies RouteConfigConfigure redirect behavior
Update your environment variables to point to your custom sign-up page. Learn more about the available environment variables.
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_UP_URL=/sign-upThese values control the behavior of the <SignUp /> and <SignIn /> components and when you visit the respective links at the bottom of each component.
Visit your new page
Run your project with the following command:
npm run devyarn devpnpm devVisit your new custom page locally at localhost:5173/sign-up.
Feedback
Last updated on