Guide
Toolkit /
/
/

Build a password reset form with React

In this section, we create a custom password reset form that allows a user to reset their password and includes:

#Example: custom password reset form

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

#The password reset flow is as follows:

  1. A user requests a password reset email. Userfront sends the user an email. This email contains a link to reset the user's password.
  2. The user clicks the link. The link has a special token and uuid in the URL.
  3. The user submits their new password. The user submits their new password with the password reset form on the page. The form updates the user's password and then logs in the user.

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

AND

The token and uuid from the password reset email must be present in the URL. Thus, this example form does not reset an actual password.

#Add the Userfront Core JS library

Start by adding the Userfront Core JS library via CDN or using npm.

You only need to do one of these.

#CDN

#NPM

Then import the library into your file(s)

#Requesting a password reset email

In order to request a password reset email, call the sendResetLink() method with the user's email address.

Userfront will email the user with a link to your account's Password reset path.

The link will look something like:

https://www.example.com/reset?token=...&uuid=...

#Set up the form

Create your password reset form with the elements you want to use.

In this case, we've added:

  • password - required to update the password
  • passwordVerify - optional, for checking the password before updating it

#Password reset form React code

#constructor()

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

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.resetPassword() with the current password.

#render()

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

#Userfront.resetPassword()

The resetPassword() method allows the user to submit a new password.

Userfront then does the following:

  1. Verifies the user's credentials
  2. Updates the user's password
  3. Adds the user's access token as a cookie named access.demo1234
  4. Redirects the page to the After-login path

#Error handling

Whenever the Userfront.resetPassword() 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 password reset 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.resetPassword(), it catches the error and displays the error message.

The alert component is rendered above the form as:

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

#Password verification

Userfront will verify that the password is the correct length and format, and we can additionally verify that the user has typed what they intended by having them type it twice.

This "passwords match" verification is performed before sending the information to Userfront.