Show custom error message on passwordless Auth0 page

Question

I would like to only allow certain phone numbers when patients sign up to my application through a passwordless Auth0 page.

For this I added a custom Auth0 action to the Pre User Registration flow.

My custom action checks the phone prefix:

/**
* Handler that will be called during the execution of a PreUserRegistration flow.
*
* @param {Event} event - Details about the context and user that is attempting to register.
* @param {PreUserRegistrationAPI} api - Interface whose methods can be used to change the behavior of the signup.
*/
exports.onExecutePreUserRegistration = async (event, api) => {
  if (!isAllowedPhoneNumber(event.user.phone_number)) {
    api.access.deny('my_custom_identifier', 'My Custom Message');
  }
};

const allowedPhonePrefixes = ["+43", "+32", "+420", "+45"];

const isAllowedPhoneNumber = (phoneNumber) =>
  allowedPhonePrefixes.some((prefix) => phoneNumber.startsWith(prefix));

However, "My Custom Message" doesn't show up when I try a phone number outside those allowed. Instead, I see the default "We're sorry, something went wrong".

I then tried to edit the HTML code of my custom Auth0 login page adding this:

languageDictionary = {
  ...languageDictionary,
  passwordless: {
    "lock.fallback": "My Custom Message",
    "no_signups_from_outside_schengen_area": "My Custom Message 2",
  }
};

So the HTML code of my page now looks like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with Auth0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

  <!--[if IE 8]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
  <![endif]-->

  <!--[if lte IE 9]>
  <script src="https://cdn.auth0.com/js/base64.js"></script>
  <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/lock/11.30/lock.min.js"></script>
  <script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;

    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    var loginHint = config.extraParams.login_hint;

      languageDictionary = {
        ...languageDictionary,
        passwordless: {
          "lock.fallback": "My Custom Message",
          "no_signups_from_outside_schengen_area": "My Custom Message 2",
        }
      };

    var lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: config.authorizationServer.issuer
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageBaseUrl: config.languageBaseUrl,
      languageDictionary: languageDictionary,
      theme: {
        logo:            'https://link-to-my-logo.something',
        primaryColor:    '#429db3'
      },
      closable: false,
      showTerms: false
    });

    lock.show();
  </script>
</body>
</html>

... but still neither "My Custom Message" nor "My Custom Message 2" show up. I still see "We're sorry, something went wrong".

How can I show a custom error message to users who enter a phone number from outside the list of allowed countries?

Note: I am pretty sure that the custom Auth0 action works, as I am able to prevent sign-ups for certain phone prefixes. What is probably wrong is the way I'm changing the code of the HTML page shown above, I suppose.

Answer 1

There is a partial solution that allows to show a custom message for all extensibility errors. (I haven't found a way to show different custom messages for different extensibility errors.)

This partial solution involves changing the structure in which the languageDictorionary variable above is structured:

languageDictionary = {
  ...languageDictionary,
  error: {
    passwordless: {
      extensibility_error: "My Custom Message for all extensibility errors"
    }
  }
};

This way, any call to api.access.deny in the Pre User Registration flow will show "My Custom Message for all extensibility errors", no matter what identifier or message is passed to api.access.deny .

Show custom error message on passwordless Auth0 page

Question

1 answers

solution1
0 2022-09-10 08:40:47

Show custom error message on passwordless Auth0 page

Question

1 answers

solution1 0 2022-09-10 08:40:47

solution1
0 2022-09-10 08:40:47