amplify-js: Hub listen not triggering auth events

Describe the bug Hub not triggering auth events when using ‘cognitoHostedUI’ using Auth.federatedSignIn method to sign-in with google the Hub doesn’t trigger any response.

Expected behavior Hub auth listener should send a response data of what kind of auth event happened.

Code Snippet

useEffect(() => {
    const getCurrentUser = async () => {
      //code
    };

    Hub.listen('auth', (data) => {
      switch (data.payload.event) {
        case 'signIn':
        case 'cognitoHostedUI':
          getCurrentUser();
          break;
        case 'signIn_failure':
        case 'cognitoHostedUI_failure':
          // console.log('Sign in failure', data);
          break;
        default:
          break;
      }
    });
    return () => {
      Hub.remove('auth');
    };
  }, [dispatch, navigation]);

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.

Which resources do you have configured?

If applicable, please provide your aws-exports file:

const awsmobile = {
 "aws_project_region": "us-east-2",
 "aws_cognito_identity_pool_id": "us-east-x:xxxxxxx-xxxx-xxxxx-xxxx-xxxxxxxxxxx",
 "aws_cognito_region": "us-east-2",
 "aws_user_pools_id": "us-east-2_xxxxxxxxx",
 "aws_user_pools_web_client_id": "xxxxxxxxxxxxxxxxxxxx",
 "oauth": {
     "domain": "xxxxxxxxxxxxxx.auth.us-east-2.amazoncognito.com",
     "scope": [
         "phone",
         "email",
         "openid",
         "profile",
         "aws.cognito.signin.user.admin"
     ],
     "redirectSignIn": "xxxxxxx://",
     "redirectSignOut": "xxxxxxx://",
     "responseType": "code"
 },
 "federationTarget": "COGNITO_USER_POOLS",
 "aws_appsync_graphqlEndpoint": "https://xxxxxxxxxxxxxxxxxxxxxx.appsync-api.us-east-2.amazonaws.com/graphql",
 "aws_appsync_region": "us-east-2",
 "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
 "aws_appsync_apiKey": "xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx",
 "aws_cloud_logic_custom": [
     {
         "name": "xxxxxAPI",
         "endpoint": "https://xxxxxxxxxx.execute-api.us-east-2.amazonaws.com/staging",
         "region": "us-east-2"
     },
     {
         "name": "xxxxxxQueries",
         "endpoint": "https://xxxxxxxxxx.execute-api.us-east-2.amazonaws.com/staging",
         "region": "us-east-2"
     },
     {
         "name": "xxxxxxxxxapi",
         "endpoint": "https://xxxxxxxxxx.execute-api.us-east-2.amazonaws.com/staging",
         "region": "us-east-2"
     },
     {
         "name": "xxxxxxAPI",
         "endpoint": "https://xxxxxxxxxx.execute-api.us-east-2.amazonaws.com/staging",
         "region": "us-east-2"
     }
 ],
 "aws_user_files_s3_bucket": "xxxxxxxxxxx-staging",
 "aws_user_files_s3_bucket_region": "us-east-2",
 "aws_mobile_analytics_app_id": "xxxxxxxxxxxxxxxxxxxxxxxx",
 "aws_mobile_analytics_app_region": "us-east-1"}


System:
    OS: macOS 11.2
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 31.29 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nodenv/shims/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nodenv/shims/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 84.0.2
    Safari: 14.0.3
  npmPackages:
    @aws-amplify/pushnotification: ^3.2.10 => 3.2.10 
    @babel/core: ^7.11.6 => 7.11.6 
    @babel/runtime: ^7.11.2 => 7.11.2 
    @react-native-community/async-storage: ^1.12.0 => 1.12.0 
    @react-native-community/checkbox: ^0.4.2 => 0.4.2 
    @react-native-community/eslint-config: ^1.1.0 => 1.1.0 
    @react-native-community/geolocation: ^2.0.2 => 2.0.2 
    @react-native-community/masked-view: ^0.1.10 => 0.1.10 
    @react-native-community/netinfo: ^5.9.7 => 5.9.7 
    @react-native-community/picker: ^1.8.0 => 1.8.0 
    @react-native-community/push-notification-ios: ^1.7.3 => 1.7.3 
    @react-native-firebase/analytics: ^7.6.4 => 7.6.4 
    @react-native-firebase/app: ^8.4.3 => 8.4.3 
    @react-navigation/bottom-tabs: ^5.8.0 => 5.8.0 
    @react-navigation/drawer: ^5.9.0 => 5.9.0 
    @react-navigation/native: ^5.7.3 => 5.7.3 
    @react-navigation/stack: ^5.9.0 => 5.9.0 
    amazon-cognito-identity-js: 4.5.5 => 4.5.5 
    aws-amplify: ^3.3.14 => 3.3.14 
    aws-amplify-react-native: ^4.2.10 => 4.2.10 
    babel-jest: ^25.1.0 => 25.5.1 
    eslint: ^6.5.1 => 6.8.0 
    geolib: ^3.3.1 => 3.3.1 
    jest: ^25.1.0 => 25.5.4 
    metro-react-native-babel-preset: ^0.59.0 => 0.59.0 
    moment: ^2.28.0 => 2.28.0 
    query-string: ^6.13.2 => 6.13.2 
    ramda: ^0.27.1 => 0.27.1 
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
    react-native-base64: ^0.1.0 => 0.1.0 
    react-native-config: ^1.3.3 => 1.3.3 
    react-native-config-reader: ^4.1.1 => 4.1.1 
    react-native-gesture-handler: ^1.8.0 => 1.8.0 
    react-native-hyperlink: 0.0.19 => 0.0.19 
    react-native-image-zoom-viewer: ^3.0.1 => 3.0.1 
    react-native-in-app-review: ^2.1.2 => 2.1.2 
    react-native-inappbrowser-reborn: ^3.4.0 => 3.4.0 
    react-native-input-credit-card: ^0.5.5 => 0.5.5 
    react-native-maps: ^0.27.1 => 0.27.1 
    react-native-picker-select: ^8.0.0 => 8.0.0 
    react-native-read-more-text: ^1.1.2 => 1.1.2 
    react-native-reanimated: ^1.13.0 => 1.13.0 
    react-native-safe-area-context: ^3.1.8 => 3.1.8 
    react-native-screens: ^2.11.0 => 2.11.0 
    react-native-simple-toast: ^1.1.2 => 1.1.2 
    react-native-splash-screen: ^3.2.0 => 3.2.0 
    react-native-svg: ^12.1.0 => 12.1.0 
    react-native-table-component: ^1.2.1 => 1.2.1 
    react-phone-number-input: ^3.1.7 => 3.1.7 
    react-redux: ^7.2.1 => 7.2.1 
    react-test-renderer: 16.13.1 => 16.13.1 
    redux: ^4.0.5 => 4.0.5 
    redux-saga: ^1.1.3 => 1.1.3 
    rn-range-slider: ^1.3.3 => 1.3.3 
  npmGlobalPackages:
    @aws-amplify/cli: 4.41.0
    dynamodb-admin: 4.0.0
    npm: 6.14.8

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 33 (11 by maintainers)

Most upvoted comments

I can confirm that "aws-amplify": "3.3.17", has fixed this issue 😄

codercatdev on Feb 4, 2021

I had this issue and the source of the problem turned out to be that I was using a combination of aws-amplify and @aws-amplify/auth, @aws-amplify/core, etc. In addition, we have a yarn workspaces mono-repo and they were using different versions of the dependencies.

I used syncpack to synchronize the various versions in the packages and then imported the main classes (Amplify, API, Auth, etc) from aws-amplify only.

Now it works! 😅

mitchconquer on Nov 3, 2021

Our issues here were related that some change in auth 3.4.7 -> 3.4.17 brought up an issue related to duplication with the aws-amplify library that existed from before modularization was used: removing the modularized auth library resolved the issue. Thank you @elorzafe

24601 on Jan 26, 2021

@StriderHND is redirect from HostedUI to that screen?

From your package.json seems to be a react-native app, can you confirm that?

@elorzafe

Yes it’s a react native app as stated on the docs

The function that handles the HostedUI redirect is on the App.JS and setup on the Amplify config function.

I want to point out that this was a working code before updating aws-amplify. to 3.3.14

StriderHND on Jan 25, 2021

@elorzafe no, the login screen is optional to the user to navigate to the app, only when the user does an action that requires authentication the user is prompted with the login screen. that is where the Hub.listener code is added

StriderHND on Jan 25, 2021

I successfully see the events in this react app I’ve just created.

App.js

import logo from './logo.svg';
import './App.css';
import awsconfig from './aws-exports';
import { Amplify, Auth, Hub } from "aws-amplify";

Amplify.configure(awsconfig);

const getCurrentUser = async (data) => {
  console.log('listenting to events', data)
};

Hub.listen('auth', (data) => {
  switch (data.payload.event) {
    case 'signIn':
    case 'cognitoHostedUI':
      getCurrentUser(data);
      break;
    case 'signIn_failure':
    case 'cognitoHostedUI_failure':
      console.log('Sign in failure', data);
      break;
    default:
      break;
  }
});
function App() {
  return (
    <div className="App">
      <button onClick={() => Auth.federatedSignIn()}>hostedui</button>
    </div>
  );
}

export default App;

elorzafe on Jan 25, 2021

Can you move Hub.listener on the top of the code not inside useEffect?

useEffect is not recommend to add Hub.listener

Let me know how it goes

elorzafe on Jan 25, 2021

FYI @sammartinez - we can confirm that this occurs in non-SSR environments, too (not sure if the SSR label indicated SSR-only or that SSR is also affected, just want to be sure).

Thanks for this feedback @24601, I am marking it as also related to SSR with the label indication.

sammartinez on Jan 25, 2021

Any news about this?

StriderHND on Jan 19, 2021