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 with the React Router Splat route in order to build a custom page for your Next.js app that allows users to sign in or sign up within a single flow.
If the prebuilt components don’t fully meet your needs or you want greater control over the logic, you can recreate Clerk’s existing flows using the Clerk API. For more information, see the custom flow guides.
Build a sign-in-or-up page
The following example demonstrates how to render the <SignIn /> component to allow users to both sign-in or sign-up from a single flow.
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
Update your environment variables to point to your custom sign-in-or-up page. Learn more about the available environment variables.
CLERK_SIGN_IN_FALLBACK_URL=/
CLERK_SIGN_IN_URL=/sign-inVisit your new page
Run your project with the following command:
npm run devyarn devpnpm 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