Hi all,
I’m trying to implement a custom MFA settings page and have encountered some logical challenges that I’d appreciate guidance on.
Background
Our application uses Auth0’s passwordless authentication for user login (via the @auth0/auth0-react library’s loginWithRedirect and Universal Login). Now I want to add a custom page where users can enroll and manage their MFA methods.
The Challenge
According to the Auth0 documentation, enrolling MFA requires first obtaining an MFA token, then using that token to call the /mfa/associate endpoint.
The standard method for obtaining an MFA token is through the Resource Owner Password Flow (ROPG), which involves calling the /oauth/token endpoint with a username and password. However, since we’re using passwordless login, we can’t use this approach to get an MFA token.
Solution I’ve Tried
I’ve attempted to obtain an MFA token using:
loginWithRedirect({
authorizationParams: {
audience: "https://AUTH0_DOMAIN/mfa/",
scope: "read:authenticators remove:authenticators enroll",
}
})
And then using:
getAccessTokenSilently({
audience: "https://AUTH0_DOMAIN/mfa/",
scope: "read:authenticators remove:authenticators enroll",
})
The Issue
When I call the loginWithRedirect method above, Auth0 automatically forces the user to complete the MFA registration flow. This contradicts my intention because:
-
I originally wanted users to select and enroll MFA methods through our custom interface
-
I need to first obtain an MFA token, then call the /mfa/associate endpoint to enroll MFA
- But during the process of obtaining the MFA token, the user is already forced to complete MFA enrollment flow
My Questions
-
When using passwordless authentication, is there another way to obtain an MFA token without forcing users to immediately complete MFA setup?
-
Is there a better approach to implement a custom MFA settings page that allows users to choose when and which method to add for MFA?
I look forward to your suggestions and guidance. Thank you!
