Customize Password Reset Page

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.

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.

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.

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.

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

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

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.5. Use this link to call the latest version, including future minor version updates:

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

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.

• Customize Classic Universal Login Pages
• Customize MFA with Classic Universal Login
• Check Error Messages
• Self Change Password Errors