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.44k stars 2.13k forks source link

Auth event in Hub is being called 4-6 times #12001

Closed inemtsev closed 11 months ago

inemtsev commented 1 year ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

The following code causes getUserAndProcess() to run many times, spamming our server:

useEffect(() => {
        const authListenerCancelToken = Hub.listen("auth", ({ payload: { event, data }}) => {
            switch (event) {
                case 'signIn':
                case 'cognitoHostedUI':
                    getUserAndProcess(authListenerCancelToken)
                        .catch(console.error);
                    break;
                case "signOut":
                    setUser(null);
                    break;
                case 'signIn_failure':
                case 'cognitoHostedUI_failure':
                    console.log('Sign in failure', data);
                    break;
            }
        });

        getUserAndProcess(authListenerCancelToken).catch(console.error);
    }, []);

Describe the bug

This code lives in my /login-redirect page and calls getUserAndProcess() which creates the user in our back-end if needed or returns UserAlreadyExists.

Currently, our backend endpoint gets spammed with multiple calls. Is there a workaround or am I doing something wrong?

Expected behavior

authListener should be called once per success.

Reproduction steps

image

getUserAndProcess() writes processing user...

Code Snippet

// Put your code below this line.

Log output

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

aws-exports.js

No response

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

No response

cwomack commented 1 year ago

Hello, @inemtsev 👋. Can you clarify what version of Amplify you're currently on?

inemtsev commented 1 year ago

According to Yarn List these are the versions I am using:

@aws-amplify/analytics@6.5.2 │ ├─ @aws-amplify/cache@5.1.8 │ ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-sdk/client-firehose@3.6.1 │ ├─ @aws-sdk/client-kinesis@3.6.1 │ ├─ @aws-sdk/client-personalize-events@3.6.1 │ ├─ @aws-sdk/util-utf8-browser@3.6.1 │ ├─ lodash@^4.17.20 │ ├─ tslib@^1.8.0 │ └─ uuid@^3.2.1 ├─ @aws-amplify/api-graphql@3.4.8 │ ├─ @aws-amplify/api-rest@3.5.2 │ ├─ @aws-amplify/auth@5.6.2 │ ├─ @aws-amplify/cache@5.1.8 │ ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-amplify/pubsub@5.5.2 │ ├─ graphql@15.8.0 │ ├─ tslib@^1.8.0 │ ├─ uuid@^3.2.1 │ └─ zen-observable-ts@0.8.19 ├─ @aws-amplify/api-rest@3.5.2 │ ├─ @aws-amplify/core@5.8.2 │ ├─ axios@0.26.0 │ ├─ axios@0.26.0 │ │ └─ follow-redirects@^1.14.8 │ ├─ tslib@^1.8.0 │ └─ url@0.11.0 ├─ @aws-amplify/api@5.4.2 │ ├─ @aws-amplify/api-graphql@3.4.8 │ ├─ @aws-amplify/api-rest@3.5.2 │ └─ tslib@^1.8.0 ├─ @aws-amplify/auth@5.6.2 │ ├─ @aws-amplify/core@5.8.2 │ ├─ amazon-cognito-identity-js@6.3.3 │ ├─ amazon-cognito-identity-js@6.3.3 │ │ ├─ @aws-crypto/sha256-js@1.2.2 │ │ ├─ buffer@4.9.2 │ │ ├─ fast-base64-decode@^1.0.0 │ │ ├─ isomorphic-unfetch@^3.0.0 │ │ └─ js-cookie@^2.2.1 │ ├─ buffer@4.9.2 │ ├─ tslib@^1.8.0 │ └─ url@0.11.0 ├─ @aws-amplify/cache@5.1.8 │ ├─ @aws-amplify/core@5.8.2 │ └─ tslib@^1.8.0 ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-crypto/sha256-js@1.2.2 │ ├─ @aws-sdk/client-cloudwatch-logs@3.6.1 │ ├─ @aws-sdk/types@3.6.1 │ ├─ @aws-sdk/types@3.6.1 │ ├─ @aws-sdk/util-hex-encoding@3.6.1 │ ├─ @types/node-fetch@2.6.4 │ ├─ isomorphic-unfetch@^3.0.0 │ ├─ react-native-url-polyfill@^1.3.0 │ ├─ tslib@^1.8.0 │ ├─ universal-cookie@^4.0.4 │ └─ zen-observable-ts@0.8.19 ├─ @aws-amplify/datastore@4.7.2 │ ├─ @aws-amplify/api@5.4.2 │ ├─ @aws-amplify/auth@5.6.2 │ ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-amplify/pubsub@5.5.2 │ ├─ amazon-cognito-identity-js@6.3.3 │ ├─ amazon-cognito-identity-js@6.3.3 │ │ ├─ @aws-crypto/sha256-js@1.2.2 │ │ ├─ buffer@4.9.2 │ │ ├─ fast-base64-decode@^1.0.0 │ │ ├─ isomorphic-unfetch@^3.0.0 │ │ └─ js-cookie@^2.2.1 │ ├─ buffer@4.9.2 │ ├─ idb@5.0.6 │ ├─ immer@9.0.6 │ ├─ ulid@2.3.0 │ ├─ uuid@3.4.0 │ ├─ zen-observable-ts@0.8.19 │ └─ zen-push@0.2.1 ├─ @aws-amplify/geo@2.3.2 │ ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-sdk/client-location@3.186.3 │ ├─ @turf/boolean-clockwise@6.5.0 │ ├─ camelcase-keys@6.2.2 │ └─ tslib@^1.8.0 ├─ @aws-amplify/interactions@5.2.8 │ ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-sdk/client-lex-runtime-service@3.186.3 │ ├─ @aws-sdk/client-lex-runtime-v2@3.186.3 │ ├─ base-64@1.0.0 │ ├─ fflate@0.7.3 │ ├─ pako@2.0.4 │ └─ tslib@^1.8.0 ├─ @aws-amplify/notifications@1.6.2 │ ├─ @aws-amplify/cache@5.1.8 │ ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-amplify/rtn-push-notification@1.1.4 │ ├─ lodash@^4.17.21 │ └─ uuid@^3.2.1 ├─ @aws-amplify/predictions@5.5.2 │ ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-amplify/storage@5.9.2 │ ├─ @aws-sdk/client-comprehend@3.6.1 │ ├─ @aws-sdk/client-polly@3.6.1 │ ├─ @aws-sdk/client-rekognition@3.6.1 │ ├─ @aws-sdk/client-textract@3.6.1 │ ├─ @aws-sdk/client-translate@3.6.1 │ ├─ @aws-sdk/eventstream-marshaller@3.6.1 │ ├─ @aws-sdk/util-utf8-node@3.6.1 │ ├─ buffer@4.9.2 │ ├─ tslib@^1.8.0 │ └─ uuid@^3.2.1 ├─ @aws-amplify/pubsub@5.5.2 │ ├─ @aws-amplify/auth@5.6.2 │ ├─ @aws-amplify/cache@5.1.8 │ ├─ @aws-amplify/core@5.8.2 │ ├─ buffer@4.9.2 │ ├─ graphql@15.8.0 │ ├─ tslib@^1.8.0 │ ├─ url@0.11.0 │ ├─ uuid@^3.2.1 │ └─ zen-observable-ts@0.8.19 ├─ @aws-amplify/rtn-push-notification@1.1.4 ├─ @aws-amplify/storage@5.9.2 │ ├─ @aws-amplify/core@5.8.2 │ ├─ @aws-sdk/md5-js@3.6.1 │ ├─ @aws-sdk/types@3.6.1 │ ├─ @aws-sdk/types@3.6.1 │ ├─ buffer@4.9.2 │ ├─ events@^3.1.0 │ ├─ fast-xml-parser@^4.2.5 │ └─ tslib@^1.8.0 ├─ @aws-amplify/ui-react-core@2.1.30 │ ├─ @aws-amplify/ui@5.7.1 │ ├─ @xstate/react@3.0.1 │ ├─ @xstate/react@3.0.1 │ │ ├─ use-isomorphic-layout-effect@^1.0.0 │ │ └─ use-sync-external-store@^1.0.0 │ ├─ lodash@4.17.21 │ └─ xstate@^4.33.6 ├─ @aws-amplify/ui-react@5.1.1 │ ├─ @aws-amplify/ui-react-core@2.1.30 │ ├─ @aws-amplify/ui@5.7.1 │ ├─ @radix-ui/react-accordion@1.0.0 │ ├─ @radix-ui/react-direction@1.0.0 │ ├─ @radix-ui/react-dropdown-menu@1.0.0 │ ├─ @radix-ui/react-slider@1.0.0 │ ├─ @radix-ui/react-tabs@1.0.0 │ ├─ @xstate/react@3.0.0 │ ├─ classnames@2.3.1 │ ├─ deepmerge@4.2.2 │ ├─ lodash@4.17.21 │ ├─ qrcode@1.5.0 │ ├─ react-generate-context@1.0.1 │ ├─ tslib@2.4.1 │ └─ tslib@2.4.1 ├─ @aws-amplify/ui@5.7.1 │ ├─ csstype@^3.1.1 │ ├─ lodash@4.17.21 │ ├─ style-dictionary@3.7.1 │ ├─ tslib@2.4.1 │ └─ tslib@2.4.1

inemtsev commented 1 year ago

Any idea how to mitigate this issue? The only way I found so far was to have 2 redirect pages, one catches the event and the second one creates the user. But, this feels quite hacky

cwomack commented 1 year ago

@inemtsev, this might be tied to the fact that you're calling these Hub API's in the useEffect hook of a React app. Are you seeing this in production builds or only dev mode? As of React v18+, the useEffects may run 2x if you're in development mode. This could be triggering multiple hub events, but let me know if that doesn't appear to be the case!

inemtsev commented 1 year ago

@inemtsev, this might be tied to the fact that you're calling these Hub API's in the useEffect hook of a React app. Are you seeing this in production builds or only dev mode? As of React v18+, the useEffects may run 2x if you're in development mode. This could be triggering multiple hub events, but let me know if that doesn't appear to be the case!

You are absolutely correct. Removing strict-mode fixed the problem locally.

Thanks!