Where can I find docs about Auth0ChangePassword

Help
,
1

I want to change the language of the “Reset your password” box. I cannot find configuration options for Auth0ChangePassword.
Parameters like “language” and “locale” does not work.

1 Like
2

The Auth0ChangePassword control is used as past of the reset password hosted page (https://auth0.com/docs/hosted-pages/password-reset) and to my knowledge there isn’t a specific documentation page about its available options. However, if you try to customize the reset password page through your Dashboard you’ll notice that the available options to customize this control are provided within comments in the default template used for this hosted page.

More specifically, to customize the language you would use the sub-keys of the dict object to provide each individual translation. At this moment, there isn’t a single parameter like language that can be used to switch to another language; you have to provide the individual translation for the keys in question.

For example:

new Auth0ChangePassword({
    // other options
    dict: {
        passwordPlaceholder: "your new password",
        title: "Change Password",
        // other translations; see the default template for available keys
    }
});
1 Like
3

Yeah, that was what I was afraid of… Im not sure how to provide a multi-language experience for my users with SSO. Can I somehow control the reset password email/link myself?

4

A first step is to detect the language from the user agent and use it if available. IIRC this may even be available as a {{lang}} placeholder you could use in your customized page. Another option is based on the email retrieve the language from a custom service that know the user preferred language based on email. The third option would be to only provide custom links to the user that contains a language embedded in the URL itself. You can create reset password tickets using Management API, but if you use Lock which handles this for you you loose the ability to modify the URL.

6

@Nyholm if you were to use the custom variables available to the template Customize Password Reset Page

You could put a multi-lang experience together like the following

<script>
    var dictionaryLocale = {
      en: {
        passwordPlaceholder: 'your new password'
      },
      es: {
        passwordPlaceholder: 'Tu nueva contraseña'
      }
    };

    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: dictionaryLocale["{{lang}}"]
    });
  </script>
1 Like