Set the language of the change password widget in the classic universal login experience

Knowledge Articles
, , ,
1

Problem statement

How do we set the language of the change password widget in the classic universal login experience?

Solution

There is no option for setting the language directly. You need to define translations yourself and pass them to the widget using the dict option as explained in this article:

From the default template:

      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 (e.g., "%s" not allowed)",
        //   nonEmpty: "Non-empty password required",
        //   numbers: "Numbers (i.e. 0-9)",
        //   lengthAtLeast: "At least %d characters in length",
        //   lowerCase: "Lower case letters (a-z)",
        //   shouldContain: "Should contain:",
        //   specialCharacters: "Special characters (e.g. !@#$%^&*)",
        //   upperCase: "Upper case letters (A-Z)"
        // },
        // successMessage: "Your password has been reset successfully.",
        // configurationError: "An error ocurred. 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."
      }

You can use the lang custom variable to determine the user’s language and specify the appropriate translations.

Example:

const translations = {
     'en-US': {
        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 (e.g., \"%s\" not allowed)",
           nonEmpty: "Non-empty password required",
           numbers: "Numbers (i.e. 0-9)",
           lengthAtLeast: "At least %d characters in length",
           lowerCase: "Lower case letters (a-z)",
           shouldContain: "Should contain:",
           specialCharacters: "Special characters (e.g. !@#$%^&*)",
           upperCase: "Upper case letters (A-Z)"
        },
        successMessage: "Your password has been reset successfully.",
        configurationError: "An error ocurred. 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."
     }
    }
    const lang = "{{lang}}".split(';')[0]; // e.g., en-US;q=0.5 -> en-US
    const dict = translations.hasOwnProperty(lang) ? translations[lang] : translations['en-US']; // fallback to US if no translations found for language

    new Auth0ChangePassword({
      container:         "change-password-widget-container",                // required
      email:             "{{email | escape}}",                              // 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
      password_complexity_options:  {{password_complexity_options}},        // DO NOT CHANGE THIS
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png';}}",
        primaryColor: "{{tenant.colors.primary | default: '#ea5323'}}"
      },
      dict,
    });