Ready-to-use signup form with React

In this section, we add an automatic signup form that can do the following:

#Example: React signup form

#Install the Userfront React library

To add the form to your React project, first install @userfront/toolkit with npm.

#Render the signup form in React

Initialize the Userfront Toolkit for React with your workspace ID using Userfront.init().

Then, import the <SignupForm /> React component from @userfront/toolkit/react and use it in your React app.

#Test mode

By default, your form is in test mode. This allows you to experiment and develop locally without affecting your live data.

Test mode is used automatically for any domains that are not secured with https:// or that are not added to your list of live domains.

#Register a user

Add your signup form to any page where you want a user to sign up.

For example, you may want your signup form directly on your home page and also on a page at /signup. You can also add it to your marketing pages if desired.

In order for the signup form to work properly, it should be located at the same domain as your "logged in" pages.


When a user signs up, they are redirected to the URL of your choice.

The default is /dashboard, but you can change it on the Redirect paths page in the dashboard.

Upon signing up, the user will be redirected to whatever domain the form is on, plus the After-signup path.

For example, if the signup form is at, then the user will be redirected to upon sign up.

#Welcome email

When a user signs up with their email and password, Userfront sends them a welcome email.

This email says that they have signed up for your project and asks the user to verify their email address by clicking on a link.

When the user clicks on the link, their email address is verified, and they are redirected to your After-login path.

#Signup webhook

If you want to be notified when a new user is created, you can add a URL to the User Created Webhook in your workspace settings.

Userfront will send a JSON POST request to your Webhook URL whenever a user is created. This request will have your workspace's Webhook API key in the header, which you can use to verify the request in your application.

For more information about webhooks, see the Webhook reference.

#Single Sign-on

To configure Single sign-on (SSO) with Google or other providers, visit the SSO tab in the Userfront dashboard.

From there, you can add the credentials for the providers you want to use.

Once you have done this, the corresponding button(s) will show up on your form automatically.

Single sign-on with Google