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

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

Available in other SDKs

Important

There are many routing libraries available for React, but Clerk Docs uses React Router as it's the most popular and well-supported routing library for React. If you're using a different routing library, use these guides as a starting point.

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.

This example assumes you have already set up the sign-in page by following the custom sign-in-or-up page guide.

The following example demonstrates how to render the <SignUp /> component on a dedicated sign-up page.

React Router

No router

Warning

This example assumes you've added React Router to your application. If you haven't, see the dedicated tutorial.

Create a src/sign-up.tsx file and add the following code:

src/sign-up.tsx

import { SignUp } from '@clerk/react'

export default function SignUpPage() {
  return <SignUp />
}

Warning

Since this approach uses window.location.pathname instead of a routing library, the app will flicker on navigation between pages and steps. For production apps, consider using a routing library like React Router.

Update your src/App.tsx file to add the SignUpPage() component and handle the /sign-up route.

src/App.tsx

import { Show, SignInButton, SignUpButton, UserButton, SignIn, SignUp } from '@clerk/react'

function SignInPage() {
  return <SignIn path="/sign-in" />
}

function SignUpPage() {
  return <SignUp path="/sign-up" />
}

export default function App() {
  const path = window.location.pathname

  if (path === '/sign-in' || path.startsWith('/sign-in/')) {
    return (
      <div>
        <SignInPage />
      </div>
    )
  }

  if (path === '/sign-up' || path.startsWith('/sign-up/')) {
    return (
      <div>
        <SignUpPage />
      </div>
    )
  }

  return (
    <header>
      <Show when="signed-out">
        <SignInButton />
        <SignUpButton />
      </Show>
      <Show when="signed-in">
        <UserButton />
      </Show>
    </header>
  )
}

React Router

No router

Update your src/main.tsx to import the sign-up page, add a route for it, and add the signUpUrl prop to your <ClerkProvider>.

Set signUpUrl to tell Clerk where the <SignUp /> component is being hosted.
Set signUpFallbackRedirectUrl as a fallback URL in case users visit the /sign-up route directly.
Set signInFallbackRedirectUrl as a fallback URL in case users select the 'Already have an account? Sign in' link at the bottom of the component.

Learn more about these props and how to customize Clerk's redirect behavior in the dedicated guide.

src/main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router'
import { ClerkProvider } from '@clerk/react'
import './index.css'
import SignInPage from './sign-in.tsx'
import SignUpPage from './sign-up.tsx'
import App from './App.tsx'

function RootLayout() {
  const navigate = useNavigate()

  return (
    <ClerkProvider
      routerPush={(to) => navigate(to)}
      routerReplace={(to) => navigate(to, { replace: true })}
      signInUrl="/sign-in"
      signUpUrl="/sign-up"
      signInFallbackRedirectUrl="/"
      signUpFallbackRedirectUrl="/"
    >
      <Routes>
        <Route path="/" element={<App />} />
        {/* Must be a splat route (catch-all) route to handle nested paths */}
        <Route path="/sign-in/*" element={<SignInPage />} />
        <Route path="/sign-up/*" element={<SignUpPage />} />
      </Routes>
    </ClerkProvider>
  )
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <RootLayout />
    </BrowserRouter>
  </StrictMode>,
)

Update your <ClerkProvider> to add the signUpUrl prop alongside the existing props.

Set signUpUrl to tell Clerk where the <SignUp /> component is being hosted.
Set signUpFallbackRedirectUrl as a fallback URL in case users visit the /sign-up route directly.
Set signInFallbackRedirectUrl as a fallback URL in case users select the 'Already have an account? Sign in' link at the bottom of the component.

Learn more about these props and how to customize Clerk's redirect behavior in the dedicated guide.

src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { ClerkProvider } from '@clerk/react'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ClerkProvider
      signInUrl="/sign-in"
      signUpUrl="/sign-up"
      signInFallbackRedirectUrl="/"
      signUpFallbackRedirectUrl="/"
    >
      <App />
    </ClerkProvider>
  </React.StrictMode>,
)

Visit your new page

Run your project with the following command:

npm

pnpm

yarn

bun

terminal

npm run dev

terminal

pnpm run dev

terminal

yarn dev

terminal

bun run dev

Visit your new custom page locally at localhost:5173/sign-up.

Edit on GitHub

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

Visit your new page

Next steps

Protect content and read user data

Prebuilt components

Customization & localization

Clerk React SDK Reference

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

Feedback