Auth0 ACUL JS mfaSmsChallenge.pickSms Not Intended to Edit Phone Number During Enrollment
Last Updated:
Overview
When using the Auth0 Custom Universal Login (ACUL) JavaScript SDK (@auth0/auth0-acul-js), calling await mfaSmsChallenge.pickSms(); during the Multi-Factor Authentication (MFA) SMS enrollment verification flow does not route the user to the phone number edit screen and instead re-renders the enrollment verification screen. This is expected behavior and occurs because the pick-sms action functions only during the authentication flow, not the enrollment flow.
To let the user change their phone number during enrollment, use window.location.assign(mfaSmsChallenge.screen.links.editIdentifier); to return to the enrollment screen.
Applies To
- Auth0
- Auth0 Custom Universal Login (ACUL)
@auth0/auth0-acul-jsSDK- Multi-Factor Authentication (MFA) SMS Enrollment
Cause
The /u/mfa-sms-enrollment-verify (enrollment flow) and /u/mfa-sms-challenge (authentication flow) prompts share the same rendered template but behave differently. Auth0 implements the pick-sms action only on the mfa-sms-challenge prompt to route users with multiple enrolled phones to the prompt-mfa-sms-list screen. The mfa-sms-enrollment-verify prompt does not handle pick-sms. Its recognized actions are go-back, pick-authenticator, resend-code, and switch-to-voice. Any other action falls through to One-Time Password (OTP) code validation. Consequently, a pick-sms POST request lacks a code, fails validation, and causes Auth0 to re-render the same enrollment verification page.
Solution
How does the application route to the phone number edit screen during Auth0 SMS enrollment?
To change the phone number during the enrollment verification screen, use the Edit link to navigate back to the /u/mfa-sms-enrollment prompt. In the ACUL SDK, this screen exposes the link as screen.links.edit_identifier.
Update the application code to replace the failing function with a navigation assignment to the edit identifier link.
- Locate the code block attempting to use
await mfaSmsChallenge.pickSms();. - Replace the
pickSms()call with a navigation assignment tomfaSmsChallenge.screen.links.editIdentifier. - Implement the following code snippet:
window.location.assign(mfaSmsChallenge.screen.links.editIdentifier);
NOTE: Auth0 intends the pickSms() function only for the authentication challenge screen (mfa-sms-challenge), where a user with multiple enrolled phones can switch between them. It does not function in the enrollment flow.