currently I'm implementing an angular website where i use 'aws-amplify/auth' for authentication and I run a cognito-idp locally with localstack. I logged in into my application and after the logout I get this exception "ERROR UserUnAuthenticatedException: User needs to be authenticated to call this API."
Even when I logout with "signOut({ global: true });" I get this error. I only get this error when I load or reload my AppComponent.
I already searched the web for this error but could not find anything which works for me. I already debugged it and the error occures after the AppComponent is loaded. So I think it has nothing to do with the component.
I also rebuild and served the application, deleted all the browser cache and hard loaded the website. I expect that the application should reset and delete all the caches and chunks that the "assertAuthTokens" should not fail and return false instead or something similar.
Im Using: OS: macOS 14.2.1
npm list -g --depth=0 ├── @angular/[email protected] ├── @aws-amplify/[email protected] └── [email protected]
package-lock.json
"name": "website",
"version": "0.0.0",
"dependencies": {
"@angular/animations": "^17.1.0",
"@angular/cdk": "^17.2.1",
"@angular/common": "^17.1.0",
"@angular/compiler": "^17.1.0",
"@angular/core": "^17.1.0",
"@angular/forms": "^17.1.0",
"@angular/material": "^17.2.1",
"@angular/platform-browser": "^17.1.0",
"@angular/platform-browser-dynamic": "^17.1.0",
"@angular/router": "^17.1.0",
"@aws-amplify/ui-angular": "^5.0.11",
"aws-amplify": "^6.0.18",
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.3",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
This is the error log i got in the browser:
And this is the expanded error:
This is my AmplifyConfiguration:
=== main.ts ===
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { Amplify } from 'aws-amplify';
import { environment } from './environments/environment';
Amplify.configure({
Auth: {
Cognito: environment.cognito
}
});
bootstrapApplication(AppComponent, appConfig
).catch(err => console.error(err));
=== environment ===
export const environment = {
production: false,
apiUrl: 'http://127.0.0.1:3000',
cognito: {
region: 'us-east-1',
userPoolId: 'us-east-1_localuserpool1',
userPoolClientId: 'localcognitoclient1',
userPoolEndpoint: 'http://localhost:3000/auth'
}
};
Thanks in advance for any help!
I found my mistake, maybe it was a too long day :D
For everyone who has the same kind of this error maybe this helps him to find the wrong code in the application.
So I implemented a function in my AuthenticationService to check if the user is logged in. This function gets called on every ngOnInit Method. In this method I was calling the Amplify.getCurrentUser() method without waiting for it. So the error was never caught by the method and it throws after initializing my application.
Wrong code:
Right way to do it: