Closed thisismydesign closed 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.
@kris-sum Did you managed to figure out which config prop is missing?
@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.
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:
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.
This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.
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!
@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?
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....
@mathiasmoeller Did you try the proposal by @harrysolovay and it still doesn't work?
Hey @thisismydesign
I am using the VueJS components, so no useEffect
hook there unfortunately :/
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.
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!
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?
Yes, that's correct.
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:
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
That's a great hint! Thanks a lot, I will try that
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:
node_modules
npm
, so mine is package-lcok.json
)npm install
again, which regenerates my package-lcok.json
with slightly different versions of various packages, if ones are available.Hope this helps!
@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. :(
@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
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.
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.
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
I log in, the widget disappears and nothing shows up.
Turns out,
onAuthUIStateChange
is never triggered thereforeauthState
anduser
remainundefined
. 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) touseEffect
fillsauthState
anduser
on page reload after login: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
andlazy()
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?
aws-exports
file: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 ```