Unhandled Authenticator Route - Please open an issue: null

[nmlynch94]

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" }
            }
        },

[samscarsella]

I'm seeing the same warnings during sign in of a Cognito user, as well as several console.debugs that read Cannot infer 'route' from Authenticator state: Object { signIn: "runActor" } in https://github.com/aws-amplify/amplify-ui/blob/main/packages/react/src/components/Authenticator/Router/index.tsx

[wlee221]

Sorry about the delay here. We've found the root cause and now working on a fix.

[wlee221]

Fix is getting tracked in #1910 🙏

[wlee221]

We have merged fix #1910, and will be published in the next release (usually Tuesdays @2:30 PT).

[OperationalFallacy]

Seeing this in the newest v6

[loic-thomas]

+1

After successfully deploying a new authentication, I run the "amplify pull" command from the terminal. Using the authenticator works fine on my local environment. When I test it on the hosting environment, I receive a message: "User pool client xxx does not exist" (xxx corresponds to the previous user pool client). Next, from my local environment, I perform a git push, triggering a new deployment on my hosting environment. The deployment is successful on the hosting environment, but in my local environment, I encounter the issue shown in the screenshot: "Cannot infer route from Authenticator state: {signUpActor: 'runActor'}." I've attempted this multiple times, and I remain stuck in this loop.

Any help would be greatly appreciated.

[louielyl]

Seeing this in the newest v6

I also run into this problem

[esauerbo]

Thanks for bringing this to our attention. @OperationalFallacy and @louielyl can you confirm whether the steps to reproduce are the same as what loic-thomas is seeing? What series of commands or actions makes this warning appear and is it stuck in a loop as well?

[stefankosc01]

Hey, I have a similar problem when testing on mobile Safari browser (iOS 17.2.1) when trying to login using Facebook, works as expected in desktop Safari and Chrome on Mac macOS 13.5.1 (22G90)

"@aws-amplify/ui-react": "^6.0.7"
"aws-amplify": "^6.0.9"

[esauerbo]

@OperationalFallacy @louielyl can you provide steps to reproduce?

[FrancescBagur]

Same error here.

In my case I don't use MFA, only social sign in with google.

[louielyl]

@OperationalFallacy @louielyl can you provide steps to reproduce?

Sorry @esauerbo, by the time I read your message, I was way over it so I couldn't reproduce it currently. Will update here if it happened to me again in the future.

[OperationalFallacy]

@louielyl I do not have specific steps, the error appeared at some point during development and stayed.

This is what it looks on dev website, third line is route and hideSignup variable

I can send you a link to dev env or specific pieces of code if you'd like.

[FrancescBagur]

Hello, any update on this? What think is that tere is some error if multiple URLs are used for the redirect. I also saw that on this switch tere is nothing in the signIn option:

let sP = e=>{
switch (e) {
case "authenticated":
case "idle":
case "setup":
case "transition":
return sk;
case "confirmSignUp":
return lS;
case "confirmSignIn":
return sx;
case "setupTotp":
return lD;
case "signIn":
case "signUp":
return se;
case "forceNewPassword":
return lI;
case "forgotPassword":
return sN;
case "confirmResetPassword":
return sw;
case "verifyUser":
return sb;
case "confirmVerifyUser":
return si;
default:
return console.warn(Unhandled Authenticator route - please open an issue: ${e}),
sk
}

[esauerbo]

Hi @FrancescBagur we have a fix for this which we're testing at the moment. I'll update this thread once that's released!

[eherms]

running into the same problem using custom domain for auth in Cognito. Works in development but not in production. Can still sign in with phone/password no problem, but federated Google and Facebook no matter what I try, unhandled authenticator route. Would really like this to work so I don't have to switch to some other auth flow. Excited to see what the fix is! Thanks.

[calebpollman]

Hi @eherms. The unhandled route warning messages should not be preventing federated sign in completion. Can you please elaborate on your issue?

[eherms]

Hi @calebpollman, sure! Using authenticator component to protect pages in NextJS app project. Have a custom domain, auth..com I set up in Cognito according to docs including the IAM permission to update Cloudfront distribution. When user navigates to localhost:3000/dashboard/home they get the authenticator popping up with FB and Google options in addition to phone/password. One issue is that once the custom domain is set up and the default Cognito domain is deleted in Cognito as required to set up the custom domain, amplify is still trying to point to the deleted Cognito domain set up through Amplify add auth CLI flow. Amplify pull just keeps updating with the old one. So, have to update the oauth domain to the custom auth..com in a custom version of the authenticator component. When I do this and have localhost:3000/dashboard/home/ as the callback url, works fine, can add users through FB and Google. But, when i update and try to use **.com/dashboard/home/, or auth..com as the callback url, any time FB or Google is clicked on production site, just gives the unhandled authenticator route and points to the switch statement above with the ${e} as null. Doesn't matter what callback url I use, and I've tried every combo I can think of and all are approved through FB/Google. So, it looks like when clicked in production, the FB and Google buttons in the authenticator are saying null event and so nothing happens and the default switch message is coming up 'return console.warn(Unhandled Authenticator route - please open an issue: ${e}),'. At my day job but if I can provide more that would be useful I'd be happy to.

[eherms]

awsExports.oauth.domain = 'auth.domain.com';
awsExports.oauth.redirectSignIn = 'http://localhost:3000/dashboard/home/';
awsExports.oauth.redirectSignOut = 'http://localhost:3000/';
Amplify.configure({ ...awsExports });

With Cognito user pool app integration custom domain set to auth.domain.com. App client domain.app.clientWeb authorized URL set to http://localhost:3000/dashboard/home/

This work fine in development. Can sign up, sign in with FB and Google no problem.

When i change it to this:

awsExports.oauth.domain = 'auth.domain.com';
awsExports.oauth.redirectSignIn = 'https://domain/dashboard/home/';
awsExports.oauth.redirectSignOut = 'https://domain.com/';
Amplify.configure({ ...awsExports });

And the authorized URL in cognito to https://domain.com/dashboard/home/
And in facebook have authorized https://auth.domain.com/oauth2/idpresponse as well as https://domain.com/dashboard/home/oauth2/idpresponse as URI redirects.

Then click on the authenticator FB button, I get this error:

Cannot infer route from Authenticator state:
Object { signInActor: "runActor" }
542-d72fba18a350af9f.js:17:3762

Unhandled Authenticator route - please open an issue: null

In addition, if I try to use the Sign Up with Facebook, nothing happens first click, then second click I get this error: redirect is coming from a different origin. The oauth flow needs to be initiated from the same origin

which seems to be related to issue #12692 which seemed to be a browser issue there but i've tried different devices and browsers and get the same thing.

[FrancescBagur]

Hi @eherms, exactly same scenario. I'm waiting for a solution :)

[calebpollman]

@eherms The issue you are seeing reads as unrelated to the unhandled Authenticator route warning. Can you please open a new issue using this template?

[eherms]

@calebpollman There do seem to be 2 issues. The first is the unhandled authenticator route described above and the second is the sign up issue where I get the redirect is coming from a different origin. That issue was opened with #12692 . I'll go ahead and open a new issue though if that helps.

[blowstack]

The error is also visible on the official docs website Unhandled Authenticator route - please open an issue: null when clicking on any Social Provider
https://ui.docs.amplify.aws/vue/connected-components/authenticator/configuration

[michael-ortiz]

I am also getting the error when I press Google button using amplify react UI:

Unhandled Authenticator route - please open an issue: null

Is there a fix for this or is a fix in the works?

[FrancescBagur]

Please, can you give us an update? We are with the social login broken in productive. This is a very serious error...

[eherms]

@FrancescBagur @michael-ortiz @blowstack For my situation where I was getting this issue, the solution was literally just including www in the redirect URL in the Amplify config and cognito application integration web client for the production site. The window expects the www so if you don't include it, there is a redirect mismatch and ends up causing a problem with the Authenticator route.

[michael-ortiz]

@eherms, can you share an example of your config where you set this up?

[calebpollman]

Just want to update this thread with some context around this warning. The console.warning should have no impact on the redirect of a successful federated sign in - the route corresponds to the internal UI elements rendered by the Authenticator, and route values of null are handled gracefully within the UI.

@FrancescBagur @michael-ortiz @blowstack Can you please verify if using signInWithRedirect within your projects works as expected without using the Authenticator? It can be imported from aws-amplify/auth, here is an example using React that can be copied and pasted for testing:

import React from 'react';
import { Amplify } from 'aws-amplify';
import { getCurrentUser, signInWithRedirect, signOut } from 'aws-amplify/auth';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function MyApp() {
  const [isSignedIn, setIsSignedIn] = React.useState(false);
  React.useEffect(() => {
    getCurrentUser()
      .then(() => {
        setIsSignedIn(true);
      })
      .catch(() => {
        setIsSignedIn(false);
      });
  }, []);

  return isSignedIn ? (
    <button
      onClick={() => {
        signOut();
      }}
    >
      Sign Out
    </button>
  ) : (
    <button
      onClick={() => {
        // 'Google` can be replaced with other configured providers
        signInWithRedirect({ provider: 'Google' });
      }}
    >
      Sign In
    </button>
  );
}

[eherms]

@eherms, can you share an example of your config where you set this up?

in aws-config file from setting up auth through CLI:

"redirectSignIn": "http://localhost:3000/dashboard/home/,https://wwww.mydomain.com/dashboard/home/",
"redirectSignOut": "http://localhost:3000/,https://www.mydomain.com/",

Custom domain set up in Cognito - User Pool - App Integration - setting = auth.mydomain.com and the cognito domain deleted.

Down further on same App Integration page the user pool app_clientWeb redirect URL set to https://www.mydomain.com/dashboard/home/

FB and Google redirect URLs whitelisted: https://auth.mydomain.com/oauth2/idpresponse and https://www.mydomain.com/dashboard/home/oauth2/idpresponse . I whitelisted versions of these with trailing slashes too just in case but don't know which is correct or if it matters.

I set up a custom authenticator that uses the amplify authenticator and include this config:

awsExports.oauth.domain = 'auth.mydomain.com';
awsExports.oauth.redirectSignIn = 'https://www.mydomain.com/dashboard/home/';
awsExports.oauth.redirectSignOut = 'https://www.mydomain.com/';

Think there's a way to include both localhost and production domains in the config, but this works for me. If I don't use this and just have both the localhost and production domains listed as above in the config, get redirect error. The main important point here is that if you have a custom domain, the aws-exports has to be manually updated somewhere because otherwise it always points to the old cognito domain that's set up when you set up auth. Deleting that in Cognito and adding your custom domain and running amplify pull just brings the old deleted one back into your aws-exports file.

Hope that helps.

[esauerbo]

Hi all, please install the latest version of the ui package you're using to resolve this console warning. If you believe there is a bug with federated sign in, please open up a new issue using this template, as this warning should not have any impact on redirect to external sites.

@aws-amplify/ui-react@6.1.2
@aws-amplify/ui-angular@5.0.8
@aws-amplify/ui-vue@4.0.8
@aws-amplify/ui-react-native@2.1.0