Docs

Build your own sign-in and sign-up pages for your TanStack Start app with Clerk

This guide shows you how to use the <SignIn /> and <SignUp /> components with the TanStack Router Catch-All Routes in order to build custom sign-in and sign-up pages for your TanStack Start app.

If Clerk's 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, check out the custom flows guides.

Note

Just getting started with Clerk and TanStack Start? Check out the quickstart tutorial!

Build a sign-up page

The following example demonstrates how to render the <SignUp /> component.

app/routes/sign-up.$.tsx
import { SignUp } from '@clerk/tanstack-start'
import { createFileRoute } from '@tanstack/react-router'

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

function Page() {
  return <SignUp />
}

Build a sign-in page

The following example demonstrates how to render the <SignIn /> component.

app/routes/sign-in.$.tsx
import { SignIn } from '@clerk/tanstack-start'
import { createFileRoute } from '@tanstack/react-router'

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

function Page() {
  return <SignIn />
}

Configure your sign-up and sign-in pages

To tell Clerk where to find your sign-in and sign-up pages, set the following environment variables:

.env
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_UP_URL=/sign-up
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

Visit your new pages

Run your project with the following command:

terminal
npm run dev
terminal
yarn dev
terminal
pnpm dev

Visit your new custom pages locally at localhost:3000/sign-in and localhost:3000/sign-up.

Read user and session data

Learn how to use Clerk's hooks and helpers to access the active session and user data in your TanStack Start application.

Feedback

What did you think of this content?

Last updated on