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.
Build a sign-up page
The following example demonstrates how to render the <SignUp /> component.
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.
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:
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:
npm run devyarn devpnpm devVisit 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
Last updated on