Add enable/disable TOTP/MFA

  1. Under the Sign-in experience tab in the AWS Console, scroll down to Multi-factor authentication and select Edit. Make sure that Optional MFA is enabled on the user pool and set Authenticator apps as the MFA methods.

  1. Add the HTML layout for MFA configuration
<div id="managemfa" class="w3-container w3-padding-large w3-grey tab" style="display:none">
    <button type="submit" class="w3-button w3-black w3-margin-bottom" onclick="enableMFA()">Enable MFA</button>
    <button type="submit" class="w3-button w3-black w3-margin-bottom" onclick="disableMFA()">Disable MFA</button>
    <div id="qrcode"></div>
    <button type="submit" class="w3-button w3-black w3-margin-bottom" onclick="continueMFA()">Verify</button> 
</div>
  1. Add the functions below to allow enable/disable MFA
/**
 * Enable MFA
 *
 * Important Note: Make sure TOTP/MFA is enabled in the user pool
 */
function enableMFA(){

  console.log("--------Start TOTP MFA Setup");
  cognitoUser.associateSoftwareToken({
    onSuccess: function(result) {
      console.log(result);
    },
    associateSecretCode: function(secretCode) {
      console.log("MFASecretCode:"+secretCode);

      var canvas = document.getElementById('qrcanvas');
      var tokenObj = cognitoUser.signInUserSession.idToken.payload;
      var totpUri = "otpauth://totp/MFA:"+ tokenObj["email"] +"?secret="+ secretCode +"&issuer=CognitoJSPOC";
      console.log(totpUri);

      var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: totpUri,
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
      });
    },

    onFailure: function(err) {
      console.log(err);
    }
  });
  }
    
    
function continueMFA(){

      var totpCode = prompt("Enter software token code");
      cognitoUser.verifySoftwareToken(totpCode, 'SoftwareToken',{
        onSuccess: function(result) {
          console.log(result);

          totpMfaSettings = {
            PreferredMfa : true,
            Enabled : true
          };
          cognitoUser.setUserMfaPreference(null, totpMfaSettings, function(err, result) {
            if (err) {
              alert(err);
            }
            console.log('setUserMfaPreference call result ' + result)
          });
        },

        onFailure: function(err) {
          console.log(err);
        }
      });
}

/**
 * Disable MFA
 */
function disableMFA(){

  var mfaSettings = {
    PreferredMfa : false,
    Enabled : false
  };

  cognitoUser.setUserMfaPreference(mfaSettings, mfaSettings, function(err, result) {
    if (err) {
      console.error(err);
    }
    console.log('clear MFA call result ' + result);
  });
}

To test enable/disable MFA you need to sign-in first then navigate to Manage MFA and click Enable MFA button.

This will start the flow and render QR code for you to scan in authenticator app. Select Verify to enter your security code from your authenticator app. To tst, sign out and back in. You should be prompted for security code.