<SignUp />

Search…
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 using the Theme Settings, theming props or plain CSS.
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 <SignIn/> component, all that's left is to render it inside your page. The default rendering is simple but powerful enough to cover most use-cases. The authentication and display (look and feel) configuration that you've set up in your Clerk Dashboard will work out of the box.
Clerk React
ClerkJS
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 frontendApi={"[your-frontend-api]"}>
13
      <MySignUpPage />
14
    </ClerkProvider>
15
  );
16
}
17
​
18
export default App;
Copied!
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>
Copied!
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):
1.If using Clerk React, ensure your ClerkProvider component has its navigate prop configured.
2.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:
For NextJS, use an optional catch-all route like pages/sign-up/[[...index]].js
For React Router, use a wildcard path like /sign-up(/?.*) or simply /sign-up
Clerk React
Clerk Next
ClerkJS
1
import { ClerkProvider, SignUp } from '@clerk/clerk-react';
2
import { useNavigate } from 'react-router-dom';
3
​
4
function App() {
5
  // Get the navigate method from
6
  // the router your app is using. For this
7
  // example we will use 'react-router-dom'
8
  const navigate = useNavigate();
9
​
10
  return (
11
    // Pass the push method to ClerkProvider
12
    <ClerkProvider 
13
        frontendApi={"[your-frontend-api]"} 
14
        navigate={to => navigate(to)}
15
    >
16
      <Switch>
17
        // Declare a /sign-up route
18
        <Route path='/sign-up'>
19
          // Finally, mount the SignUp component under "/sign-up" 🎉
20
          // Don't forget to set the "routing" and "path" props
21
          <SignUp routing='path' path='/sign-up' />
22
        </Route>
23
      </Switch>
24
    </ClerkProvider>
25
  );
26
}
27
​
28
export default App;
Copied!
1
// In _app.js:
2
// Your usual NextJS root component, wrapped by ClerkProvider
3
import '../styles/globals.css';
4
import { ClerkProvider } from '@clerk/clerk-react';
5
import { useRouter } from 'next/router';
6
​
7
function MyApp({ Component, pageProps }) {
8
  // Get the navigate/push method from
9
  // the NextJS router
10
  const { push } = useRouter();
11
​
12
  return (
13
    // Pass the push method to ClerkProvider
14
    <ClerkProvider 
15
        frontendApi={clerkFrontendApi} 
16
        navigate={to => push(to)}
17
    >
18
      <Component {...pageProps} />
19
    </ClerkProvider>
20
  );
21
}
22
​
23
export default MyApp;
24
​
25
​
26
// In pages/sign-up/[[..index]].tsx
27
// This is your catch all route that renders the SignUp component
28
import { SignUp } from '@clerk/clerk-react';
29
​
30
export default function SignUpPage() {
31
  // Finally, mount the SignUp component under "/sign-up" 🎉
32
  // Don't forget to set the "routing" and "path" props
33
  return <SignUp routing='path' path='/sign-up' />;
34
}
Copied!
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>
Copied!
For more information, see Routing.
Presenting as a modal
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.
Clerk React
ClerkJS
1
import { useClerk } from "@clerk/clerk-react";
2
​
3
const SignUpButton = () => {
4
  const { openSignUp } = useClerk();
5
  return <button onClick={openSignUp}>Sign up</button>;
6
};
Copied!
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>
Copied!
Props
Name
Description
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 root URL where the component is mounted on.
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 Instance settings on the Theme page. This document will be updated soon with all necessary details.
Component Reference - Previous
Sign-up
Last modified 1mo ago
Copy link
Contents
Overview
Usage
Mounting in your app
Using path-based routing
Presenting as a modal
Props
Customization