Guide
Toolkit /
/
/

Build a login form with React

In this section, we create a custom login form with email/username and password that includes:

#Example: custom login form with React

You can clone the example login form on CodePen(opens new window) and make edits, or follow along below.

The example form has the Userfront Core JS library added to the document, as described in the next section.

#Add the Userfront Core JS library

You can add the Userfront Core JS library by CDN or using npm.

You only need to do one of these.

#CDN

#NPM

Then import the library into your file(s)

#Set up the form

Create your login form with the elements you want to use.

In this case, we've added:

  • emailOrUsername - the user's email address or username
  • password - required for login with password

#Login form React code

#constructor()

Here we set up our state variables with emailOrUsername and password.

We also bind our functions so that this.setState will update the state variables.

#handleInputChange()

Whenever an input changes value, this function will set the corresponding state variable.

#handleSubmit()

When the form is submitted, this function will call Userfront.login() with the current emailOrUsername and password.

#render()

Adds the login form with 2 inputs and a button, and connects them to the handleInputChange() and handleSubmit() functions.

#Email or username field

For login, you can use the emailOrUsername field, which will accept both email and username.

If you want email only, or username only, you can use the email or username attributes instead of emailOrUsername.

#Error handling

Whenever the Userfront.login() method fails, we can catch its error in the promise chain.

This error contains a message property with what went wrong.

In this example, we use an <Alert /> component to display the error message.

Our login form can use this component by including an alertMessage variable in the state, and then setting it whenever we want to update the message.

Now the handleSubmit() method clears the alert message whenever the button is clicked. Then if there is an error with Userfront.login(), it catches the error and displays the error message.

The alert component is rendered above the form as:

<Alert message={this.state.alertMessage} />

#Single sign-on

To configure Single sign-on (SSO), first add the provider you want to use in the Userfront dashboard in the SSO tab.

In this example, we add an <SSOButton /> component to allow login with Google.

Ultimately, we need to call Userfront.login({ method: "google" }) whenever the button is clicked. You can style the button however you like.

You can find more provider options like GitHub, LinkedIn, and Facebook in the docs for login().

To render the <SSOButton /> component into the login form, we can add it below the <form> element.

#Login after redirect

Once the browser is redirected back to your login page after SSO approval, your application should call

Userfront.login({ method: "link" })

You can set up your JS to call this method automatically by checking whether the URL contains the token and uuid parameters.

If your original SSO signup call contained a redirect parameter, it will be included in the URL and followed automatically.