<AmplifyTotpSetup> component doesn't render QR code

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

  System:
    OS: macOS 11.4
    CPU: (4) x64 Intel(R) Core(TM) i7-4558U CPU @ 2.80GHz
    Memory: 1.76 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/n/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 91.1.26.74
    Chrome: 91.0.4472.114
    Chrome Canary: 93.0.4571.0
    Edge: 91.0.864.37
    Firefox: 89.0
    Safari: 14.1.1
  npmPackages:
    @aws-amplify/ui-react: ^1.2.4 => 1.2.4 
    @testing-library/jest-dom: ^5.11.4 => 5.14.1 
    @testing-library/react: ^11.1.0 => 11.2.7 
    @testing-library/user-event: ^12.1.10 => 12.8.3 
    @types/jest: ^26.0.15 => 26.0.23 
    @types/node: ^12.0.0 => 12.20.15 
    @types/react: ^17.0.0 => 17.0.13 
    @types/react-dom: ^17.0.0 => 17.0.8 
    aws-amplify: ^4.1.2 => 4.1.2 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 4.0.3 => 4.0.3 
    typescript: ^4.1.2 => 4.3.5 
    web-vitals: ^1.0.1 => 1.1.2 
  npmGlobalPackages:
    @aws-amplify/cli: 4.37.0
    @collaborne/generator-carrot-service: 1.3.5
    @collaborne/generator-nodejs-microservice: 1.3.13
    @collaborne/generator-polaris-service: 2.3.2
    @collaborne/polaris-tenant-backup-service: 1.9.18
    @collaborne/polaris-token-service-tools: 1.2.0-0
    amplify: 0.0.11
    bower: 1.8.4
    browser-sync: 2.26.7
    cordova: 8.1.2
    cwtail: 1.3.0
    deploy: 1.0.3
    eslint: 4.19.1
    firebase-tools: 7.11.0
    gulp: 4.0.2
    ios-deploy: 1.9.4
    karma: 5.0.2
    miro-templating: 1.1.0
    mocha: 8.0.1
    n: 6.5.1
    near-cli: 2.0.1
    npm-check-updates: 2.14.2
    npm: 6.14.11
    parcel: 2.0.0-alpha.3.2
    plugman: 2.0.0
    pnpm: 5.5.2
    polymer-cli: 1.7.7
    postcss-cli: 7.1.1
    rollup: 1.17.0
    serve: 11.3.2
    ts-node: 8.10.2
    tslint: 5.11.0
    typescript: 4.1.2
    wasm-opt: 1.2.0
    yarn: 1.7.0
    yo: 3.1.1

Describe the bug

The <AmplifyTotpSetup> component doesn’t show the QR code.

Expected behavior

The QR is shown as part of the <AmplifyTotpSetup> component.

Reproduction steps

We created a minimal CRA app that allows to login and setup TOTP:

1. Create Cognito User Pool with MFA as optional and TOTP enabled
2. Install minimal reproduction CRA repo: https://github.com/ronnyroeller/amplify-totp
3. Adjust userPoolId/userPoolWebClientId for Auth.configure in App.tsx
4. Start CRA: yarn start
5. Create Cognito account
6. Try to set TOTP

Yet, the component doesn’t show the QR code (see screenshot attached). When the user sends a random security token via the app, the Cognito responds with:

{"__type":"SoftwareTokenMFANotFoundException","message":"Software Token MFA does not exist for the user."}

The documentation indicates that this exception means that TOTP-based MFA is not enabled for the user pool - yet, it’s enabled as “optional” in the User Pool.

Code Snippet

Repo with minimal reproduction case: https://github.com/ronnyroeller/amplify-totp

Log output

There are no error/log messages.

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

We also tried to create the SecretCode via the aws-cli, which does work:

$ aws cognito-idp associate-software-token --access-token XXX
{
    "SecretCode": "XXX"
}

[ronnyroeller]

That’s excellent news, William. Thanks for making this happen!

[moghaddam01]

Hi @wlee221, I’m trying to upgrade Amplify UI to v2 and since AmplifyTotpSetup has been removed from ‘@aws-amplify/ui-react’ package, the question is what is the replacement for that in v2?