AmplifySignOut redirection stalls on Loading...

[andrewbtp]

Describe the bug
Using AmplifySignOut in conjunction with Auth.federatedSignIn({ provider: 'Facebook' }) will randomly get stuck on the screen "Loading..." from within AmplifyAuthenticator. It will also get stuck "Loading..." occasionally when logging in with Auth.federatedSignIn({provider: 'Facebook'}).

To Reproduce

1. Create auth in Amplify CLI
2. Setup Facebook social provider.
3. Use AmplifyAuthenticator with param federated, and set up a custom component within the login slot.
4. Put AmplifySignOut within the app.
5. Run the app.
6. Sign in with Facebook.
7. Sign out.
8. If it worked properly, repeat 6-7 a few times and it'll eventually hang on "Loading..."

Expected behavior
I expect to see the login/signup screen (logout redirection is to http://localhost:3000/)

Code Snippet
_app.tsx

  return (
    <AmplifyAuthenticator
      federated={{
        facebookAppId: "XXXX",
        googleClientId:
          "XXXX",
      }}
    >
      <Login />
          <Component {...pageProps} />
    </AmplifyAuthenticator>
  );

Login.tsx

<div
      slot="sign-in"
>
  <a onClick={() => Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Facebook })}>Facebook</a>
</div>

Index.tsx

<AmplifySignOut />

What is Configured?
If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources.

Do you want to use the default authentication and security configuration? Manual configuration
 Select the authentication/authorization services that you want to use: User Sign-Up & Sign-In only (Best used with a cloud API only)
 Please provide a friendly name for your resource that will be used to label this category in the project: btpauth
 Please provide a name for your user pool: btpauth_pool
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? I want to learn more.

Selecting 'Email' and/or 'Phone Number' will allow end users to sign-up using these values.  Selecting 'Username' will require a unique username for users.


 How do you want users to be able to sign in? Email or Phone Number
 Do you want to add User Pool Groups? No
 Do you want to add an admin queries API? No
 Multifactor authentication (MFA) user login options: OFF
 Email based user registration/forgot password: Enabled (Requires per-user email entry at registration)
 Please specify an email verification subject: Your verification code
 Please specify an email verification message: Your verification code is {####}
 Do you want to override the default password policy for this User Pool? No
 Warning: you will not be able to edit these selections.
 What attributes are required for signing up?
 Specify the app's refresh token expiration period (in days): 30
 Do you want to specify the user attributes this app can read and write? No
 Do you want to enable any of the following capabilities?
 Do you want to use an OAuth flow? I want to learn more.

When you create a user pool in Amazon Cognito and configure a domain for it, Amazon Cognito automatically provisions a hosted web UI to let you add sign-up and sign-in pages to your app.


 Do you want to use an OAuth flow? Yes
 What domain name prefix do you want to use? xx
 Enter your redirect signin URI: http://localhost:3000/
? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: http://localhost:3000/
? Do you want to add another redirect signout URI No
 Select the OAuth flows enabled for this project. Authorization code grant
 Select the OAuth scopes enabled for this project. Phone, Email, OpenID, Profile, aws.cognito.signin.user.admin
 Select the social providers you want to configure for your user pool: Facebook, Google

 You've opted to allow users to authenticate via Facebook.  If you haven't already, you'll need to go to https://developers.facebook.com and create an App ID.

 Enter your Facebook App ID for your OAuth flow:  xx
 Enter your Facebook App Secret for your OAuth flow:  xx

 You've opted to allow users to authenticate via Google.  If you haven't already, you'll need to go to https://developers.google.com/identity and create an App ID.

 Enter your Google Web Client ID for your OAuth flow:  xx
 Enter your Google Web Client Secret for your OAuth flow:  xx
? Do you want to configure Lambda Triggers for Cognito? No

• Which resources do you have configured?
  Only items through the amplify auth add flow.
  • If applicable, please provide your aws-exports file:

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "x",
    "aws_user_pools_web_client_id": "x",
    "oauth": {
        "domain": "x-dev.auth.us-east-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "http://localhost:3000/",
        "redirectSignOut": "http://localhost:3000/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[DEBUG] 24:15.445 OAuth - Signing out from https://xxxx.auth.us-east-1.amazoncognito.com/logout?client_id=xxxj&logout_uri=http%3A%2F%2Flocalhost%3A3000%2F
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.447 Hub - Dispatching to auth with  {event: "signOut", data: CognitoUser, message: "A user has been signed out"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.448 Hub - Dispatching to auth with  {event: "signOut", data: CognitoUser, message: "A user has been signed out"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.448 Hub - Dispatching to auth with  {event: "signOut", data: CognitoUser, message: "A user has been signed out"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.448 Hub - Dispatching to UI Auth with  {event: "AuthStateChange", message: "signin", data: undefined}
VM39298 ConsoleLogger.js:109 [INFO] 24:15.448 Authenticator - Inside onAuthStateChange Method current authState: signedin
VM39298 ConsoleLogger.js:99 [INFO] 24:15.449 Authenticator - authState has been updated to signin
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.449 Hub - Dispatching to UI Auth with  {event: "AuthStateChange", message: "signin", data: undefined}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.449 Hub - Dispatching to auth with  {event: "signOut", data: CognitoUser, message: "A user has been signed out"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.450 AnalyticsClass - on hub capsule auth {event: "signOut", data: CognitoUser, message: "A user has been signed out"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.450 Hub - Dispatching to UI Auth with  {event: "AuthStateChange", message: "signedout", data: undefined}
VM39298 ConsoleLogger.js:109 [INFO] 24:15.450 Authenticator - Inside onAuthStateChange Method current authState: signin
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.450 Hub - Dispatching to UI Auth with  {event: "AuthStateChange", message: "signedout", data: undefined}
VM39298 ConsoleLogger.js:99 [DEBUG] 24:15.460 AuthClass - configure Auth
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.460 Parser - parse config (3) [{…}, "to amplifyconfig", {…}]
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.461 Hub - Dispatching to auth with  {event: "parsingCallbackUrl", data: {…}, message: "The callback url is being parsed"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.461 Hub - Dispatching to auth with  {event: "parsingCallbackUrl", data: {…}, message: "The callback url is being parsed"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.461 Hub - Dispatching to auth with  {event: "parsingCallbackUrl", data: {…}, message: "The callback url is being parsed"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.461 Hub - Dispatching to auth with  {event: "parsingCallbackUrl", data: {…}, message: "The callback url is being parsed"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.462 AnalyticsClass - on hub capsule auth {event: "parsingCallbackUrl", data: {…}, message: "The callback url is being parsed"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.465 Hub - Dispatching to auth with  {event: "configured", data: null, message: "The Auth category has been configured successfully"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.465 Hub - Dispatching to auth with  {event: "configured", data: null, message: "The Auth category has been configured successfully"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.466 Hub - Dispatching to auth with  {event: "configured", data: null, message: "The Auth category has been configured successfully"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.466 Hub - Dispatching to auth with  {event: "configured", data: null, message: "The Auth category has been configured successfully"}
VM39298 ConsoleLogger.js:109 [DEBUG] 24:15.466 AnalyticsClass - on hub capsule auth {event: "configured", data: null, message: "The Auth category has been configured successfully"}
Navigated to http://localhost:3000/

[andrewbtp]

Seems to be a Next.js issue when running the app with next dev, but next build && next export && next start works.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.