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.
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/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:
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/Visit your new page
Run your project with the following command:
npm run devyarn devpnpm devVisit 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
Last updated on