Build your own sign-in-or-up page for your React Router app with Clerk
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.
Build a sign-in-or-up page
The following example demonstrates how to render the <SignIn /> component on a dedicated page using the React Router Splat route.
import { SignIn } from '@clerk/react-router'
export default function SignInPage() {
return (
<div>
<h1>Sign in or up route</h1>
<SignIn />
</div>
)
}Configure routes
React Router expects you to define routes in app/routes.ts. Add the previously created sign-in-or-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'),
] satisfies RouteConfigConfigure redirect behavior
- Set the
CLERK_SIGN_IN_URLenvironment variable to tell Clerk where the<SignIn />component is being hosted. - Set
CLERK_SIGN_IN_FALLBACK_REDIRECT_URLas a fallback URL incase users visit the/sign-inroute directly. - Set
CLERK_SIGN_UP_FALLBACK_REDIRECT_URLas 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.
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/Visit your new page
Run your project with the following command:
npm run devyarn devpnpm devbun devVisit your new custom page locally at localhost:5173/sign-in.
Custom sign-up page
Learn how to add a custom sign-up page to your React Router app with Clerk's prebuilt components.
Feedback
Last updated on