amplify-js: `onAuthUIStateChange` never triggers

Describe the bug

I’m setting up the example from the docs: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#manage-auth-state-and-conditional-app-rendering

  useEffect(() => {
    return onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    });
  }, []);

I log in, the widget disappears and nothing shows up.

Turns out, onAuthUIStateChange is never triggered therefore authState and user remain undefined. The sign in is successful and the localstore is populated with the proper user data. No errors on-screen or in console. Adding the following (from https://github.com/aws-amplify/amplify-js/issues/6842) to useEffect fills authState and user on page reload after login:

    if (authState === undefined) {
      Auth.currentAuthenticatedUser()
        .then((authData) => {
          setAuthState(AuthState.SignedIn);
          setUser(authData);
        })
    }

This is not a valid workaround though as I need to reload the page.

I don’t think this is a duplicate of https://github.com/aws-amplify/amplify-js/issues/6842. I use react-router and lazy() but tried outside of those as well with the same results.

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. Configuring from the ground up via the docs.
Which resources do you have configured?
- If applicable, please provide your aws-exports file:

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:9957aa10-0ea8-4035-9ee8-319de6f7508c",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_ishdpgXI9",
    "aws_user_pools_web_client_id": "78a3tflntj271u94gejacnmeko",
    "oauth": {}
};

If applicable, please provide your manual configuration example:

If applicable, provide more configuration data, for example for Amazon Cognito, run aws cognito-idp describe-user-pool --user-pool-id us-west-2_xxxxxx (Be sure to remove any sensitive data)

Environment

npx: installed 1 in 1.084s
  System:
    OS: Linux 4.19 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 9.47 GB / 12.39 GB
    Container: Yes
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 14.10.0 - ~/.nvm/versions/node/v14.10.0/bin/node
    Yarn: 1.22.5 - ~/.nvm/versions/node/v14.10.0/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.10.0/bin/npm
  npmPackages:
    @aws-amplify/ui-components: ^0.8.5 => 0.8.5 
    @aws-amplify/ui-react: ^0.2.18 => 0.2.18 
    @material-ui/core: ^4.11.0 => 4.11.0 
    @material-ui/icons: ^4.9.1 => 4.9.1 
    @sentry/react: ^5.22.3 => 5.22.3 
    @sentry/tracing: ^5.22.3 => 5.22.3 
    @testing-library/jest-dom: ^5.11.2 => 5.11.2 
    @testing-library/react: ^10.4.8 => 10.4.8 
    @types/jest: ^24.0.0 => 24.9.1 
    @types/node: ^12.0.0 => 12.12.47 
    @types/query-string: ^6.3.0 => 6.3.0 
    @types/react: ^16.9.0 => 16.9.41 
    @types/react-dom: ^16.9.0 => 16.9.8 
    @types/react-ga: ^2.3.0 => 2.3.0 
    @types/react-helmet: ^6.1.0 => 6.1.0 
    @types/react-router-dom: ^5.1.5 => 5.1.5 
    @types/styled-components: ^5.1.2 => 5.1.2 
    @types/typed.js: ^2.0.9 => 2.0.9 
    alphach: ^0.0.1 => 0.0.1 
    aws-amplify: ^3.1.1 => 3.1.1 
    aws-amplify-react: ^4.2.5 => 4.2.5 
    cypress: ^4.12.1 => 4.12.1 
    eslint-config-airbnb-base: ^14.2.0 => 14.2.0 
    eslint-config-prettier: ^6.11.0 => 6.11.0 
    eslint-plugin-cypress: ^2.11.1 => 2.11.1 
    eslint-plugin-jest: ^23.17.1 => 23.17.1 
    eslint-plugin-prettier: ^3.1.4 => 3.1.4 
    eslint-plugin-testing-library: ^3.4.1 => 3.4.1 
    formik: ^2.1.5 => 2.1.5 
    formik-material-ui: ^3.0.0-alpha.0 => 3.0.0-alpha.0 
    hex-rgb: ^4.1.0 => 4.1.0 
    prettier: ^2.0.5 => 2.0.5 
    query-string: ^6.13.1 => 6.13.1 
    raw.macro: ^0.4.1 => 0.4.1 
    react: ^16.13.1 => 16.13.1 
    react-cookie-consent: ^5.1.3 => 5.1.3 
    react-dom: ^16.13.1 => 16.13.1 
    react-ga: ^3.1.2 => 3.1.2 
    react-helmet: ^6.1.0 => 6.1.0 
    react-markdown: ^4.3.1 => 4.3.1 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-scripts: 3.4.0 => 3.4.0 
    react-text-loop: ^2.3.0 => 2.3.0 
    serve: ^11.3.2 => 11.3.2 
    styled-components: ^5.1.1 => 5.1.1 
    typed.js: ^2.0.11 => 2.0.11 
    typescript: ~3.7.2 => 3.7.5 
  npmGlobalPackages:
    @aws-amplify/cli: 4.29.1
    npm: 6.14.8
    yarn: 1.22.5

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 24 (4 by maintainers)

Most upvoted comments

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

stale[bot] on Jan 10, 2021

I updated the dependencies and now I get this Amplify has not been configured correctly. error.

This usually occurs when you have mismatching amplify packages. Updating the amplify dependencies should resolve this issue. Ideally, you should have these packages installed:

npm install aws-amplify @aws-amplify/ui-components @aws-amplify/ui-[framework]

We see that version matching with Amplify is frustrating – we’ll work on improving (and clarifying) this!

wlee221 on Jan 29, 2021

Hi! Sorry the issue got closed prematurely. Can you try using the lifecycle method mounted like so:

import { Auth } from "@aws-amplify/auth";
import { onAuthUIStateChange, AuthState } from "@aws-amplify/ui-components";
// ...

export default {
  // ...
  mounted() {
    if (this.authState === undefined) {
      Auth.currentAuthenticatedUser().then((authData) => {
        this.authState = AuthState.SignedIn;
        this.authData = authData;
      });
    }
  },
};

Please let us know if this helps.

wlee221 on Jan 29, 2021

I was experiencing the exact same problem, after a login onAuthUIStateChange never gets triggered. But it’s working on a deployed version of the site I published earlier this week.

Figured it was a problem in the amplify library so I updated the components to the latest version and now I get

AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties.

kris-sum on Nov 6, 2020

I ran into the same issue, locally and in my aws environment, I tried a lot of different things, but what finally worked for me was this:

Remove node_modules
Remove the lock file(I use npm, so mine is package-lcok.json)
Run npm install again, which regenerates my package-lcok.json with slightly different versions of various packages, if ones are available.

Hope this helps!

medelbou on Feb 7, 2021

Yes, that’s correct.

wlee221 on Feb 1, 2021

@thisismydesign I cleared my node_modules directory, cleaned up my package JSON and reinstalled everything and it magically started working…

From what I can tell, for some reason one of the Auth libraries was loading from inside amplify/ui-components’s node_modules directory, so it was getting instantiated with no configuration data.

kris-sum on Nov 6, 2020