Skip to main content
Docs

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

This guide shows you how to use the <SignIn /> component with the Tanstack Router catch-all route in order to build a custom page for your TanStack Start app that allows users to sign in or sign up within a single flow.

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, see the custom flow guides.

Note

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

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.

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-in-or-up page

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

.env
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/

Visit your new page

Run your project with the following command:

terminal
npm run dev
terminal
yarn dev
terminal
pnpm dev

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

Create custom sign-up page

Learn how to add a custom sign-up page to your TanStack Start app with Clerk's prebuilt components.

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