Build your own sign-in-or-up page for your TanStack React Start app with Clerk
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.
Build a sign-in-or-up page
The following example demonstrates how to render the <SignIn /> component on a dedicated page using the TanStack Router catch-all route.
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 />
}Configure your sign-in-or-up page
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.
CLERK_SIGN_IN_URL=/sign-inVisit your new page
Run your project with the following command:
npm run devyarn devpnpm devbun 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 React 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 React Start application.
Feedback
Last updated on