Customize Classic Password Reset Page

If you are using Classic Login, the password reset page provides your 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

• Ensuring the user's password meets your defined requirements

• Automatically redirecting the user after they reset their password

To create a consistently branded experience throughout the login flow, you can customize how the password reset prompt displays to users. You can also update the password reset page to display certain personal information if appropriate.

The password reset page is enabled for all Auth0 users by default and does not require customization. However, you can enable advanced customization if you wish to update the branding and other elements of the password reset page.

To enable advanced customization from the Auth0 Dashboard:

1. Navigate to Branding > Universal Login > Password Reset tab.

2. Enable the Customize Password Reset Page toggle.

In the code editor below the toggle, you can now directly modify the page template.

After enabling customization for the password reset page, you can use the built-in code editor to modify its HTML, style the page using CSS, and change the JavaScript used to retrieve and display custom variables. Ensure you select Save Changes below the code editor to save your updates.

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 prompt. If Auth0 can't resolve the URL, it'll display the default image.

You can use the following custom variables 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 your custom database script returns a custom error, you can map an error description using the dict property:

new Auth0ChangePassword({
  // ...other options
  dict: {
    yourCustomError: 'This is a custom error message'
  }
});

function changePassword(email, newPassword, callback) {
  callback(new ValidationError('yourCustomError'));
}

If you do not enable customization for the password reset page, Auth0 will handle updates necessary for the script, including changes to the version number of the included password reset prompt.

When you enable customization for the password reset page, you assume responsibility for updating and maintaining the script. This includes updating the version number for the password reset prompt. With customization enabled, Auth0 cannot update your script automatically without potentially interfering with the changes you've made.

The current version of the password reset prompt 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

To revert the password reset page to an earlier design, you can:

• 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 Login Pages
• Customize MFA for Classic Login
• Check Error Messages
• Self Change Password Errors