How do I get the Amazon Cognito hosted UI to prompt for TOTP?

Question

I am assuming that I would be prompted based off of the documentation, which specifically states:

If your app is using the Amazon Cognito hosted UI to sign in users, the UI shows a second page for your user to enter the TOTP password after they submit their user name and password.

Under the "MFA and Verifications" section of the user pool, I have checked the following:

• Do you want to enable Multi-Factor Authentication (MFA)?
  • Optional
• Which second factors do you want to enable?
  • Time-based One-time Password

I have added a single test user that is verified.

From there, I followed the documentation to both Associate the TOTP Token and Verify the TOTP Token, confirming I got the secret code in the response for calling AssociateSoftwareToken and a 'SUCCESS' in the response for VerifySoftwareToken.

At this point, I believe when I use the hosted UI sign-in page, I should be prompted to enter a one-time-password after submitting my username/password, and upon successful verification of that, be redirected to the signin callback URL specfied in my app client.

However, I am being redirected immediately after submitting the username and password and there is no prompt for entering a TOTP.

Answer 1

I was able to get this to work by explicitly calling SetUserMFAPreference after setting up TOTP for the test account. My assumption that associating and verifying TOTP automatically changed Cognito's behavior with respect to the authentication flow of the user was mistaken. It also required me to tell Cognito to enable and use the TOTP for the user.

The crux of my original confusion was that generating and associating a software token to generate OTPs for a user did not enable it for the user. A call to SetUserMFAPreference to enable it for the user was also required. Once that was done, it worked as expected. For instance, to enable software MFA and set it as preferred:

{
   "AccessToken": "xyz123",
   "SoftwareTokenMfaSettings": { 
      "Enabled": true,
      "PreferredMfa": true
   }
}

There is also an admin version of the API call that can achieve the same result.

Answer 2

After messing around with this problem, I reckon that AWS just gave up on this and moved towards using Amplify.

Use the Amplify libraries and their Amplify UI components.

The Auth component will prompt the user at first login with a QR code.

https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components