A beautiful, high-conversion sign-up flow with your choice of required fields and social sign-up providers.
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/> .
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.
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: