Docs

How to implement the Implicit Grant

Password Reset Page

This article will help you learn how to configure the custom Password Reset page.

If you are:

The Password Reset Page provides your applications' users with a way to change their passwords if they can't log in.

With the Password Reset Page, Auth0 handles all required functionality, including:

  • Hosting the page itself
  • Redirecting the user wanting to reset their password as necessary (there is no URL to which the user can point their browsers)
  • Ensuring that the user's password meets your stated requirements and is updated accordingly
  • Automatically redirecting the user after they reset their password

The Password Reset Page includes use of the Password Reset Widget. You can, however, customize the page to display the personalized information you deem appropriate and to maintain consistency in the appearance of your Auth0 pages (e.g., Login, Password Reset, and MFA).

1. Get the User's Authorization

Enable Customization of the Password Reset Page

By default, the Password Reset Page is enabled for all Auth0 users. The Password Reset Page works as is without customization. However, if you want to change the page to match your other pages and present your branding, you can enable customization of the Password Reset Page.

To do so, log in to the Dashboard. Go to Universal Login > Password Reset. Toggle Customize Password Reset Page to enable customization.

Hosted Password Reset Page

2. Extract the Access Token

Edit the Password Reset Page

Once you've enabled the customization toggle for the Password Reset Page, you can use the built-in text editor to change its HTML, style the page using CSS, and change the JavaScript used to retrieve and display custom variables. Be sure to Save any changes you make.

3. Call the API

Display custom information on the Password Reset Page

You can display personalized information on the Password Reset Page. This is done by editing the embedded JavaScript using the Password Reset Page Editor:

For example, the sample template snippet below shows the variable tenant.picture_url. This variable returns the Logo URL value defined in Tenant Settings.

Auth0 retrieves the logo at the URL and displays it on the Password Reset Widget. If Auth0 can't resolve the URL, it'll display that the default image.

4. Verify the Token

Custom variables

The following custom variables can be used to display personalized information on the Password Reset Page:

Variable Description
email The email address of the user requesting the password change
ticket The ticket representing the given password reset request
csrf_token Token used to prevent CSRF activity
tenant.name The name associated with your Auth0 tenant
tenant.friendly_name The name displayed for your Auth0 tenant
tenant.picture_url The URL leading to the logo representing you in Auth0
tenant.support_email The support email address for your company displayed to your Auth0 users
tenant.support_url The support URL for your company displayed to your Auth0 users
lang The user's language
password_policy The active connection's security policy. You can see what this is using https://manage.auth0.com/#/connections/database/con_YOUR-CONNECTION-ID/security. Be sure to provide your connection ID in the URL.)
password_complexity_options Object containing settings for the password complexity requirements
min_length The minimum length required for newly-created passwords. Can range from 1 to 128 characters in length

Notes:

  • You can set/check the values for your tenant variables in the Settings area in Tenant Settings
  • You cannot conditionalize customizations based on the Application ID (client_id).

Optional: Customize the Tokens

Update the Password Reset Widget

If you do not enable customization of the Password Reset Page, Auth0 will handle updates necessary for the script, including changes to the version number of the included Password Reset Widget.

Once you have enabled customization of the Password Reset Page, it is your responsibility to update and maintain the script. This includes updating the version number for the Password Reset Widget. With customization enabled, Auth0 cannot update your script automatically without potentially interfering with changes you've made.

Optional: Silent Authentication

Revert your changes

If you'd like to revert the Password Reset Page to an earlier design, you have two options:

  • Reverting to the last saved template by clicking Reset to Last;
  • Reverting to the default template provided by Auth0 by clicking Reset to Default.