DEV Community

Cover image for Authentication using the Amazon Cognito to an Angular application

Authentication using the Amazon Cognito to an Angular application

Rodrigo Kamada on January 18, 2022

Introduction In this article, an application will be created using the latest version of Angular with authentication using the Amazon Co...
Read full post
Collapse
 
skibielec profile image
Tomasz Skiba •

Great showcase! Congratulations!

Collapse
 
rodrigokamada profile image
Rodrigo Kamada • • Edited

Thank you very much Tomaz!

Collapse
 
gabrieladnz profile image
Gabriela Diniz • • Edited

Very well explained, it helped a lot! The amplify library has undergone some changes since 2023. After reading it, I was able to adapt it perfectly.
For those who need it: (docs.amplify.aws/angular/build-a-b...)

Collapse
 
luisdcsoft profile image
luis.benavides@dreamcodesoft.com - Ingeniero de desarrollo •

Hi, before all thank you very much for the post.

I'm working based on this exaple including cognito service into a monorepo with dynamic module federation, but only Amplify.configure makes app crash returning the message: "Maximum call stack size exceeded", I did this same on a simple project and works fine but on monorepo I'm having the commented issue. Did you know how to solve this?

Thanks in advance.

Collapse
 
theitalianjob profile image
Edoardo Zecchi •

Hello,
I've tried all the code but it's seems I must install amplify cli and use commands "amplify add auth" and "amplify pull" to work with your example...
where I'm wrong?

Collapse
 
rodrigokamada profile image
Rodrigo Kamada •

Hi Edoardo, you don't need Amplity to make this example. Did something not work?

Collapse
 
theitalianjob profile image
Edoardo Zecchi •

This is the error I receive on console when I try to call
"Auth.signIn(user.email, user.password)"

[ERROR] 13:56.48 AuthError - Error: Amplify has not been configured correctly. The configuration object is missing required auth properties. This error is typically caused by one of the following scenarios:

  1. Did you run amplify push after adding auth via amplify add auth? See aws-amplify.github.io/docs/js/auth... for more information
  2. This could also be caused by multiple conflicting versions of amplify packages, see (docs.amplify.aws/lib/troubleshooti...) for help upgrading Amplify packages.
Thread Thread
 
rodrigokamada profile image
Rodrigo Kamada •

Did you configure the userPoolId and userPoolWebClientId parameters in the environment files?

Thread Thread
 
theitalianjob profile image
Edoardo Zecchi •

solved... I've changed in camelCase the cognito "Auth" property and this caused the error... I have to insert "eslint-disable" to remove ide warnings...

Amplify.configure({
// eslint-disable-next-line @typescript-eslint/naming-convention
Auth: environment.cognito,
});

Collapse
 
mattsawrey profile image
Matthew Sawrey •

Hey. Great post, thanks. I noticed that there's no hook to update app.component isAuthenticated value when you sign in though, so the navbar doesn't update on a successful sign-in.

Maybe could make the authenticationSubject on the cognito service public and do this in the app.component init to keep it updated:

this.cognitoService.authenticationSubject.subscribe(val => {
this.isAuthenticated = val;
})

Collapse
 
patrickj profile image
patrickj •

Thanks Matthew

I was getting an error - "amplify AuthClass - No current user" and your solution above fixed it.

Collapse
 
mmr252 profile image
Murilo de Melo Reis • • Edited

Hi Rodrigo, excellent post. I've got an issue, though: using Amply is showing now as deprecated, noticed as I used Amplify.configre(). What solution would you suggest?