Authenticator missing MFA Code Type on Sign Up with Email Confirmation [Angular]

[HarrisonPace]

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?

Angular

Which UI component?

Authenticator

How is your app built?

Webpack 5

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

When signing up in Amplify using the Authenticator UI (Angular), the UI displays Code * when requesting the SMS code.

It is not evident what code the UI is expecting (SMS/TOTP, etc.).

What's the expected behaviour?

It should display something equivalent Please enter the code sent to you via SMS:.

Help us reproduce the bug!

Currently my sign up process both verifies the Email Address and requires a SMS code for MFA.

When signing up the Email Confirmation loads as expected:

The SMS Confirmation does not.

Code Snippet

      <amplify-authenticator [formFields]="formFields" initialState="signIn" [signUpAttributes]="['name', 'phone_number']" [hideSignUp]="false">
        <ng-template amplifySlot="header">
          <div style="padding: var(--amplify-space-large); text-align: center">
            <img
              class="amplify-image"
              alt="Logo"
              src="assets/images/branding.png"
            />
          </div>
        </ng-template>
        <ng-template amplifySlot="authenticated" let-user="user" let-signOut="signOut">
          <!--<button (click)="signOut()">Sign Out</button>-->
          <p>Logging in...</p>
        </ng-template>
        <ng-template amplifySlot="footer">
          <div style="padding: var(--amplify-space-large); text-align: center">
            <p class="amplify-text" style="color: var(--amplify-colors-neutral-80)">
              Footer Text
            </p>
          </div>
        </ng-template>
      </amplify-authenticator>

Console log output

No response

Additional information and screenshots

No response

[calebpollman]

@thehaxxa Thanks for raising this. To aid in reproduction, can you please share your amplify configuration file here (with all sensitive data removed)?

[HarrisonPace]

@thehaxxa Thanks for raising this. To aid in reproduction, can you please share your amplify configuration file here (with all sensitive data removed)?

@calebpollman See below:

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "ap-southeast-2",
    "aws_cloud_logic_custom": [
        {
            "name": "AdminQueries",
            "endpoint": "[OMITTED]",
            "region": "ap-southeast-2"
        }
    ],
    "aws_cognito_region": "ap-southeast-2",
    "aws_user_pools_id": "[OMITTED]",
    "aws_user_pools_web_client_id": "[OMITTED]",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "EMAIL",
        "PHONE_NUMBER"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL",
        "FAMILY_NAME",
        "GIVEN_NAME",
        "PHONE_NUMBER"
    ],
    "aws_cognito_mfa_configuration": "ON",
    "aws_cognito_mfa_types": [
        "SMS",
        "TOTP"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ]
};

export default awsmobile;

[calebpollman]

@HarrisonPace This has been fixed in the latest release of @aws-amplify/ui-angular (5.0.12). Can you upgrade your project and let us know if you are still encountering the issue?

[reesscot]

Closing out as this has been fixed.