amplify-js: Amplify social login unhandled authenticator route

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?

Next.js

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

East-1

Please describe your bug.

Have a Next.js 13.4.16 app project. Set up Amplify Auth with CLI. Followed steps for adding custom domain for hosted UI and for adding social sign in providers. In production with the custom domain, get :

Cannot infer route from Authenticator state: Object { signInActor: “runActor” } 542-d72fba18a350af9f.js:17:3762 Unhandled Authenticator route - please open an issue: null 542-d72fba18a350af9f.js:56:81039

In addition, in production, when clicking on the ‘sign up with facebook’ or ‘sign up with google’ buttons on the authenticator, with the first click nothing happens and nothing in network tab or console and with the second click of the same button, in the Authenticator component,

Again, when using localhost, all these things work as expected. Also, using phone number to sign up and sign in work in production with custom domain, it’s just the social provider sign up and sign in’s that are not working.

What’s the expected behaviour?

Expect the user to be able to sign up and sign in with social providers in production with custom domain.

Help us reproduce the bug!

Have a Next.js 13.4.16 app project. Set up Amplify Auth with CLI. Wanted to use a custom domain so followed the steps as described here: https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-add-custom-domain.html . Set up FB and Google social sign in as described in docs here: https://docs.amplify.aws/react/build-a-backend/auth/add-social-provider/ . Updated app client callback URL. Ran amplify pull, but old cognito hosted UI gets pulled. So, run:

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

FB valid oauth redirect URIs: https://auth.mydomain.com/oauth2/idpresponse, https://mydomain.com/dashboard/home/oauth2/idpresponse/, https://mydomain.com/dashboard/home/oauth2/idpresponse

FB app domains: auth.mydomain.com

This works fine. However, when i update all the redirectSignIn and authorized redirects everywhere to ‘https://mydomain/dashboard/home/’ and redirectSignOut to ‘https://mydomain.com’, when the user clicks on the sign in with Facebook or Google, this error appears:

Cannot infer route from Authenticator state: Object { signInActor: “runActor” } 542-d72fba18a350af9f.js:17:3762 Cannot infer route from Authenticator state: Object { signInActor: “runActor” } 542-d72fba18a350af9f.js:17:3762 Cannot infer route from Authenticator state: Object { signInActor: “runActor” } 542-d72fba18a350af9f.js:17:3762 Unhandled Authenticator route - please open an issue: null 542-d72fba18a350af9f.js:56:81039

Code Snippet

// Put your code below this line.

CustomAuthenticator:

import React, { useEffect, useState, ReactNode } from 'react';
import { Authenticator, View, Image, useTheme } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import Link from 'next/link';
import { Amplify } from 'aws-amplify';
import awsExports from '../aws-exports';
awsExports.oauth.domain = 'auth.sixesses.com';
awsExports.oauth.redirectSignIn = 'http://localhost:3000/dashboard/home/';
awsExports.oauth.redirectSignOut = 'http://localhost:3000/';
Amplify.configure({ ...awsExports });
import { ConsoleLogger } from 'aws-amplify/utils';
import { Hub } from 'aws-amplify/utils';
import { getCurrentUser, AuthUser } from 'aws-amplify/auth';

const componentLogger = new ConsoleLogger('AuthComponentLogger', 'DEBUG');

interface CustomAuthenticatorProps {
  children: ReactNode;
}

const CustomAuthenticator: React.FC<CustomAuthenticatorProps> = ({
  children,
}) => {
  const components = {
    Header() {
      const { tokens } = useTheme();

      return (
        <View
          textAlign="center"
          padding={tokens.space.small}
          position="relative"
        >
          <Image
            alt="logo"
            src="/logo1.png"
            style={{ width: '200px', height: '200px' }}
          />
          <Link href="/" passHref>
            <div className="absolute top-1 right-1">
              <Image src="/xImage.png" alt="Close" width={100} height={100} />
            </div>
          </Link>
        </View>
      );
    },
  };

  return (
    <Authenticator
      variation="modal"
      components={components}
      socialProviders={['facebook', 'google']}
    >
      {children}
    </Authenticator>
  );
};

export default CustomAuthenticator;

dashboard/home/page.tsx

‘use client’; import CustomAuthenticator from ‘@/components/CustomAuthenticator’;

import ‘@aws-amplify/ui-react/styles.css’;

import React, { useState } from ‘react’;

const Dash: React.FC = () => { return <CustomAuthenticator>Dashboard</CustomAuthenticator>; };

export default Dash;

### Console log output

Sign in with FB error:

Cannot infer `route` from Authenticator state: 
Object { signInActor: "runActor" }
[542-d72fba18a350af9f.js:17:3762](https://www.mydomain.com/_next/static/chunks/542-d72fba18a350af9f.js)
Cannot infer `route` from Authenticator state: 
Object { signInActor: "runActor" }
[542-d72fba18a350af9f.js:17:3762](https://www.mydomain.com/_next/static/chunks/542-d72fba18a350af9f.js)
Cannot infer `route` from Authenticator state: 
Object { signInActor: "runActor" }
[542-d72fba18a350af9f.js:17:3762](https://www.mydomain.com/_next/static/chunks/542-d72fba18a350af9f.js)
Unhandled Authenticator route - please open an issue: null [542-d72fba18a350af9f.js:56:81039](https://www.mydomain.com/_next/static/chunks/542-d72fba18a350af9f.js)

Sign up with FB:  nothing appears in console or network tab, error just shows in the Authenticator component.

### Additional information and screenshots

package.json

  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.0.7",
    "@next/font": "13.1.6",
    "@types/node": "18.13.0",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "aws-amplify": "^6.0.9",
    "eslint": "8.33.0",
    "eslint-config-next": "13.1.6",
    "next": "^13.4.16",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "stripe": "^14.10.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.6"
  }
}