Customize Password Reset Page

Types of Password Resets

If you are:

The Password Reset Page provides your applications' users with a way to change their passwords if they cannot log in. Within 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 uses the Password Reset Widget. You can also 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). To learn more, read Customize Classic Universal Login Experience.

Enable Password Reset Page customization

By default, the Password Reset Page is enabled for all Auth0 users. The Password Reset Page works 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, go to Dashboard > Branding > Universal Login > Password Reset. Toggle Customize Password Reset Page to enable customization.

Branding Universal Login Password Reset Tab Customize Password Reset Page Toggle

Edit 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 click Save Changes at the bottom of the page to save any changes you make.

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:

new Auth0ChangePassword({
      container:         "change-password-widget-container",     // required
      email:             "{{email}}",                            // DO NOT CHANGE THIS
      csrf_token:        '{{csrf_token}}',                       // DO NOT CHANGE THIS
      ticket:            '{{ticket}}',                           // DO NOT CHANGE THIS
      password_policy:   '{{password_policy}}',                  // DO NOT CHANGE THIS
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
        primaryColor: "#ea5323"
      },
      dict: {
        // passwordPlaceholder: "your new password",
        // passwordConfirmationPlaceholder: "confirm your new password",
        // passwordConfirmationMatchError: "Please ensure the password and the confirmation are the same.",
        // passwordStrength: {
        //   containsAtLeast: "Contain at least %d of the following %d types of characters:",
        //   identicalChars: "No more than %d identical characters in a row (such as, \"%s\" not allowed)",
        //   nonEmpty: "Non-empty password required",
        //   numbers: "Numbers (such as 0-9)",
        //   lengthAtLeast: "At least %d characters in length",
        //   lowerCase: "Lower case letters (a-z)",
        //   shouldContain: "Should contain:",
        //   specialCharacters: "Special characters (such as !@#$%^&*)",
        //   upperCase: "Upper case letters (A-Z)"
        // },
        // successMessage: "Your password has been reset successfully.",
        // configurationError: "An error occurred. There appears to be a misconfiguration in the form.",
        // networkError: "The server cannot be reached, there is a problem with the network.",
        // timeoutError: "The server cannot be reached, please try again.",
        // serverError: "There was an error processing the password reset.",
        // headerText: "Enter a new password for<br />{email}",
        // title: "Change Password",
        // weakPasswordError: "Password is too weak."
        // passwordHistoryError: "Password has previously been used."
      }
    });

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

new Auth0ChangePassword({
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
      }
    });

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.

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 Dashboard > Settings.

  • You cannot make customizations conditional based on the Application ID (client_id).

Update 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.

The current version of the Password Reset Widget is 1.5.4. Use this link to call the latest version, including future minor version updates:

https://cdn.auth0.com/js/change-password-1.5.min.js

Reset page

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

  • Revert to the last saved template by clicking Reset to Last.

  • Revert to the default template provided by Auth0 by clicking Reset to Default.

Learn more