Build your own sign-in-or-up page for your TanStack React Start app with Clerk

Build a sign-in-or-up page
Configure your sign-in-or-up page
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.

Note

Just getting started with Clerk and TanStack React Start? See the quickstart tutorial!

The following example demonstrates how to render the <SignIn /> component on a dedicated page using the TanStack Router catch-all route.

src/routes/sign-in.$.tsx

import { SignIn } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/sign-in/$')({
  component: Page,
})

function Page() {
  return <SignIn />
}

Set the CLERK_SIGN_IN_URL environment variable to tell Clerk where the <SignIn /> component is being hosted.

There are other environment variables that you can set to customize Clerk's redirect behavior, such as CLERK_SIGN_IN_FORCE_REDIRECT_URL. Learn more about these environment variables and how to customize Clerk's redirect behavior in the dedicated guide.

.env

CLERK_SIGN_IN_URL=/sign-in

Visit your new page

Run your project with the following command:

npm

pnpm

yarn

bun

terminal

npm run dev

terminal

pnpm run dev

terminal

yarn dev

terminal

bun run dev

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

Edit on GitHub

Build your own sign-in-or-up page for your TanStack React Start app with Clerk

Visit your new page

Next steps

Create a custom sign-up page

Protect content and read user data

Client-side helpers

Prebuilt components

Clerk TanStack React Start SDK Reference

Build your own sign-in-or-up page for your TanStack React Start app with Clerk

Feedback