<SignUp />

A beautiful, high-conversion sign-up flow with your choice of required fields and social sign-up providers.

Overview

The <SignUp/> component is used to render a beautiful, high-conversion sign-up flow with your choice of required fields and social sign-up providers. It supports any authentication scheme, from basic Email/password authentication to Passwordless and Social Login (OAuth) and it automatically handles everything for you, from basic data collection to email address and phone number verification.

The <SignUp/> component is extremely flexible. Simply configure the User Management settings of your instance according to your business requirements and the <SignUp/> .

Control the look and feel of the <SignUp/> component and match it to your application brand using the appearance prop.

Usage

Make sure you've followed the installation guide for Clerk React or ClerkJS before running the snippets below.

Mounting in your app

Once you set up the desired functionality and look and feel for the <SignUp/> component, all that's left is to render it inside your page.

1
import { ClerkProvider, SignUp } from '@clerk/clerk-react';
2

3
function MySignUpPage() {
4
  // Render the SignUp component
5
  // somewhere in your app
6
  return <SignUp />;
7
}
8

9
function App() {
10
  return (
11
    // Your app needs to be wrapped with ClerkProvider
12
    <ClerkProvider publishableKey="your-pub-key">
13
    </ClerkProvider>
14
  );
15
}
16

17
export default App;

1
<html>
2
<body>
3
    <div id="sign-up"></div>
4
    
5
    <script>
6
        const el = document.getElementById("sign-up");
7
        // Mount the pre-built Clerk SignUp component
8
        // in an HTMLElement on your page. 
9
        window.Clerk.mountSignUp(el);
10
    </script>
11
</body>
12
</html>

Using path-based routing

The mounted <SignUp/> component uses hash-based routing by default: as the user goes through the sign up flow, hash portion of the URL will update to reflect the current step (eg: example.com/#/verify-email).

With additional configuration, the mounted component can use path-based routing instead (eg: example.com/sign-up/verify-email):

If using Clerk React, ensure your ClerkProvider component has its navigate prop configured.
Add the path and routing props to your SignUp component. Set path to the path where the component renders

When using path-based routing, the <SignUp/> component must render on path and all of it's subpaths:

1
import { 
2
  ClerkProvider,
3
  SignedIn,
4
  SignUp
5
} from "@clerk/clerk-react";
6
import {
7
  BrowserRouter,
8
  Route,
9
  Routes,
10
  useNavigate
11
} from "react-router-dom";
12

13
function PublicPage() {
14
  return <h1>Public page</h1>;
15
}
16

17
function ProtectedPage() {
18
  return <h1>Protected page</h1>;
19
}
20

21
function ClerkProviderWithRoutes() {
22
  const navigate = useNavigate();
23

24
  return (
25
    <ClerkProvider 
26
      publishableKey="clerk-publishable-key" 
27
      navigate={(to) => navigate(to)}
28
     >
29
      <Routes>
30
        <Route path="/" element={<PublicPage />} />
31
        <Route
32
          path="/sign-up"
33
          element={<SignIn routing="path" path="/sign-up" />}
34
        />
35
        <Route
36
          path="/protected"
37
          element={
38
            <SignedIn>
39
              <ProtectedPage />
40
            </SignedIn>
41
          }
42
        />
43
      </Routes>
44
    </ClerkProvider>
45
  );
46
}
47

48
function App() {
49
  return (
50
    <BrowserRouter>
51
      <ClerkProviderWithRoutes />
52
    </BrowserRouter>
53
  );
54
}
55

56
export default App;

1
<html>
2
<body>
3
    <div id="sign-up"></div>
4
    
5
    <script>
6
        const el = document.getElementById("sign-up");
7
        // Mount the pre-built Clerk SignUp component
8
        // in an HTMLElement on your page. 
9
        window.Clerk.mountSignUp(el, {
10
            routing: 'path',
11
            path: '/sign-up',
12
        });
13
    </script>
14
</body>
15
</html>

The <SignUp/> component can also be presented as a modal. This is typically used on pages that show content whether or not the user is signed in.

1
import { useClerk } from "@clerk/clerk-react";
2

3
const SignUpButton = () => {
4
  const { openSignUp } = useClerk();
5
  return <button onClick={openSignUp}>Sign up</button>;
6
};

1
<html>
2
<body>
3
    <button id="open-sign-up">Open sign up</button>
4
    <script>
5
        // Calling the openSignUp method will
6
        // open the SignUp component as a modal
7
        // and show the hosted Sign Up page
8
        const btn = document.getElementById('open-sign-up');
9
        btn.addEventListener('click', () => {
10
            window.Clerk.openSignUp();
11
        });
12
    </script>
13
</body>
14
</html>

Props

Name	Type	Description
appearance?	Theme	Controls the overall look and feel
routing?	RoutingStrategy	The routing strategy for your pages. Supported values are: hash (default): Hash based routing. path: Path based routing. virtual: Virtual based routing.
path?	string	The path where the component is mounted when path-based routing is used. -e.g. /sign-up. This prop is ignored in hash and virtual based routing.
redirectUrl?	string	Full URL or path to navigate after successful sign in or sign up. The same as setting afterSignInUrl and afterSignUpUrl to the same value.
afterSignUpUrl?	string	The full URL or path to navigate after a successful sign up.
afterSignInUrl?	string	The full URL or path to navigate after a successful sign in.
signInUrl?	string	Full URL or path to the sign up page. Use this property to provide the target of the "Sign In" link that's rendered at the bottom of the component.

Customization

The <SignUp/> component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.