Unhandled internal exception on signup: "Unexpected challengeName encountered in ConfirmSignIn: undefined"

[EricDAllen]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• 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?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

Internal crash when looking up a string to render on the ConfirmSignIn dialog.

      <Authenticator
        services={services}
        formFields={formFields}
        />

My formFields just defines one custom signup field, and my services only defines a validateCustomSignUp method. Otherwise, I'm using a completely out-of-the-box authenticator for sign in and sign up. The email field is used for the Cognito username.

1. After a successful Sign Up creates my Cognito user, I receive an email with a confirmation code.
2. I supply that code successfully, and the email is marked on the Cognito user as having been confirmed.
3. My phone then pings me with an SMS confirmation code, but the Authenticator on screen crashes and logs this unhandled exception to the console:

Uncaught Error: Unexpected challengeName encountered in ConfirmSignIn: undefined
at getChallengeText (textUtil.mjs:13:1)
at Header (ConfirmSignIn.mjs:34:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)

What's the expected behaviour?

I have a few expectations:

1. This unhandled exception stems from Amplify not being able to look up an informational string to put into the Header of the SMS confirmation screen (specifically the getChallengeText method of the ConfirmSignIn component). That shouldn't be fatal, here. The defaultTexts file defines the two specific options AND a generic option that looks like it'd be a good enough fallback to use:
   CONFIRM_SMS: 'Confirm SMS Code',
   CONFIRM_TOTP: 'Confirm TOTP Code',
   CONFIRM: 'Confirm',
   Maybe you could introduce another string that says 'Confirm Code', if you wanted to be even more specific, but I definitely don't need to be seeing a crash, just because you can't look up a specific string.

2. This crash only seems to be happening on the automatic sign in after a sign up. I don't know why the challengeName isn't getting set in the one flow and not the other, but that's ultimately the real underlying bug.

3. This code in ConfirmSignIn is obviously fragile. Perhaps in addition to item 1 above, if the challengeName is undefined, you could skip the call to getChallengeText and use some hard-coded default.

function Header() {
  const { challengeName } = useAuthenticator(({ challengeName }) => [
    challengeName,
  ]);

  return <Heading level={3}>{getChallengeText(challengeName)}</Heading>;
}

Help us reproduce the bug!

Hoping what I've given above is enough detail, but hit me up if you need more.

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

No response

[EricDAllen]

I should have mentioned that bypassing the official header with this code works, but is obviously not ideal:

      <Authenticator
        services={services}
        formFields={formFields}
        components={{ ConfirmSignIn: { Header: () => (<div>Confirm Code</div>) } }}
        />

[calebpollman]

@EricDAllen Will take a look. Can you provide the contents of your amplify configuration (sans any sensitive data) to aid with debugging?

[EricDAllen]

Very much appreciated! Here you go:

{
  "aws_project_region": "us-east-1",
  "aws_cloud_logic_custom": [
    {
      "name": "foo",
      "endpoint": "https://foo.execute-api.us-east-1.amazonaws.com/foo",
      "region": "us-east-1"
    }
  ],
  "aws_cognito_identity_pool_id": "us-east-1:foo",
  "aws_cognito_region": "us-east-1",
  "aws_user_pools_id": "us-east-1_foo",
  "aws_user_pools_web_client_id": "foo",
  "oauth": {},
  "aws_cognito_username_attributes": [
    "EMAIL"
  ],
  "aws_cognito_social_providers": [],
  "aws_cognito_signup_attributes": [
    "EMAIL",
    "NAME",
    "PHONE_NUMBER"
  ],
  "aws_cognito_mfa_configuration": "OPTIONAL",
  "aws_cognito_mfa_types": [
    "SMS"
  ],
  "aws_cognito_password_protection_settings": {
    "passwordPolicyMinLength": 8,
    "passwordPolicyCharacters": []
  },
  "aws_cognito_verification_mechanisms": [
    "EMAIL"
  ],
  "aws_user_files_s3_bucket": "foo",
  "aws_user_files_s3_bucket_region": "us-east-1"
}

[calebpollman]

Thanks for raising the issue @EricDAllen. We've merged a fix (#5068) that will go out in the next release

[EricDAllen]

Wow - impressive turnaround time! Thanks for your help!

[esauerbo]

Hey @EricDAllen the fix has been published, make sure to upgrade to the latest version, @aws-amplify/[email protected] to pull in the change.

[EricDAllen]

Tested locally - works like a champ!
Very much appreciated.