Authentication using the Amazon Cognito to an Angular application

Introduction In this article, an application will be created using the latest version of Angular with authentication using the Amazon Cognito service which provides a simple and secure integration with support for user signin, signup and control in a WEB or mobile application. Prerequisites Before you start, you need to install and configure the tools below to create the Angular application. : Git is a distributed version control system and it will be used to sync the repository. git : Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries. Node.js and npm : Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application. Angular CLI IDE (e.g. or ): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application. Visual Studio Code WebStorm Getting started Create and Configure the Account on Amazon Cognito is a simple and secure authentication service that supports user sign in, sign up and control in a WEB or mobile application. Amazon Cognito Let's create the account. Access the site and click on the button . 1. https://aws.amazon.com/cognito/ Sign up now Click on the button . 2. Create a new AWS account Fill in the fields , , , , and click on the button . 3. Email Address Password Confirm password AWS account name Security check Continue (step 1 of 5) Click on the option , fill in the fields , , , , , , , click on the checkbox and click on the button . 4. Personal - for your own projects Full Name Phone Number Country or Region Address City State, Province or Region Postal Code I have read and agree to the terms of the AWS Customer Agreement. Continue (step 2 of 5) Fill in the fields , , , click on the optiond , , fill in the fields , , , , and click on the button . 5. Credit card number Expiration date Cardholder's name Use my contact address CPF Tax Registration Number Date of birth Postal Code Neighbothood Tax address Verify and Continue (step 3 of 5) Note: Some fields may be different for your country. Click on the option , select an option in the field , fill in the fields , and click on the button . 6. Text message (SMS) Country or region code Mobile phone number Type the characters as shown above Send SMS (step 4 of 5) Fill in the field and click on the button . 7. Verify code Continue (step 4 of 5) Click on the option and click on the button . 8. Basic support - Free Complete signup Click on the button . 9. Go to the AWS Management Console Click on the option , fill in the field and click on the button . 10. Root user Root user email address Next Fill in the field and click on the button . 11. Security check Submit Fill in the field and click on the button . 12. Password Sign in Click on the button . 13. Switch to the new Console Home Click on the menu and on the submenu . 14. Security, Identity & Compliance Cognito Click on the link . 15. Try out the new interface Click on the button . 16. Create user pool Click on the option and click on the button . 17. Email Next Click on the options , , , and click on the button . 18. Cognito defaults No MFA Enable self-service account recovery - Recommended Email only Next Click on the options , , and click on the button . 19. Enable self-registration Allow Cognito to automatically send messages to verify and confirm - Recommended Send email message, verify email address Next Click on the option and click on the button . 20. Send email with Cognito Next Fill in the field , click on the option , fill in the field , click on the option and click on the button . 21. User pool name Public client App client name Don't generate a client secret Sign in Click on the button . 22. Create user pool Click on the link with the user pool name. 23. angular-cognito Copy the user pool ID displayed, in my case, the ID was displayed because this ID will be configured in the Angular application and click on the link . 24. us-east-2_pptCj2gqV App integration Copy the client ID displayed, in my case, the ID was displayed because this ID will be configured in the Angular application. 25. 1452opnjll0ldmocs201b1oimu Ready! Account created, user pool ID and client ID generated. 26. Create the Angular application is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project. Angular Let's create the application with the Angular base structure using the with the route file and the SCSS style format. 1. @angular/cli ng new angular-cognito --routing true --style scss CREATE angular-cognito/README.md (1060 bytes) CREATE angular-cognito/.editorconfig (274 bytes) CREATE angular-cognito/.gitignore (548 bytes) CREATE angular-cognito/angular.json (3261 bytes) CREATE angular-cognito/package.json (1079 bytes) CREATE angular-cognito/tsconfig.json (863 bytes) CREATE angular-cognito/.browserslistrc (600 bytes) CREATE angular-cognito/karma.conf.js (1432 bytes) CREATE angular-cognito/tsconfig.app.json (287 bytes) CREATE angular-cognito/tsconfig.spec.json (333 bytes) CREATE angular-cognito/.vscode/extensions.json (130 bytes) CREATE angular-cognito/.vscode/launch.json (474 bytes) CREATE angular-cognito/.vscode/tasks.json (938 bytes) CREATE angular-cognito/src/favicon.ico (948 bytes) CREATE angular-cognito/src/index.html (300 bytes) CREATE angular-cognito/src/main.ts (372 bytes) CREATE angular-cognito/src/polyfills.ts (2338 bytes) CREATE angular-cognito/src/styles.scss (80 bytes) CREATE angular-cognito/src/test.ts (745 bytes) CREATE angular-cognito/src/assets/.gitkeep (0 bytes) CREATE angular-cognito/src/environments/environment.prod.ts (51 bytes) CREATE angular-cognito/src/environments/environment.ts (658 bytes) CREATE angular-cognito/src/app/app-routing.module.ts (245 bytes) CREATE angular-cognito/src/app/app.module.ts (393 bytes) CREATE angular-cognito/src/app/app.component.scss (0 bytes) CREATE angular-cognito/src/app/app.component.html (23364 bytes) CREATE angular-cognito/src/app/app.component.spec.ts (1100 bytes) CREATE angular-cognito/src/app/app.component.ts (220 bytes) ✔ Packages installed successfully. Successfully initialized git. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post . 2. Adding the Bootstrap CSS framework to an Angular application Configure the variable with the Amazon Cognito User Pool ID and the variable with the Amazon Cognito WEB Client ID in the and files as below. 3. cognito.userPoolId cognito.userPoolWebClientId src/environments/environment.ts src/environments/environment.prod.ts cognito: { userPoolId: 'us-east-2_pptCj2gqV', userPoolWebClientId: '1452opnjll0ldmocs201b1oimu', }, Install the library. 4. aws-amplify npm install aws-amplify Change the file. Add the global declaration as below. This configuration is required starting with Angular version 6. 5. src/polyfills.ts (window as any).global = window; Create the service. 6. CognitoService ng generate service cognito --skip-tests=true CREATE src/app/cognito.service.ts (136 bytes) Change the file and add the lines as below. 7. src/app/cognito.service.ts import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import Amplify, { Auth } from 'aws-amplify'; import { environment } from '../environments/environment'; export interface IUser { email: string; password: string; showPassword: boolean; code: string; name: string; } @Injectable({ providedIn: 'root', }) export class CognitoService { private authenticationSubject: BehaviorSubject ; constructor() { Amplify.configure({ Auth: environment.cognito, }); this.authenticationSubject = new BehaviorSubject (false); } public signUp(user: IUser): Promise { return Auth.signUp({ username: user.email, password: user.password, }); } public confirmSignUp(user: IUser): Promise { return Auth.confirmSignUp(user.email, user.code); } public signIn(user: IUser): Promise { return Auth.signIn(user.email, user.password) .then(() => { this.authenticationSubject.next(true); }); } public signOut(): Promise { return Auth.signOut() .then(() => { this.authenticationSubject.next(false); }); } public isAuthenticated(): Promise { if (this.authenticationSubject.value) { return Promise.resolve(true); } else { return this.getUser() .then((user: any) => { if (user) { return true; } else { return false; } }).catch(() => { return false; }); } } public getUser(): Promise { return Auth.currentUserInfo(); } public updateUser(user: IUser): Promise { return Auth.currentUserPoolUser() .then((cognitoUser: any) => { return Auth.updateUserAttributes(cognitoUser, user); }); } } Create the component. 8. SignUpComponent ng generate component sign-up --skip-tests=true CREATE src/app/sign-up/sign-up.component.scss (0 bytes) CREATE src/app/sign-up/sign-up.component.html (22 bytes) CREATE src/app/sign-up/sign-up.component.ts (279 bytes) UPDATE src/app/app.module.ts (638 bytes) Change the file. Import the and services and create the and methods as below. 9. src/app/sign-up/sign-up.component.ts Router CognitoService signUp confirmSignUp import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { IUser, CognitoService } from '../cognito.service'; @Component({ selector: 'app-sign-up', templateUrl: './sign-up.component.html', styleUrls: ['./sign-up.component.scss'], }) export class SignUpComponent { loading: boolean; isConfirm: boolean; user: IUser; constructor(private router: Router, private cognitoService: CognitoService) { this.loading = false; this.isConfirm = false; this.user = {} as IUser; } public signUp(): void { this.loading = true; this.cognitoService.signUp(this.user) .then(() => { this.loading = false; this.isConfirm = true; }).catch(() => { this.loading = false; }); } public confirmSignUp(): void { this.loading = true; this.cognitoService.confirmSignUp(this.user) .then(() => { this.router.navigate(['/signIn']); }).catch(() => { this.loading = false; }); } } Change the file. Add the lines as below. 10. src/app/sign-up/sign-up.component.html Email: Password: Sign up Code: Confirm Create the component. 11. SignInComponent ng generate component sign-in --skip-tests=true CREATE src/app/sign-in/sign-in.component.scss (0 bytes) CREATE src/app/sign-in/sign-in.component.html (22 bytes) CREATE src/app/sign-in/sign-in.component.ts (279 bytes) UPDATE src/app/app.module.ts (490 bytes) Change the file. Import the and service and create the method as below. 12. src/app/sign-in/sign-in.component.ts Router CognitoService signIn import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { IUser, CognitoService } from '../cognito.service'; @Component({ selector: 'app-sign-in', templateUrl: './sign-in.component.html', styleUrls: ['./sign-in.component.scss'], }) export class SignInComponent { loading: boolean; user: IUser; constructor(private router: Router, private cognitoService: CognitoService) { this.loading = false; this.user = {} as IUser; } public signIn(): void { this.loading = true; this.cognitoService.signIn(this.user) .then(() => { this.router.navigate(['/profile']); }).catch(() => { this.loading = false; }); } } Change the file. Add the lines as below. 13. src/app/sign-in/sign-in.component.html Email: Password: Sign in Create the component. 14. ProfileComponent ng generate component profile --skip-tests=true CREATE src/app/profile/profile.component.scss (0 bytes) CREATE src/app/profile/profile.component.html (22 bytes) CREATE src/app/profile/profile.component.ts (280 bytes) UPDATE src/app/app.module.ts (726 bytes) Change the file. Import the service and create the method as below. 15. src/app/profile/profile.component.ts CognitoService update import { Component, OnInit } from '@angular/core'; import { IUser, CognitoService } from '../cognito.service'; @Component({ selector: 'app-profile', templateUrl: './profile.component.html', styleUrls: ['./profile.component.scss'], }) export class ProfileComponent implements OnInit { loading: boolean; user: IUser; constructor(private cognitoService: CognitoService) { this.loading = false; this.user = {} as IUser; } public ngOnInit(): void { this.cognitoService.getUser() .then((user: any) => { this.user = user.attributes; }); } public update(): void { this.loading = true; this.cognitoService.updateUser(this.user) .then(() => { this.loading = false; }).catch(() => { this.loading = false; }); } } Change the file. Add the lines as below. 16. src/app/profile/profile.component.html Email: Name: Update Change the file. Import the and services and create the and methods as below. 17. src/app/app.component.ts Router CognitoService isAuthenticated signOut import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { CognitoService } from './cognito.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { isAuthenticated: boolean; constructor(private router: Router, private cognitoService: CognitoService) { this.isAuthenticated = false; } public ngOnInit(): void { this.cognitoService.isAuthenticated() .then((success: boolean) => { this.isAuthenticated = success; }); } public signOut(): void { this.cognitoService.signOut() .then(() => { this.router.navigate(['/signIn']); }); } } Change the file and add the menu as below. 18. src/app/app.component.html Angular Amazon Cognito Sign up Sign in Profile Sign out Change the file and add the routes as below. 19. src/app/app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ProfileComponent } from './profile/profile.component'; import { SignInComponent } from './sign-in/sign-in.component'; import { SignUpComponent } from './sign-up/sign-up.component'; const routes: Routes = [ { path: '', redirectTo: 'signIn', pathMatch: 'full', }, { path: 'profile', component: ProfileComponent, }, { path: 'signIn', component: SignInComponent, }, { path: 'signUp', component: SignUpComponent, }, { path: '**', redirectTo: 'signIn', }, ]; @NgModule({ imports: [ RouterModule.forRoot(routes), ], exports: [ RouterModule, ], }) export class AppRoutingModule { } Change the file. Import the module, the , , components as below. 20. src/app/app.module.ts FormsModule ProfileComponent SignInComponent SignUpComponent import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ProfileComponent } from './profile/profile.component'; import { SignInComponent } from './sign-in/sign-in.component'; import { SignUpComponent } from './sign-up/sign-up.component'; @NgModule({ declarations: [ AppComponent, ProfileComponent, SignInComponent, SignUpComponent, ], imports: [ BrowserModule, FormsModule, AppRoutingModule, ], providers: [ ], bootstrap: [ AppComponent, ], }) export class AppModule { } Run the application with the command below. 21. npm start > angular-cognito@1.0.0 start > ng serve ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Raw Size vendor.js | vendor | 9.98 MB | styles.css, styles.js | styles | 486.91 kB | polyfills.js | polyfills | 339.28 kB | scripts.js | scripts | 76.33 kB | main.js | main | 47.13 kB | runtime.js | runtime | 6.87 kB | | Initial Total | 10.91 MB Build at: 2022-01-18T16:33:13.971Z - Hash: ce7a03498c95d4f5 - Time: 25230ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Compiled successfully. Note: It may display some warnings when running the application. Ready! Access the URL and check if the application is working. See the application working on and . 22. http://localhost:4200/ GitHub Pages Stackblitz The application repository is available at . https://github.com/rodrigokamada/angular-amazon-cognito Testing the application Let's test the application. Access the URL , fill in the field , and click on the button . 1. http://localhost:4200/ Email Password Sign up Check that the user was created in Amazon Cognito. 2. Open the email with the subject and copy the code generated, in my case, the code was generated. 3. Your verification code 308386 Fill in the field with the code copied and click on the button . 4. Code Confirm Check that the user was confirmed in Amazon Cognito. 5. Fill in the field , and click on the button . 6. Email Password Sign in Fill in the field and click on the button . 7. Name Update Click on the user link created in Amazon Cognito. 8. Check that the user name was updated in Amazon Cognito. 9. Ready! We test the user sign in, sign up and update. 10. Conclusion Summarizing what was covered in this article: We created an account on Amazon Web Services (AWS). We created and configured a user pool on Amazon Cognito. We create an Angular application. We added the signin, signup and profile display pages in the Angular application. We tested the Angular application and validated the user's signup on Amazon Cognito. You can use this article to add authentication with user signin, signup and profile in an Angular application providing access control. Thank you for reading and I hope you enjoyed the article! This tutorial was posted on my in Portuguese. blog To stay updated whenever I post new articles, follow me on . Twitter