`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

[stale[bot]]

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

[wlee221]

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!