Build your own sign-up page for your TanStack React Start app with Clerk
By default, the <SignIn /> component handles signing in and signing up, but if you'd like to have a dedicated sign-up page, this guide shows you how to use the <SignUp /> component to build a custom sign-up page.
To set up a single sign-in-or-up page, follow the custom sign-in-or-up page guide.
Build a sign-up page
The following example demonstrates how to render the <SignUp /> component on a dedicated sign-up page using the TanStack Router catch-all route.
import { SignUp } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/sign-up/$')({
component: Page,
})
function Page() {
return <SignUp />
}Configure your sign-up page
- Set the
CLERK_SIGN_UP_URLenvironment variable to tell Clerk where the<SignUp />component is being hosted.
There are other environment variables that you can set to customize Clerk's redirect behavior, such as CLERK_SIGN_UP_FORCE_REDIRECT_URL. Learn more about these environment variables and how to customize Clerk's redirect behavior in the dedicated guide.
CLERK_SIGN_UP_URL=/sign-upVisit your new pages
Run your project with the following command:
npm run devyarn devpnpm devbun devVisit your new custom page locally at localhost:3000/sign-up.
Read user and session data
Learn how to use Clerk's hooks and helpers to access the session and user data in your TanStack React Start application.
Feedback
Last updated on