amplify-ui: Unhandled Authenticator Route - Please open an issue: null

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• 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

Please describe your bug.

When attempting to create a user in an existing Cognito User Pool, I am receiving the error:

'Unhandled Authenicator route – please open an issue: '

And redirected to the login page instead of being presented the appropriate MFA screen

What’s the expected behaviour?

Am expecting to be presented the screen to setup a User’s MFA

Help us reproduce the bug!

To make sure the issue wasn’t with my application, I started a new app with npx create-react-app my-app using node 14.19.0.

Next, I followed the getting started guide here: https://ui.docs.amplify.aws/getting-started/installation?platform=react as well as the Authenticator backend setup guide here: https://docs.amplify.aws/lib/auth/start/q/platform/js/#re-use-existing-authentication-resource.

Next, I simply tried to create a user with the Create Account tab in the Authenticator component after running with npm start. After getting my confirmation code via Email and entering it, it returns to the login screen with the error in the console.

Code Snippet

Here is the package.json I ended up with:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^2.15.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^4.3.19",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And here was my App.jsx:

import logo from './logo.svg';
import './App.css';
import { AmplifyProvider } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import Auth from '@aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';

Amplify.configure({
  Auth: {
    region: 'us-east-1',
    userPoolId: '<my-id>',
    userPoolWebClientId: '<my-other-id>',
    oauth: {
        options: {
            AdvancedSecurityDataCollectionFlag: true,
        },
        redirectSignIn: '<redirect>',
        redirectSignOut: '<redirect>',
        responseType: 'code',
        scope: ['email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
    },
  },
  storage: sessionStorage,
  API: {
      endpoints: [
          {
              name: 'api',
              endpoint: '<my-endpoint>',
              custom_header: async () => {
                  try {
                      const session = await Auth.currentSession();
                      const token = session.getIdToken().getJwtToken();
                      return { Authorization: `Bearer ${token}` };
                  } catch (error) {
                      console.error('User session not present to set jwt token');
                  }
              },
          },
      ],
  },
});




function App() {
  return (
    <AmplifyProvider>
      <Authenticator loginMechanisms={['email']} signUpAttributes={[
          "address",
          "birthdate",
          "email",
          "family_name",
          "gender",
          "given_name",
          "locale",
          "middle_name",
          "name",
          "phone_number",
          "profile",
      ]}>
        {({ signOut, user }) => (
          <main>
            <h1>Hello {user.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </main>
        )}
      </Authenticator>
    </AmplifyProvider>
  );
}

export default App;

Additional information and screenshots

Network tab showed two requests after confirming with the code. All returned 200s:

Confirmation:

payload

{
  "ClientId": "********",
  "ConfirmationCode": "******",
  "Username": "***********@gmail.com",
  "ForceAliasCreation": true
}

response:

{}

Number 2

payload:

{
  "AuthFlow": "USER_SRP_AUTH",
  "ClientId": "******",
  "AuthParameters": {
    "USERNAME": "*****@gmail.com",
    "SRP_A": "******"
  },
  "ClientMetadata": {}
}

Response:

{"ChallengeName":"PASSWORD_VERIFIER","ChallengeParameters":{"SALT":"***","USER_ID_FOR_SRP":"***"}}

Number 3

payload:

{ChallengeName: "PASSWORD_VERIFIER", ClientId: "*********",…}
ChallengeName: "PASSWORD_VERIFIER"
ChallengeResponses: {USERNAME: "***********",…}
PASSWORD_CLAIM_SECRET_BLOCK: "*******"
PASSWORD_CLAIM_SIGNATURE: "**********"
TIMESTAMP: "Mon Apr 11 05:29:42 UTC 2022"
USERNAME: "***********"
ClientId: "************"
ClientMetadata: {}

Response:

{"ChallengeName":"MFA_SETUP","ChallengeParameters":{"MFAS_CAN_SETUP":"[\"SMS_MFA\",\"SOFTWARE_TOKEN_MFA\"]"},"Session":"**********"}

Cognito Pool Configs:

"EnvironmentUserPool": {
            "Type" : "AWS::Cognito::UserPool",
            "Properties" : {                
                "UserPoolName" :  {
                    "Fn::Sub": "asdf-${Environment}-users"
                },
                "UsernameAttributes": [
                    "email"
                ],
                "UsernameConfiguration": {
                    "CaseSensitive": "True"
                },
                "EmailConfiguration": {
                    "EmailSendingAccount" : "DEVELOPER",
                    "From" : "asdf@asdf.org",
                    "SourceArn" : "*****"
                },
                "Policies": {
                    "PasswordPolicy": {
                        "MinimumLength" : 14,
                        "RequireLowercase" : true,
                        "RequireNumbers" : true,
                        "RequireSymbols" : true,
                        "RequireUppercase" : true
                    }                    
                },
                "MfaConfiguration": "ON",
                "EnabledMfas": [
                    "SMS_MFA",
                    "SOFTWARE_TOKEN_MFA"
                ],
                "SmsConfiguration": {
                    "ExternalId": "*****",
                    "SnsCallerArn": {"Fn::GetAtt" : ["SmsSendingRole", "Arn"] },
                    "SnsRegion": {  "Ref" : "AWS::Region" }
                },
                "AutoVerifiedAttributes": [ "email" ]           
            }
        },
        "LocalUserPoolClient": {
            "Type" : "AWS::Cognito::UserPoolClient",
            "Properties" : {
                "AccessTokenValidity" : 60,
                "AllowedOAuthFlows" : [
                    "code"
                ],
                "AllowedOAuthFlowsUserPoolClient" : true,
                "AllowedOAuthScopes" : ["phone", "email", "openid", "profile", "aws.cognito.signin.user.admin"],
                "CallbackURLs" : [ 
                    { "Fn::FindInMap" : ["CallbackUrl", "local", "callbackUrl"] }
                 ],
                "ClientName" : {
                    "Fn::Sub": "local-app-client"
                },
                "ExplicitAuthFlows" : [ "ALLOW_ADMIN_USER_PASSWORD_AUTH",  "ALLOW_CUSTOM_AUTH", "ALLOW_USER_SRP_AUTH", "ALLOW_REFRESH_TOKEN_AUTH" ],
                "IdTokenValidity" : 60,
                "LogoutURLs" : [ 
                    { "Fn::FindInMap" : ["CallbackUrl", "local", "callbackUrl"] }
                 ],                
                "RefreshTokenValidity" : 1,
                "TokenValidityUnits" : {
                    "AccessToken" : "minutes",
                    "IdToken" : "minutes",
                    "RefreshToken" : "days"
                },
                "ReadAttributes": [
                    "address",
                    "birthdate",
                    "email",
                    "email_verified",
                    "family_name",
                    "gender",
                    "given_name",
                    "locale",
                    "middle_name",
                    "name",
                    "nickname",
                    "phone_number",
                    "phone_number_verified",
                    "picture",
                    "preferred_username",
                    "profile",
                    "updated_at",
                    "website",
                    "zoneinfo"
                ],
                "WriteAttributes": [
                    "address",
                    "birthdate",
                    "email",
                    "family_name",
                    "gender",
                    "given_name",
                    "locale",
                    "middle_name",
                    "name",
                    "nickname",
                    "phone_number",
                    "picture",
                    "preferred_username",
                    "profile",
                    "updated_at",
                    "website",
                    "zoneinfo"
                ],
                "SupportedIdentityProviders": [
                    "COGNITO"
                ],
                "PreventUserExistenceErrors": "ENABLED",
                "UserPoolId" :  { "Ref" : "EnvironmentUserPool" }
            }
        },