Problem Statement:
When using the 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 it cannot be changed?
Solution:
While the New Universal Login MFA widget does not currently support this use case, here is how this can be accomplished with the Classic Universal Login:
- The hosted page can be implemented in two different ways.
- Implement a fully custom MFA page. Here is sample code to use as a starting point for a fully custom MFA page:
- Alternatively, the same idea can be implemented with the default Classic MFA Widget by setting the default country. Here is an example setting the default country to Australia:
- defaultLocation : [‘Australia’, ‘AU’, ‘+61’],
Then hide the country selection widget with the following workaround:
<em>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);</em>
NOTE: auth0-lock-input-location class is not considered a public API, and the name may change in future versions, so test the workaround after updating 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:
- Once the widget has the required customization, use the SMS Action to check if the country code is correct, to not 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. Refer to Send Phone Message Flow.