Build a password reset form with HTML
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:
- A user requests a password reset email. Userfront sends the user an email. This email contains a link to reset the user's password.
- The user clicks the link. The link has a special
uuidin the URL.
- 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.
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.
Then import the library into your file(s)
Requesting a password reset email
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
password-verify- optional, for checking the password before updating it
Pass form data to Userfront.resetPassword()
The resetPassword() method allows the user to submit a new password.
Userfront then does the following:
- Verifies the user's credentials
- Updates the user's password
- Adds the user's access token as a cookie named
- Redirects the page to the After-login path
In the example code here, we do the following:
- Reference all the elements on the page
- Define a custom
formResetPassword()method that calls
Userfront.resetPassword()with the form value
- Add an event listener to call
formResetPassword()when the form is submitted
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.
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 the
setAlert() method to display the error message inside of our alert element.