Localize custom database error messages with universal login?

Help
,
1

Is there a way to localize the messages displayed when errors occur in custom database scripts? I’m thinking specifically of the login and change password screens and translating messages that come back with WrongUsernameOrPasswordError or other error types. I don’t see anything in the documentation.

2

It depends on which error you are throwing from the Custom Database Login script.

 const errors = {
    UNAUTHORIZED: "unauthorized_error",
    INVALID_CREDENTIALS: "invalid_user_password"
  };

return callback(new UnauthorizedError(errors.UNAUTHORIZED));

callback(new WrongUsernameOrPasswordError(email),errors.INVALID_CREDENTIALS);

For both the above errors, the Login widget will display the error message between the Password field and the Login button.

For ‘invalid_user_password’, the localized message will come from the Universal Login > Advanced Options > Custom Text > ‘login’ prompt > ‘wrong-email-credentials’ label.

For ‘unauthorized_error’, we have to supply the localized text. Instead of doing this from within the Login script, I do it from inside the Login Page template.


                 const errorElement = document.getElementById("error-element-password");
                 if (errorElement) {

                  const innerTextKey = errorElement.innerText;
                  const replaceText = translationsJSONobject[browserLanguage][innerTextKey];
                  if(debug) {
                    console.log("innerTextKey = "+innerTextKey);
                    console.log("replaceText  = "+replaceText);
                  }
                  if(replaceText) {
                    errorElement.innerText = replaceText;
                  }
                }

Note: The translationsJSONObject can be initiated from a remote JSON file that has the translations for the key ‘unauthorized_error’. For example, it would have the format:

{
    "zh-CN": {
      "unauthorized_error": "您无权访问此应用程序。"
    },
    "en": {
      "unauthorized_error": "You are not authorised to access this application."
    },
    "fr": {
      "unauthorized_error": "Vous n'êtes pas autorisé à accéder à cette application."
    }
}

The downside of this approach is that you have to rely on the Auth0 Login Page template DOM elements.

1 Like