Ready-to-use login form with React
In this section, we add an automatic login form that can do the following:
- Log in a user with email or username
- Redirect to a URL of your choice upon login
- Single Sign-on (SSO) with Google & others
- Send a login link
- Send a password reset email
#Example: React login form
#Install the Userfront React library
To add the form to your React project, first install @userfront/react with npm (or yarn).
#Render the login form in React
First, initialize the Userfront React library with your account ID using Userfront.init().
Build the LoginForm component with Userfront.build() using the tool ID corresponding to your login form. This can be found in the Toolkit section of the Userfront dashboard.
Render the <LoginForm /> component 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 account:
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.
#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.
#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.
