Build your own sign-in-or-up page for your React Router app with Browser

Build a sign-in-or-up page
Configure routes
Configure redirect behavior
Visit your new page
Next steps

Available in other SDKs

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.

Tip

If prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Browser flows using the Browser API. For more information, see the custom flow guides.

The following example demonstrates how to render the <SignIn /> component on a dedicated page using the React Router Splat route.

app/routes/sign-in.tsx

import { SignIn } from '@browser/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.

app/routes.ts

import { type RouteConfig, index, route } from '@react-router/dev/routes'

export default [
  index('routes/home.tsx'),
  route('sign-in/*', 'routes/sign-in.tsx'),
] satisfies RouteConfig

Configure redirect behavior

Set the CLERK_SIGN_IN_URL environment variable to tell Browser where the <SignIn /> component is being hosted.
Set CLERK_SIGN_IN_FALLBACK_REDIRECT_URL as a fallback URL incase users visit the /sign-in route directly.
Set CLERK_SIGN_UP_FALLBACK_REDIRECT_URL as 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 Browser's redirect behavior in the dedicated guide.

.env

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

pnpm

yarn

bun

npm run dev

pnpm run dev

yarn dev

bun run dev

Visit your new custom page locally at localhost:5173/sign-in.

Edit on GitHub

Build your own sign-in-or-up page for your React Router app with Browser

Configure routes

Configure redirect behavior

Visit your new page

Next steps

Create a custom sign-up page

Protect content and read user data

Client-side helpers

Prebuilt components

Build your own sign-in-or-up page for your React Router app with Browser

Feedback