React Application login page shows MFA loops

Knowledge Articles
, , , ,
1

Problem statement

I’m experiencing an issue where I’ve enabled the MFA for my React application.
The behavior is the following:

  1. I enter my email and password
  2. I get redirected to my Authenticator app via a QR code
  3. I enter the code
  4. I’m successfully taken to my React application
  5. However, after that, I’m automatically redirected to mfa-otp-challenge page where it asks me to Verify my identity one more time.
  6. When I enter the code again, I’m being redirected to the mfa-otp-challenge again. And it’s endlessly redirecting me to that mfa-otp-challenge page
    Anything you would advise?

Cause

But the main problem is your application redirects a user to the /authorize endpoint again after the code has already been received. Can you please check the part of the code where you handle the redirect callback?

Solution

Also, as a workaround, you can try disabling the MFA in the tenant configuration (set to Never) and enable the Rule with the following script, which will trigger the MFA once per session:

function requireMfaOncePerSession(user, context, callback) {
  let authMethods = [];
  if (context.authentication && Array.isArray(context.authentication.methods)) {
    authMethods = context.authentication.methods;
  }

  const completedMfa = !!authMethods.find((method) => method.name === 'mfa');

  if (completedMfa) {
    return callback(null, user, context);
  }

  context.multifactor = {
    provider: 'any',
    allowRememberBrowser: false
  };

  callback(null, user, context);
}