Ready-to-use signup form with React
Example: React signup form
Install the Userfront React library
To add the form to your React project, first install
@userfront/react with npm (or yarn).
Render the signup form in React
First, initialize the Userfront React library with your account ID using
SignupForm component with
Userfront.build() using the tool ID corresponding to your signup form. This can be found in the Toolkit section of the Userfront dashboard.
<SignupForm /> component in your React app.
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 in your account:
Settings > After-signup path
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
https://example.com/features, then the user will be redirected to
https://example.com/dashboard upon sign up.
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.
If you want to be notified when a new user is created, you can add a URL to the User Created Webhook in your account settings.
Userfront will send a JSON
POST request to your Webhook URL whenever a user is created. This request will have your account'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.
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.