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

Build a sign-up page
Configure your sign-up page
Visit your new pages
Next steps

Available in other SDKs

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.

Note

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

The following example demonstrates how to render the <SignUp /> component on a dedicated sign-up page using the TanStack Router catch-all route.

src/routes/sign-up.$.tsx

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 />
}

Set the CLERK_SIGN_UP_URL environment 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.

.env