Amplify and React : Code mismatch and fail enable Software Token MFA

Question

I have a Cognito user pool that has MFA set to Optional with TOTP only.

I'm trying to set up a page that enables MultiFactorAuthentication for the user for the first time following this AWS Documentation.

As my component mounts, I generate a QR code and show it on screen using qrcode.react

  useEffect(() => {
Auth.currentAuthenticatedUser({ bypassCache: true }).then(user => {
  setUser(user);
  Auth.setupTOTP(user).then(code => {
    const authCode = "otpauth://totp/AWSCognito:" + user.username + "?secret=" + code + "&issuer=ivt";
    setQrCode(authCode);
  });
});
}, []);

Then, when the user puts the input, I verify it and call the setPrefferredMFA. Now here, I checked if "input" is correctly passed and no issues there.

const setupMFA = input => {
Auth.setupTOTP(user).then(() => {
  Auth.verifyTotpToken(user, input)
    .then(() => {
      Auth.setPreferredMFA(user, "TOTP").then(() => {
        props.setShowModal(false);
      });
    })
    .catch(e => {
      // Token is not verified
    });
});
};

I'm still getting Code mismatch and fail enable Software Token MFA error and failing to set a MFA to the user.

Answer 1

I solved it.

Auth.verifyTotpToken() is not supposed to be in the .then() block of setupTOTP.

Pfft. Removing the Auth.setupTOTP in the setupMFA function made it work.