search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.38k stars 2.1k forks source link

Auth Hub not listening to events with React v18 #12617

Closed Srikanth-PSIOG closed 1 month ago

Srikanth-PSIOG commented 6 months ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: Windows 10 10.0.19045 CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz Memory: 1.28 GB / 7.76 GB Binaries: Node: 18.12.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.3636.0), Chromium (119.0.2151.72) Internet Explorer: 11.0.19041.3636 npmPackages: @aws-amplify/auth: ^5.5.4 => 5.6.4 @babel/core: ^7.22.9 => 7.22.11 @babel/plugin-proposal-class-properties: ^7.18.6 => 7.18.6 @babel/plugin-transform-runtime: ^7.22.9 => 7.22.10 @babel/preset-env: ^7.22.9 => 7.22.10 @babel/preset-react: ^7.22.5 => 7.22.5 @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/icons-material: ^5.14.3 => 5.14.9 @mui/lab: ^5.0.0-alpha.136 => 5.0.0-alpha.141 @mui/material: ^5.14.0 => 5.14.6 @mui/styles: ^5.14.0 => 5.14.6 @reduxjs/toolkit: ^1.9.5 => 1.9.5 @reduxjs/toolkit-query: 1.0.0 @reduxjs/toolkit-query-react: 1.0.0 @stripe/react-stripe-js: ^2.1.1 => 2.3.0 @stripe/stripe-js: ^1.54.1 => 1.54.2 @testing-library/jest-dom: ^5.16.5 => 5.17.0 @testing-library/react: ^14.0.0 => 14.0.0 @testing-library/react-hooks: ^8.0.1 => 8.0.1 @testing-library/user-event: ^14.4.3 => 14.4.3 ace-builds: ^1.23.4 => 1.25.0 apexcharts: ^3.41.0 => 3.42.0 aws-amplify: ^5.3.4 => 5.3.10 axios: ^1.4.0 => 1.4.0 (0.26.0) babel-jest: ^29.6.1 => 29.7.0 babel-loader: ^9.1.3 => 9.1.3 cjs-loader: ^0.1.0 => 0.1.0 compression-webpack-plugin: ^10.0.0 => 10.0.0 copy-to-clipboard: ^3.3.3 => 3.3.3 css-loader: ^6.8.1 => 6.8.1 date-fns: ^2.30.0 => 2.30.0 dotenv-webpack: ^8.0.1 => 8.0.1 draft-js: ^0.11.7 => 0.11.7 draftjs-to-html: ^0.9.1 => 0.9.1 elkjs: ^0.8.2 => 0.8.2 env-cmd: ^10.1.0 => 10.1.0 eslint: ^8.45.0 => 8.47.0 eslint-config-airbnb: ^19.0.4 => 19.0.4 eslint-config-prettier: ^8.8.0 => 8.10.0 eslint-config-react-app: ^7.0.1 => 7.0.1 eslint-plugin-import: ^2.27.5 => 2.28.1 eslint-plugin-jsx-a11y: ^6.7.1 => 6.7.1 eslint-plugin-prettier: ^5.0.0 => 5.0.0 eslint-plugin-react: ^7.32.2 => 7.33.2 eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 file-loader: ^6.2.0 => 6.2.0 framer-motion: ^10.16.4 => 10.16.4 html-loader: ^4.2.0 => 4.2.0 html-to-draftjs: ^1.5.0 => 1.5.0 html-webpack-plugin: ^5.5.3 => 5.5.3 html2canvas: ^1.4.1 => 1.4.1 humanize-duration: ^3.29.0 => 3.29.0 husky: ^8.0.3 => 8.0.3 image-minimizer-webpack-plugin: ^3.8.3 => 3.8.3 image-webpack-loader: ^8.1.0 => 8.1.0 imagemin: ^8.0.1 => 8.0.1 (7.0.1) imagemin-optipng: ^8.0.0 => 8.0.0 imagemin-svgo: ^10.0.1 => 10.0.1 (9.0.0) immutable: ^4.3.2 => 4.3.4 (3.7.6) iso-3166-1-alpha-2: ^1.0.1 => 1.0.1 jest: ^29.6.1 => 29.7.0 js-yaml: ^4.1.0 => 4.1.0 (3.14.1) json-loader: ^0.5.7 => 0.5.7 lint-staged: ^13.2.3 => 13.3.0 mini-css-extract-plugin: ^2.7.6 => 2.7.6 moment: ^2.29.4 => 2.29.4 prettier: ^3.0.0 => 3.0.2 react: ^18.2.0 => 18.2.0 react-ace: ^10.1.0 => 10.1.0 react-apexcharts: ^1.4.0 => 1.4.1 react-beautiful-dnd: ^13.1.1 => 13.1.1 react-datepicker: ^4.16.0 => 4.16.0 react-dom: ^18.2.0 => 18.2.0 react-draft-wysiwyg: ^1.15.0 => 1.15.0 react-file-reader: ^1.1.4 => 1.1.4 react-google-recaptcha: ^3.1.0 => 3.1.0 react-joyride: ^2.5.4 => 2.5.5 react-json-view: ^1.21.3 => 1.21.3 react-redux: ^8.1.1 => 8.1.2 (7.2.9) react-router-dom: ^6.14.1 => 6.15.0 react-slick: ^0.29.0 => 0.29.0 react-syntax-highlighter: ^15.5.0 => 15.5.0 react-test-renderer: ^18.2.0 => 18.2.0 react-use: ^17.4.0 => 17.4.0 react-virtualized: ^9.22.5 => 9.22.5 react-virtuoso: ^4.6.2 => 4.6.2 react18-json-view: ^0.2.6 => 0.2.6 reactflow: ^11.7.4 => 11.8.3 redux: ^4.2.1 => 4.2.1 rimraf: ^5.0.1 => 5.0.1 (2.7.1, 3.0.2) sass-loader: ^13.3.2 => 13.3.2 slick-carousel: ^1.8.1 => 1.8.1 style-loader: ^3.3.3 => 3.3.3 svg-url-loader: ^8.0.0 => 8.0.0 url-loader: ^4.1.1 => 4.1.1 use-debounce: ^9.0.4 => 9.0.4 use-react-screenshot: ^3.0.0 => 3.0.0 use-react-screenshot-example: 0.0.0 webpack: ^5.88.1 => 5.88.2 webpack-cli: ^5.1.4 => 5.1.4 webpack-dev-server: ^4.15.1 => 4.15.1 yaml: ^2.3.1 => 2.3.1 (1.10.2) yaml-loader: ^0.8.0 => 0.8.0 yarn-upgrade-all: ^0.7.2 => 0.7.2 npmGlobalPackages: @aws-amplify/cli: 12.2.3 corepack: 0.14.2 npm: 8.19.2 serve: 14.1.2 yarn: 1.22.19 ```

Describe the bug

Encountering an issue with authentication using Google sign-in and the cognitoHostedUI option in AWS Amplify while working with React18. When attempting a federated sign in with Google, the Hub is not listening to any authentication events, and there is no response.

However, it is listening to events with react version 17.0.2

Expected behavior

Hub listening to events from federated signIn and returning events indicating the type of event occurred which seems to be working as expected in React v17.0.2

Below are the console.log that are printed with React17 Error

Reproduction steps

Configure a react app and amplify with the following versions:

Code Snippet

useEffect(() => {
        const unsubscribe = Hub.listen('auth', ({ payload: { event, data } }) => {
            console.log("Event:",event);
            console.log("Data:",data);
            switch (event) {
                case 'signIn_failure':
                case 'cognitoHostedUI_failure':
                case 'customState_failure':
                    window.localStorage.setItem('isFederatedError', 'true');
                    if (data?.message === 'User+is+not+enabled') {
                        window.localStorage.setItem(
                            'federatedError',
                            'You are yet to be activated. Please contact the administrator.'
                        );
                    } else if (data?.message === 'User+is+disabled.+') {
                        window.localStorage.setItem(
                            'federatedError',
                            'Sign up successful.You are yet to be activated. Please contact the administrator.'
                        );
                    } else if (
                        data?.message ===
                        'PreSignUp+failed+with+error+Sorry%2C+User+already+exist+with+same+email.+'
                    ) {
                        window.localStorage.setItem('federatedError', 'User already exist with same email.');
                    } else {
                        window.localStorage.setItem('federatedError', data?.message);
                    }
                    break;
            }
        });

        Auth.currentAuthenticatedUser().catch(() => {
            navigate('/login');
        });
        return unsubscribe;
    }, []);

Log output

``` // Put your logs below this line ```

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_XXXX.....",
    "aws_user_pools_web_client_id": "XXXXXXXXXX...",
    "oauth": {
        "domain": "XXXXXXXXXXX",
        "scope": [
            "aws.cognito.signin.user.admin",
            "email",
            "openid",
            "phone",
            "profile"
        ],
        "redirectSignIn": "http://localhost:8080,XXXX",
        "redirectSignOut": "http://localhost:8080/login,XXXXX",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [
        "GOOGLE"
    ],
    "aws_cognito_signup_attributes": [
        "GIVEN_NAME",
        "FAMILY_NAME",
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 6,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ]
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

Ref Issues #7555

cwomack commented 6 months ago

Hello @Srikanth-PSIOG, and thanks for opening this issue. Can you clarify if you're seeing this in both production builds as well as dev/testing? Or does this only happen when running the app locally?

Srikanth-PSIOG commented 6 months ago

Hello @cwomack This issue persists across all environments (local, dev, and production build). We upgraded our React app from v17.0.2 to v18, and we've been experiencing this problem since then. We attempted to downgrade the React app back to v17, and everything worked fine.

Prasy12 commented 6 months ago

@cwomack Any updates on this?

sriranjanivenkatesan commented 4 months ago

hello @cwomack , any updates/workaround for this issue?

cwomack commented 1 month ago

@sriranjanivenkatesan, in reviewing your dependencies again it looks like you may have duplicates that could cause issues. Can you run npm list aws-amplify (or yarn why aws-amplify) to see if you possibly have duplicates?

If there's no duplicates, then both you and @Srikanth-PSIOG have stated that this happened when upgrading to React v18... leading me to think it might mean the changes to how the useEffect() hook behaves as of v18 might have an impact here. Are either of you running this in Strict Mode by chance?

cwomack commented 1 month ago

@sriranjanivenkatesan and @Srikanth-PSIOG, let me know if you're still experiencing this and had a chance to review the comment above!

cwomack commented 1 month ago

Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue.

Thank you!