Context
We’re implementing MFA in our React application using Auth0. Our requirements are:
- MFA should be required only for specific users (based on a flag in user metadata)
- Google Authenticator is the only allowed MFA method
- We want to maintain our custom UI for both MFA enrollment and verification
- Using Auth0’s existing authentication flow with auth0-js WebAuth.login
Post login action
exports.onExecutePostLogin = async (event, api) => {
if (event.user.user_metadata?.mfa_required) {
api.multifactor.enable('google-authenticator');
}
};
The Problem
When api.multifactor.enable() is called, it automatically redirects to Auth0’s Universal Login page for MFA enrollment/verification. We want to avoid this redirect and handle the MFA flow within our application using our own UI components.
Questions
- Is there a way to use
api.multifactor.enable()without triggering the Universal Login redirect? - If not, what’s the recommended approach for implementing a custom MFA UI while maintaining Auth0’s security standards?
- Is it possible to use Auth0’s MFA APIs directly while still maintaining the security of the authentication flow?
Our Ideal Flow
- User logs in with username/password
- Check if MFA is required
- If required and not enrolled:
- Show our custom QR code enrollment UI
- Use Auth0 APIs to complete enrollment
- If required and enrolled:
- Show our custom OTP input UI
- Verify OTP using Auth0 APIs
- Complete authentication
Any guidance on achieving this while maintaining security best practices would be greatly appreciated. We’re open to alternative approaches that might better fit Auth0’s architecture.