How to Filter or Lock MFA Mobile Number Country Codes in New Universal Login

Problem Statement:

We have a requirement to only support Australian mobile numbers for MFA. We are using New Universal Login for the MFA enrollment process. Is there a way to remove country codes from the country code selector and/or to make the selector disabled so that it cannot be changed?

Solution:

The new universal MFA widget doesn’t support this use case. We have a backlog item to implement this feature.

Until we support this use case with the new universal MFA page, you try the following workaround solution:

1- The hosted page can be implemented in two different ways.

a-) As the first option, you may implement a fully custom MFA page. We have a sample code on the following link as a starting point for a fully custom MFA page:

b-) Alternatively, with much less effort, you may implement the same idea with our default classic MFA Widget (MFA Widget Theme Options) by setting the default country to Australia. E.g.

defaultLocation : ['Australia', 'AU', '+61'],

And then hiding the country selection widget with the following workaround:

async function hideCountry() {
  if (document.getElementsByClassName('auth0-lock-input-location')[0]) {
    document.getElementsByClassName('auth0-lock-input-location')[0].style.display = 'none'
    clearInterval(hideCountryLoop);
  }
}
var hideCountryLoop = setInterval(hideCountry, 100);

As a side note auth0-lock-input-location class isn’t considered a public API, and the name may change in future versions, so you need to test the workaround when you update the widget version. Also, it may be better to use the full version, including the patch release. Today, the widget version is on 1.8.6, with the patch version being 6.

https://cdn.auth0.com/js/mfa-widget/mfa-widget-1.8.6.min.js

Here is a sample Gist code implementing the above steps.

2- Once the widget has the required customization, using the SMS action, we need to check if the country code is correct as we can’t only rely on the front-end checks.

In the SMS action for MFA, the event.recipient attribute has the mobile phone number with the area code. If the country code isn’t correct, the SMS action script can skip calling the SMS service.