Resetting a password?

This page describes how you can customize a Classic Login password reset page.If you need assistance resetting a password, review the following documentation instead:
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.

​
Enable password reset page customization

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

​
Edit password reset page

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.

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

​
Custom variables

You can use the following custom variables to display personalized information on the password reset page:
VariableDescription
emailThe email address of the user requesting the password change
ticketThe ticket representing the given password reset request
csrf_tokenToken used to prevent CSRF activity
tenant.nameThe name associated with your Auth0 tenant
tenant.friendly_nameThe name displayed for your Auth0 tenant
tenant.picture_urlThe URL leading to the logo representing you in Auth0
tenant.support_emailThe support email address for your company displayed to your Auth0 users
tenant.support_urlThe support URL for your company displayed to your Auth0 users
langThe user’s language
password_policyThe 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_optionsObject containing settings for the password complexity requirements
min_lengthThe 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).

​
Custom error messages

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'));
}

​
Update password reset prompt

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

​
Revert changes

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.

​
Learn more