Bug (Authenticator): Missing support for SELECT_MFA_TYPE challenge

[PritamDutt]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create React App

What browsers are you seeing the problem on?

No response

Please describe your bug.

With Cognito User MFA configuration set to Choose preferred delivery method Authenticator Crashes

Ref: User Setting in Cognito

Ref: Error on Chrome Console

Ref: UI Screen when crash happens

What's the expected behaviour?

User should be presented with available MFA options and pick his/her choice

Help us reproduce the bug!

• Install amplify
• Create project using React-UI
• Create User without providing phone
• Configure TOTP MFA
• Update user attributes to include phone, and verify it
• Change MFA Configuration to Choose preferred delivery method on Cognito Console
• Try authenticating user

Code Snippet

// Put your code below this line.

Additional information and screenshots

No response

[0618]

Hi @PritamDutt If the user didn't provide a Phone number, the SMS MFA methods should be disabled as the following screenshot.

Could you provide more details on how to reproduce the error?

[PritamDutt]

@0618 I am talking about a case where user has provided both SMS, and has configured TOTP as can be seen in the screenshot (shared by me).

This can be achieved with following steps (as shared above)

1. Create User without providing phone
2. Configure TOTP MFA - You will be automatically prompted for it, once the UserPool is set to Require MFA
3. Update user attributes to include phone, and verify it - I used AWS Cognito Console for this
4. Change MFA Configuration to select Choose preferred delivery method using AWS Cognito Console

With above done, please try to login using amplify-ui based react app.

To add more details to the context, please see the flow below. You would notice that screen displayed on stage 2 never appears when using AmplifyUI.

Please do let me know, if you would need more information.

[0618]

Thanks for the detailed step. I just reproduced the error.

It might be a bug, but needs more investigation.

[reesscot]

Hi @PritamDutt, This MFA configuration is not currently supported in the Authenticator UI, so we are marking this as a feature request.

However, it isn't expected to throw an error, so we are working on a bug fix to handle this scenario more gracefully in the meantime. This bug fix will not include the feature to choose a MFA method at this time.

[PritamDutt]

Hi @reesscot,

This functionality is critical for a project I am working on, any tentative timelines that you can suggest. If timelines cannot be defined, would you be kind to guide me with suitable resources / steps that I can take to achieve this via some kind of hooks may be?

Thanks

[0618]

Hey @PritamDutt !

I'm working on the bug fix to handle this scenario @reesscot mentioned above, but I'm no longer able to reproduce it at this moment.

Could you confirm that you still see the issue?

What I'm seeing is if I select Choose preferred delivery method, the user is always asked for SMS message.

[PritamDutt]

Hi @0618,

I can confirm this is still appearing with following versions of related libraries: "@aws-amplify/ui": "^5.6.1", "@aws-amplify/ui-react": "^4.6.1", "aws-amplify": "^5.2.0",

To double check ensure that ChallengeName is SELECT_MFA_TYPE in response to AWSCognitoIdentityProviderService.RespondToAuthChallenge on Cognito IDP

Let me know if you need more information.

[0618]

Just revisited this issue and figured out why I was not able to reproduce it. It was because I didn't setup the TOTP MFA right after creating the account.

Also, I don't have to modify MFA methods to Choose preferred delivery method to reproduce the issue.

So here're the updated steps:

1. Create User without providing phone (only, username, password and email)
2. Configure TOTP MFA - You will be automatically prompted for it, once the UserPool is set to Require MFA
3. Add a phone number to the user and mark it as verified
4. Log in again to reproduce the issue

There's a detailed note on this https://github.com/aws-amplify/amplify-js/issues/4646#issuecomment-1462908573

[github-julien-pie]

Hi there 👋 I can reproduce the same issue. Here is my config:

"@aws-amplify/ui-react": "^4.6.2",
"aws-amplify": "^5.2.2",

I would be more than happy if this feature was supported by the React component. Are you working on it? Any ETA? 😋

[0618]

Hello @PritamDutt @github-julien-pie , Thanks for reporting this issue.

SELECT_MFA_TYPE is not supported by Amplify UI so far (@aws-amplify/ui@5.6.4, @aws-amplify/ui-react@4.6.4), so please make sure that there's an MFA preference set in Cognito.

There's no ETA at this moment.

[hanoj-budime]

Hi all,

Worked for me

if (user?.challengeName === 'SELECT_MFA_TYPE') {
      // You need to get the MFA method (SMS or TOTP) from user
      let mfaType = "SMS_MFA" // let's say selected this MFA method     
      user.sendMFASelectionAnswer(mfaType, {
        onFailure: (err) => {
          console.error(err);
        },
        mfaRequired: (challengeName, parameters) => {
          // Auth.confirmSignIn with SMS code
        },
        totpRequired: (challengeName, parameters) => {
          // Auth.confirmSignIn with TOTP code
        },
      }); // this send SMS code to user.
    } 

versions

"@aws-amplify/ui-react": "^5.1.1",
"aws-amplify": "^5.3.10",

[thaddmt]

Just to update that we now have a plan to add support for choosing MFA delivery method but do not have an estimated delivery date at this time.

[nirmana]

This issue can also be reproduced as follows:

1. Create a user pool with MFA set to "required" and enable both SMS and TOTP.
2. Create a new user using the AdminCreateUsermethod without a mobile number.
3. Log in with the temporary password using the Amplify Authenticator.
4. Set up a new password.
5. After setting up the password, only the TOTP setup option is shown—no option to set up SMS OTP by providing a mobile number

Behaviour is the same for React & Angular. However, the hosted UI allows you to select either SMS or TOTP setup.

Hi @thaddmt Is the issue mentioned above related to the same problem? Also, is there any way I can assist in speeding up the delivery process?