`onAuthUIStateChange` never triggers

thisismydesign commented 3 years ago

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 ```

kris-sum commented 3 years ago

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.

thisismydesign commented 3 years ago

@kris-sum Did you managed to figure out which config prop is missing?

kris-sum commented 3 years ago

@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.

thisismydesign commented 3 years ago

Thanks! After updating all the aws dependencies the issue went away. I did remove node_modules and re-install dependencies before as a last resort but that by itself didn't work. My current env:

Environment

``` npx: installed 1 in 1.089s 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: 8.11 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.9.2 => 0.9.2 @aws-amplify/ui-react: ^0.2.27 => 0.2.27 @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.3.7 => 3.3.7 aws-amplify-react: ^4.2.11 => 4.2.11 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 ```

harrysolovay commented 3 years ago

Can you please also try not returning the result of onAuthUIStateChange from within the useEffect hook. Only clean-up handlers are meant to be returned from useEffect, and onAuthUIStateChange does not output a cleanup handler. This could be part of the issue you're seeing.

stale[bot] commented 3 years ago

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

mathiasmoeller commented 3 years ago

I am facing the exact same issue. onAuthUIStateChange was not called and the component was hidden. I updated the dependencies and now I get this Amplify has not been configured correctly. error. I removed the node_modules, cleared the npm cache, reinstalled, ... nothing worked.

Any ideas? @kris-sum what did you do regarding "cleaned up my package JSON"?

Thanks already!

Environment

``` ├── @aws-amplify/auth@3.4.17 ├── @aws-amplify/ui-components@0.10.0 ├── @aws-amplify/ui-vue@0.2.33 ├── @types/jest@26.0.15 ├── @types/sinon@9.0.8 ├── @types/webpack@4.41.25 ├── @typescript-eslint/eslint-plugin@4.7.0 ├── @typescript-eslint/parser@4.7.0 ├── @vue/cli-plugin-babel@4.5.8 ├── @vue/cli-plugin-eslint@4.5.8 ├── @vue/cli-plugin-router@4.5.8 ├── @vue/cli-plugin-typescript@4.5.8 ├── @vue/cli-plugin-unit-jest@4.5.9 ├── @vue/cli-service@4.5.8 ├── @vue/eslint-config-airbnb@5.1.0 ├── @vue/eslint-config-typescript@7.0.0 ├── @vue/test-utils@1.1.1 ├── awilix@4.2.7 ├── aws-amplify@3.3.14 ├── core-js@3.7.0 ├── eslint@6.8.0 ├── eslint-plugin-import@2.22.1 ├── eslint-plugin-vue@6.2.2 ├── favicons-webpack-plugin@2.1.0 ├── jest-sinon@1.0.4 ├── lodash@4.17.20 ├── node-sass@5.0.0 ├── robotstxt-webpack-plugin@7.0.0 ├── sass@1.29.0 ├── sass-loader@10.1.0 ├── serverless@2.11.1 ├── serverless-cloudfront-invalidate@1.5.0 ├── serverless-s3-sync@1.15.0 ├── sinon@9.2.1 ├── typescript@4.0.5 ├── vue@2.6.12 ├── vue-class-component@7.2.6 ├── vue-property-decorator@9.0.2 ├── vue-router@3.4.9 ├── vue-template-compiler@2.6.12 ├── webpack@4.44.2 └── webpack-merge@5.4.0 ```

kris-sum commented 3 years ago

@mathiasmoeller My package.json didn't explicitly include @aws-amplify/auth@3.4.17 @aws-amplify/ui-components@0.10.0

only "@aws-amplify/ui-vue": "^0.2.26", "aws-amplify": "^3.3.7",

Maybe try removing those?

mathiasmoeller commented 3 years ago

Typescript really doesn't like that :grin:

This bug is really driving me nuts. The configuration is still the same and it also gets set properly. And I need @aws-amplify/ui-components@0.10.0 because they just fixed a nasty issue there....

thisismydesign commented 3 years ago

@mathiasmoeller Did you try the proposal by @harrysolovay and it still doesn't work?

mathiasmoeller commented 3 years ago

Hey @thisismydesign

I am using the VueJS components, so no useEffect hook there unfortunately :/

wlee221 commented 3 years ago

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 commented 3 years ago

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!

mathiasmoeller commented 3 years ago

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!

How do I know which versions match? Can we assume that they are always released together and that the latest version for all of them is correct?

wlee221 commented 3 years ago

Yes, that's correct.

kris-sum commented 3 years ago

Also see https://github.com/aws-amplify/amplify-js/issues/7619 and https://github.com/aws-amplify/docs/issues/2885

mathiasmoeller commented 3 years ago

Typescript doesn't want you to get rid of the sub-packages nor the main package since all of them are imported at some place. Not that easy to get rid of them :grin:

kris-sum commented 3 years ago

I also found that using npm list <amplify-package-name> is very useful - it'll show you where that component is included in different places and what versions they are, e.g. this is the output of npm list @aws-amplify/auth

+-- @aws-amplify/ui-vue@0.3.0
| `-- @aws-amplify/ui-components@0.10.2
|   `-- @aws-amplify/auth@3.4.19
`-- aws-amplify@3.3.16
  +-- @aws-amplify/api@3.2.19
  | `-- @aws-amplify/api-graphql@1.2.19
  |   `-- @aws-amplify/auth@3.4.19
  +-- @aws-amplify/auth@3.4.19
  `-- @aws-amplify/pubsub@3.2.17
    `-- @aws-amplify/auth@3.4.19

which you can then fix by using npm dedupe

+-- @aws-amplify/ui-vue@0.3.0
| `-- @aws-amplify/ui-components@0.10.2
|   `-- @aws-amplify/auth@3.4.19  deduped
`-- aws-amplify@3.3.16
  +-- @aws-amplify/api@3.2.19
  | `-- @aws-amplify/api-graphql@1.2.19
  |   `-- @aws-amplify/auth@3.4.19  deduped
  +-- @aws-amplify/auth@3.4.19
  `-- @aws-amplify/pubsub@3.2.17
    `-- @aws-amplify/auth@3.4.19  deduped

mathiasmoeller commented 3 years ago

That's a great hint! Thanks a lot, I will try that

medelbou commented 3 years ago

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!

lincetto commented 3 years ago

@mathiasmoeller did you get rid of this problem? I'm in you same situation (using vue) but none of the above solutions worked for me. :(

mathiasmoeller commented 3 years ago

@lincetto yes I was able to solve it with the most recent version of the dependencies. I deleted package-lock.json, updated all the dependencies in package.json to the latest version, deleted the node_modeules, ran npm i and then I checked npm list and npm deduce as described by kris above to make sure that also the newest version of the amplify packages are used in the sub-dependencies of the amplify packages. This solved the issue for me

lincetto commented 3 years ago

Thank you @mathiasmoeller, I've just discovered that onAuthUIStateChange triggers only when using amplify-authenticator component in page, but I thought that could be used also when using self-made authentication components.

github-actions[bot] commented 2 years ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

aws-amplify / amplify-js

`onAuthUIStateChange` never triggers #7123