Custom MFA Flow with Google Authenticator - Avoiding Universal Login Redirect

Get Help
,
1

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

  1. User logs in with username/password
  2. Check if MFA is required
  3. If required and not enrolled:
  • Show our custom QR code enrollment UI
  • Use Auth0 APIs to complete enrollment
  1. If required and enrolled:
  • Show our custom OTP input UI
  • Verify OTP using Auth0 APIs
  1. 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.