Ready-to-use login form with React

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



#Example: React login form

#Install the Userfront React library

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

#Render the login form in React

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

Then, import the <LoginForm /> 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.

#Log in a user

Add your login form to any page where you want a user to be able to login.

The user is able to log in with either their email address or their username, if applicable.

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

#Redirection

When a user logs in, they are redirected to the path of your choice.

The default is /dashboard, but you can change it in your workspace:

Settings › After-login path

Upon logging in, the user will be redirected to whatever domain the form is on, plus the After-login path.

For example, if the login form is at https://example.com/login, then the user will be redirected to https://example.com/dashboard upon login.

#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 login with Google

#Login link

The automatic form can send login links (sometimes called "magic links") to a user.

When the user submits their email address, Userfront sends them an email with a link to log in. This link allows the user to log in without entering their password.

Login links are valid for 1 hour and can only be used once.

Login link form

#Password reset link

The automatic form can send password reset links to a user.

When the user submits their email address, Userfront sends them an email with a link to reset their password. This link directs the user to your Password reset path, which is where you should add your password reset form.

Password reset links are valid for 1 hour and can only be used once.

Password reset link form