{"id":16687411,"url":"https://github.com/rodrigokamada/angular-amazon-cognito","last_synced_at":"2025-10-28T06:41:58.321Z","repository":{"id":48997792,"uuid":"448164047","full_name":"rodrigokamada/angular-amazon-cognito","owner":"rodrigokamada","description":"Application example built with Angular 14 with authentication using the Amazon Cognito service.","archived":false,"fork":false,"pushed_at":"2023-07-10T20:56:37.000Z","size":4053,"stargazers_count":20,"open_issues_count":2,"forks_count":20,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T14:38:09.239Z","etag":null,"topics":["amazon","angular","authentication","aws","awscommunity","beginners","cognito","devcommunity","ghactions","ghpages","hacktoberfest","login","signin","signup","stackblitz","tutorial"],"latest_commit_sha":null,"homepage":"https://rodrigokamada.github.io/angular-amazon-cognito/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodrigokamada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"rodrigokamada"}},"created_at":"2022-01-15T02:42:23.000Z","updated_at":"2025-01-21T16:26:02.000Z","dependencies_parsed_at":"2023-01-31T03:15:55.702Z","dependency_job_id":null,"html_url":"https://github.com/rodrigokamada/angular-amazon-cognito","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-amazon-cognito","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-amazon-cognito/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-amazon-cognito/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-amazon-cognito/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigokamada","download_url":"https://codeload.github.com/rodrigokamada/angular-amazon-cognito/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248132081,"owners_count":21052972,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amazon","angular","authentication","aws","awscommunity","beginners","cognito","devcommunity","ghactions","ghpages","hacktoberfest","login","signin","signup","stackblitz","tutorial"],"created_at":"2024-10-12T15:09:04.657Z","updated_at":"2025-10-28T06:41:53.303Z","avatar_url":"https://github.com/rodrigokamada.png","language":"TypeScript","funding_links":["https://github.com/sponsors/rodrigokamada"],"categories":[],"sub_categories":[],"readme":"# Angular Amazon Cognito\n\nApplication example built with [Angular](https://angular.io/) 15 with authentication using the [Amazon Cognito](https://aws.amazon.com/cognito/) service.\n\nThis tutorial was posted on my [blog](https://rodrigo.kamada.com.br/blog/autenticacao-usando-o-amazon-cognito-em-uma-aplicacao-angular) in portuguese and on the [DEV Community](https://dev.to/rodrigokamada/authentication-using-the-amazon-cognito-to-an-angular-application-ilh) in english.\n\n\n[![Website](https://shields.braskam.com/v1/shields?name=website\u0026format=rectangle\u0026size=small\u0026radius=5)](https://rodrigo.kamada.com.br)\n[![LinkedIn](https://shields.braskam.com/v1/shields?name=linkedin\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.linkedin.com/in/rodrigokamada)\n[![Twitter](https://shields.braskam.com/v1/shields?name=twitter\u0026format=rectangle\u0026size=small\u0026radius=5\u0026socialAccount=rodrigokamada)](https://twitter.com/rodrigokamada)\n[![Instagram](https://shields.braskam.com/v1/shields?name=instagram\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.instagram.com/rodrigokamada)\n\n\n\n## Prerequisites\n\n\nBefore you start, you need to install and configure the tools:\n\n* [git](https://git-scm.com/)\n* [Node.js and npm](https://nodejs.org/)\n* [Angular CLI](https://angular.io/cli)\n* IDE (e.g. [Visual Studio Code](https://code.visualstudio.com/))\n\n\n\n## Getting started\n\n\n### Create and configure the account on the Amazon Cognito\n\n**1.** Let's create the account. Access the site [https://aws.amazon.com/cognito/](https://aws.amazon.com/cognito/) and click on the button *Sign up now*.\n\n![Amazon Cognito - Home page](https://res.cloudinary.com/rodrigokamada/image/upload/v1642283628/Blog/angular-cognito/cognito-step1.png)\n\n**2.** Click on the button *Create a new AWS account*.\n\n![Amazon Cognito - Sign in](https://res.cloudinary.com/rodrigokamada/image/upload/v1642283894/Blog/angular-cognito/cognito-step2.png)\n\n**3.** Fill in the fields *Email Address*, *Password*, *Confirm password*, *AWS account name*, *Security check* and click on the button *Continue (step 1 of 5)*.\n\n![Amazon Cognito - Sign up for AWS (step 1 of 5)](https://res.cloudinary.com/rodrigokamada/image/upload/v1642288229/Blog/angular-cognito/cognito-step3.png)\n\n**4.** Click on the option *Personal - for your own projects*, fill in the fields *Full Name*, *Phone Number*, *Country or Region*, *Address*, *City*, *State, Province or Region*, *Postal Code*, click on the checkbox *I have read and agree to the terms of the AWS Customer Agreement.* and click on the button *Continue (step 2 of 5)*.\n\n![Amazon Cognito - Sign up for AWS (step 2 of 5)](https://res.cloudinary.com/rodrigokamada/image/upload/v1642298952/Blog/angular-cognito/cognito-step4.png)\n\n**5.** Fill in the fields *Credit card number*, *Expiration date*, *Cardholder's name*, click on the optiond *Use my contact address*, *CPF*, fill in the fields *Tax Registration Number*, *Date of birth*, *Postal Code*, *Neighbothood*, *Tax address* and click on the button *Verify and Continue (step 3 of 5)*.\n\n![Amazon Cognito - Sign up for AWS (step 3 of 5)](https://res.cloudinary.com/rodrigokamada/image/upload/v1642348218/Blog/angular-cognito/cognito-step5.png)\n\n**Note:**\n\n* Some fields may be different for your country.\n\n**6.** Click on the option *Text message (SMS)*, select an option in the field *Country or region code*, fill in the fields *Mobile phone number*, *Type the characters as shown above* and click on the button *Send SMS (step 4 of 5)*.\n\n![Amazon Cognito - Sign up for AWS (step 4 of 5)](https://res.cloudinary.com/rodrigokamada/image/upload/v1642368061/Blog/angular-cognito/cognito-step6.png)\n\n**7.** Fill in the field *Verify code* and click on the button *Continue (step 4 of 5)*.\n\n![Amazon Cognito - Sign up for AWS (continue step 4 of 5)](https://res.cloudinary.com/rodrigokamada/image/upload/v1642368525/Blog/angular-cognito/cognito-step7.png)\n\n**8.** Click on the option *Basic support - Free* and click on the button *Complete sign up*.\n\n![Amazon Cognito - Sign up for AWS (complete sign up)](https://res.cloudinary.com/rodrigokamada/image/upload/v1642368861/Blog/angular-cognito/cognito-step8.png)\n\n**9.** Click on the button *Go to the AWS Management Console*.\n\n![Amazon Cognito - Congratulations](https://res.cloudinary.com/rodrigokamada/image/upload/v1642368989/Blog/angular-cognito/cognito-step9.png)\n\n**10.** Click on the option *Root user*, fill in the field *Root user email address* and click on the button *Next*.\n\n![Amazon Cognito - Sign in](https://res.cloudinary.com/rodrigokamada/image/upload/v1642369063/Blog/angular-cognito/cognito-step10.png)\n\n**11.** Fill in the field *Security check* and click on the button *Submit*.\n\n![Amazon Cognito - Security check](https://res.cloudinary.com/rodrigokamada/image/upload/v1642369401/Blog/angular-cognito/cognito-step11.png)\n\n**12.** Fill in the field *Password* and click on the button *Sign in*.\n\n![Amazon Cognito - Root user sign in](https://res.cloudinary.com/rodrigokamada/image/upload/v1642370125/Blog/angular-cognito/cognito-step12.png)\n\n**13.** Click on the button *Switch to the new Console Home*.\n\n![Amazon Cognito - New AWS Console Home](https://res.cloudinary.com/rodrigokamada/image/upload/v1642370137/Blog/angular-cognito/cognito-step13.png)\n\n**14.** Click on the menu *Security, Identity \u0026 Compliance* and on the submenu *Cognito*.\n\n![Amazon Cognito - Menu Cognito](https://res.cloudinary.com/rodrigokamada/image/upload/v1642418597/Blog/angular-cognito/cognito-step14.png)\n\n**15.** Click on the link *Try out the new interface.*.\n\n![Amazon Cognito - Amazon Cognito old](https://res.cloudinary.com/rodrigokamada/image/upload/v1642419871/Blog/angular-cognito/cognito-step15.png)\n\n**16.** Click on the button *Create user pool*.\n\n![Amazon Cognito - Amazon Cognito new](https://res.cloudinary.com/rodrigokamada/image/upload/v1642420048/Blog/angular-cognito/cognito-step16.png)\n\n**17.** Click on the option *Email* and click on the button *Next*.\n\n![Amazon Cognito - Configure sign-in experience](https://res.cloudinary.com/rodrigokamada/image/upload/v1642420365/Blog/angular-cognito/cognito-step17.png)\n\n**18.** Click on the options *Cognito defaults*, *No MFA*, *Enable self-service account recovery - Recommended*, *Email only* and click on the button *Next*.\n\n![Amazon Cognito - Configure security requirements](https://res.cloudinary.com/rodrigokamada/image/upload/v1642421044/Blog/angular-cognito/cognito-step18.png)\n\n**19.** Click on the options *Enable self-registration*, *Allow Cognito to automatically send messages to verify and confirm - Recommended*, *Send email message, verify email address* and click on the button *Next*.\n\n![Amazon Cognito - Configure sign-up experience](https://res.cloudinary.com/rodrigokamada/image/upload/v1642425488/Blog/angular-cognito/cognito-step19.png)\n\n**20.** Click on the option *Send email with Cognito* and click on the button *Next*.\n\n![Amazon Cognito - Configure message delivery](https://res.cloudinary.com/rodrigokamada/image/upload/v1642425858/Blog/angular-cognito/cognito-step20.png)\n\n**21.** Fill in the field *User pool name*, click on the option *Public client*, fill in the field *App client name*, click on the option *Don't generate a client secret* and click on the button *Sign in*.\n\n![Amazon Cognito - Integrate your app](https://res.cloudinary.com/rodrigokamada/image/upload/v1642427958/Blog/angular-cognito/cognito-step21.png)\n\n**22.** Click on the button *Create user pool*.\n\n![Amazon Cognito - Review and create](https://res.cloudinary.com/rodrigokamada/image/upload/v1642428754/Blog/angular-cognito/cognito-step22.png)\n\n**23.** Click on the link *angular-cognito* with the user pool name.\n\n![Amazon Cognito - User pools](https://res.cloudinary.com/rodrigokamada/image/upload/v1642473465/Blog/angular-cognito/cognito-step23.png)\n\n**24.** Copy the user pool ID displayed, in my case, the ID `us-east-2_pptCj2gqV` was displayed because this ID will be configured in the Angular application and click on the link *App integration*.\n\n![Amazon Cognito - User pool overview](https://res.cloudinary.com/rodrigokamada/image/upload/v1642474448/Blog/angular-cognito/cognito-step24.png)\n\n**25.** Copy the client ID displayed, in my case, the ID `1452opnjll0ldmocs201b1oimu` was displayed because this ID will be configured in the Angular application.\n\n![Amazon Cognito - App integration](https://res.cloudinary.com/rodrigokamada/image/upload/v1642474595/Blog/angular-cognito/cognito-step25.png)\n\n**26.** Ready! Account created, user pool ID and client ID generated.\n\n\n\n### Create the Angular application\n\n\n**1.** Let's create the application with the Angular base structure using the `@angular/cli` with the route file and the SCSS style format.\n\n```powershell\nng new angular-cognito --routing true --style scss\nCREATE angular-cognito/README.md (1060 bytes)\nCREATE angular-cognito/.editorconfig (274 bytes)\nCREATE angular-cognito/.gitignore (548 bytes)\nCREATE angular-cognito/angular.json (3261 bytes)\nCREATE angular-cognito/package.json (1079 bytes)\nCREATE angular-cognito/tsconfig.json (863 bytes)\nCREATE angular-cognito/.browserslistrc (600 bytes)\nCREATE angular-cognito/karma.conf.js (1432 bytes)\nCREATE angular-cognito/tsconfig.app.json (287 bytes)\nCREATE angular-cognito/tsconfig.spec.json (333 bytes)\nCREATE angular-cognito/.vscode/extensions.json (130 bytes)\nCREATE angular-cognito/.vscode/launch.json (474 bytes)\nCREATE angular-cognito/.vscode/tasks.json (938 bytes)\nCREATE angular-cognito/src/favicon.ico (948 bytes)\nCREATE angular-cognito/src/index.html (300 bytes)\nCREATE angular-cognito/src/main.ts (372 bytes)\nCREATE angular-cognito/src/polyfills.ts (2338 bytes)\nCREATE angular-cognito/src/styles.scss (80 bytes)\nCREATE angular-cognito/src/test.ts (745 bytes)\nCREATE angular-cognito/src/assets/.gitkeep (0 bytes)\nCREATE angular-cognito/src/environments/environment.prod.ts (51 bytes)\nCREATE angular-cognito/src/environments/environment.ts (658 bytes)\nCREATE angular-cognito/src/app/app-routing.module.ts (245 bytes)\nCREATE angular-cognito/src/app/app.module.ts (393 bytes)\nCREATE angular-cognito/src/app/app.component.scss (0 bytes)\nCREATE angular-cognito/src/app/app.component.html (23364 bytes)\nCREATE angular-cognito/src/app/app.component.spec.ts (1100 bytes)\nCREATE angular-cognito/src/app/app.component.ts (220 bytes)\n✔ Packages installed successfully.\n    Successfully initialized git.\n```\n\n**2.** Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post *[Adding the Bootstrap CSS framework to an Angular application](https://github.com/rodrigokamada/angular-bootstrap)*.\n\n**3.** Configure the variable `cognito.userPoolId` with the Amazon Cognito User Pool ID and the variable `cognito.userPoolWebClientId` with the Amazon Cognito WEB Client ID in the `src/environments/environment.ts` and `src/environments/environment.prod.ts` files as below.\n\n```typescript\ncognito: {\n  userPoolId: 'us-east-2_pptCj2gqV',\n  userPoolWebClientId: '1452opnjll0ldmocs201b1oimu',\n},\n```\n\n**4.** Install the `aws-amplify` library.\n\n```powershell\nnpm install aws-amplify\n```\n\n**5.** Change the `src/polyfills.ts` file. Add the global declaration as below. This configuration is required starting with Angular version 6.\n\n```typescript\n(window as any).global = window;\n```\n\n**6.** Create the `CognitoService` service.\n\n```powershell\nng generate service cognito --skip-tests=true\nCREATE src/app/cognito.service.ts (136 bytes)\n```\n\n**7.** Change the `src/app/cognito.service.ts` file and add the lines as below.\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport Amplify, { Auth } from 'aws-amplify';\n\nimport { environment } from '../environments/environment';\n\nexport interface IUser {\n  email: string;\n  password: string;\n  showPassword: boolean;\n  code: string;\n  name: string;\n}\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class CognitoService {\n\n  private authenticationSubject: BehaviorSubject\u003cany\u003e;\n\n  constructor() {\n    Amplify.configure({\n      Auth: environment.cognito,\n    });\n\n    this.authenticationSubject = new BehaviorSubject\u003cboolean\u003e(false);\n  }\n\n  public signUp(user: IUser): Promise\u003cany\u003e {\n    return Auth.signUp({\n      username: user.email,\n      password: user.password,\n    });\n  }\n\n  public confirmSignUp(user: IUser): Promise\u003cany\u003e {\n    return Auth.confirmSignUp(user.email, user.code);\n  }\n\n  public signIn(user: IUser): Promise\u003cany\u003e {\n    return Auth.signIn(user.email, user.password)\n    .then(() =\u003e {\n      this.authenticationSubject.next(true);\n    });\n  }\n\n  public signOut(): Promise\u003cany\u003e {\n    return Auth.signOut()\n    .then(() =\u003e {\n      this.authenticationSubject.next(false);\n    });\n  }\n\n  public isAuthenticated(): Promise\u003cboolean\u003e {\n    if (this.authenticationSubject.value) {\n      return Promise.resolve(true);\n    } else {\n      return this.getUser()\n      .then((user: any) =\u003e {\n        if (user) {\n          return true;\n        } else {\n          return false;\n        }\n      }).catch(() =\u003e {\n        return false;\n      });\n    }\n  }\n\n  public getUser(): Promise\u003cany\u003e {\n    return Auth.currentUserInfo();\n  }\n\n  public updateUser(user: IUser): Promise\u003cany\u003e {\n    return Auth.currentUserPoolUser()\n    .then((cognitoUser: any) =\u003e {\n      return Auth.updateUserAttributes(cognitoUser, user);\n    });\n  }\n\n}\n```\n\n**8.** Create the `SignUpComponent` component.\n\n```powershell\nng generate component sign-up --skip-tests=true\nCREATE src/app/sign-up/sign-up.component.scss (0 bytes)\nCREATE src/app/sign-up/sign-up.component.html (22 bytes)\nCREATE src/app/sign-up/sign-up.component.ts (279 bytes)\nUPDATE src/app/app.module.ts (638 bytes)\n```\n\n**9.** Change the `src/app/sign-up/sign-up.component.ts` file. Import the `Router` and `CognitoService` services and create the `signUp` and `confirmSignUp` methods as below.\n\n```typescript\nimport { Component } from '@angular/core';\nimport { Router } from '@angular/router';\n\nimport { IUser, CognitoService } from '../cognito.service';\n\n@Component({\n  selector: 'app-sign-up',\n  templateUrl: './sign-up.component.html',\n  styleUrls: ['./sign-up.component.scss'],\n})\nexport class SignUpComponent {\n\n  loading: boolean;\n  isConfirm: boolean;\n  user: IUser;\n\n  constructor(private router: Router,\n              private cognitoService: CognitoService) {\n    this.loading = false;\n    this.isConfirm = false;\n    this.user = {} as IUser;\n  }\n\n  public signUp(): void {\n    this.loading = true;\n    this.cognitoService.signUp(this.user)\n    .then(() =\u003e {\n      this.loading = false;\n      this.isConfirm = true;\n    }).catch(() =\u003e {\n      this.loading = false;\n    });\n  }\n\n  public confirmSignUp(): void {\n    this.loading = true;\n    this.cognitoService.confirmSignUp(this.user)\n    .then(() =\u003e {\n      this.router.navigate(['/signIn']);\n    }).catch(() =\u003e {\n      this.loading = false;\n    });\n  }\n\n}\n```\n\n**10.** Change the `src/app/sign-up/sign-up.component.html` file. Add the lines as below.\n\n```html\n\u003cdiv class=\"row justify-content-center my-5\"\u003e\n  \u003cdiv class=\"col-4\"\u003e\n    \u003cdiv class=\"card\"\u003e\n      \u003cdiv class=\"card-body\" *ngIf=\"!isConfirm\"\u003e\n        \u003cdiv class=\"row\"\u003e\n          \u003cdiv class=\"col mb-2\"\u003e\n            \u003clabel for=\"email\" class=\"form-label\"\u003eEmail:\u003c/label\u003e\n            \u003cinput type=\"email\" id=\"email\" name=\"email\" #email=\"ngModel\" [(ngModel)]=\"user.email\" class=\"form-control form-control-sm\"\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"row\"\u003e\n          \u003cdiv class=\"col mb-2\"\u003e\n            \u003clabel for=\"password\" class=\"form-label\"\u003ePassword:\u003c/label\u003e\n            \u003cdiv class=\"input-group input-group-sm\"\u003e\n              \u003cinput [type]=\"user.showPassword ? 'text' : 'password'\" id=\"password\" name=\"password\" #password=\"ngModel\" [(ngModel)]=\"user.password\" class=\"form-control form-control-sm\"\u003e\n              \u003cbutton type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"user.showPassword = !user.showPassword\"\u003e\n                \u003ci class=\"bi\" [ngClass]=\"{'bi-eye-fill': !user.showPassword, 'bi-eye-slash-fill': user.showPassword}\"\u003e\u003c/i\u003e\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"row\"\u003e\n          \u003cdiv class=\"col d-grid\"\u003e\n            \u003cbutton type=\"button\" (click)=\"signUp()\" class=\"btn btn-sm btn-success\" [disabled]=\"loading\"\u003e\n              \u003cspan class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\" *ngIf=\"loading\"\u003e\u003c/span\u003e\n              Sign up\n            \u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card-body\" *ngIf=\"isConfirm\"\u003e\n        \u003cdiv class=\"row\"\u003e\n          \u003cdiv class=\"col mb-2\"\u003e\n            \u003clabel for=\"code\" class=\"form-label\"\u003eCode:\u003c/label\u003e\n            \u003cinput type=\"text\" id=\"code\" name=\"code\" #code=\"ngModel\" [(ngModel)]=\"user.code\" class=\"form-control form-control-sm\"\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"row\"\u003e\n          \u003cdiv class=\"col d-grid\"\u003e\n            \u003cbutton type=\"button\" (click)=\"confirmSignUp()\" class=\"btn btn-sm btn-success\" [disabled]=\"loading\"\u003e\n              \u003cspan class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\" *ngIf=\"loading\"\u003e\u003c/span\u003e\n              Confirm\n            \u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**11.** Create the `SignInComponent` component.\n\n```powershell\nng generate component sign-in --skip-tests=true\nCREATE src/app/sign-in/sign-in.component.scss (0 bytes)\nCREATE src/app/sign-in/sign-in.component.html (22 bytes)\nCREATE src/app/sign-in/sign-in.component.ts (279 bytes)\nUPDATE src/app/app.module.ts (490 bytes)\n```\n\n**12.** Change the `src/app/sign-in/sign-in.component.ts` file. Import the `Router` and `CognitoService` service and create the `signIn` method as below.\n\n```typescript\nimport { Component } from '@angular/core';\nimport { Router } from '@angular/router';\n\nimport { IUser, CognitoService } from '../cognito.service';\n\n@Component({\n  selector: 'app-sign-in',\n  templateUrl: './sign-in.component.html',\n  styleUrls: ['./sign-in.component.scss'],\n})\nexport class SignInComponent {\n\n  loading: boolean;\n  user: IUser;\n\n  constructor(private router: Router,\n              private cognitoService: CognitoService) {\n    this.loading = false;\n    this.user = {} as IUser;\n  }\n\n  public signIn(): void {\n    this.loading = true;\n    this.cognitoService.signIn(this.user)\n    .then(() =\u003e {\n      this.router.navigate(['/profile']);\n    }).catch(() =\u003e {\n      this.loading = false;\n    });\n  }\n\n}\n```\n\n**13.** Change the `src/app/sign-in/sign-in.component.html` file. Add the lines as below.\n\n```html\n\u003cdiv class=\"row justify-content-center my-5\"\u003e\n  \u003cdiv class=\"col-4\"\u003e\n    \u003cdiv class=\"card\"\u003e\n      \u003cdiv class=\"card-body\"\u003e\n        \u003cdiv class=\"row\"\u003e\n          \u003cdiv class=\"col mb-2\"\u003e\n            \u003clabel for=\"email\" class=\"form-label\"\u003eEmail:\u003c/label\u003e\n            \u003cinput type=\"email\" id=\"email\" name=\"email\" #email=\"ngModel\" [(ngModel)]=\"user.email\" class=\"form-control form-control-sm\"\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"row\"\u003e\n          \u003cdiv class=\"col mb-2\"\u003e\n            \u003clabel for=\"password\" class=\"form-label\"\u003ePassword:\u003c/label\u003e\n            \u003cdiv class=\"input-group input-group-sm\"\u003e\n              \u003cinput [type]=\"user.showPassword ? 'text' : 'password'\" id=\"password\" name=\"password\" #password=\"ngModel\" [(ngModel)]=\"user.password\" class=\"form-control form-control-sm\"\u003e\n              \u003cbutton type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"user.showPassword = !user.showPassword\"\u003e\n                \u003ci class=\"bi\" [ngClass]=\"{'bi-eye-fill': !user.showPassword, 'bi-eye-slash-fill': user.showPassword}\"\u003e\u003c/i\u003e\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"row\"\u003e\n          \u003cdiv class=\"col d-grid\"\u003e\n            \u003cbutton type=\"button\" (click)=\"signIn()\" class=\"btn btn-sm btn-success\" [disabled]=\"loading\"\u003e\n              \u003cspan class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\" *ngIf=\"loading\"\u003e\u003c/span\u003e\n              Sign in\n            \u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**14.** Create the `ProfileComponent` component.\n\n```powershell\nng generate component profile --skip-tests=true\nCREATE src/app/profile/profile.component.scss (0 bytes)\nCREATE src/app/profile/profile.component.html (22 bytes)\nCREATE src/app/profile/profile.component.ts (280 bytes)\nUPDATE src/app/app.module.ts (726 bytes)\n```\n\n**15.** Change the `src/app/profile/profile.component.ts` file. Import the `CognitoService` service and create the `update` method as below.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\nimport { IUser, CognitoService } from '../cognito.service';\n\n@Component({\n  selector: 'app-profile',\n  templateUrl: './profile.component.html',\n  styleUrls: ['./profile.component.scss'],\n})\nexport class ProfileComponent implements OnInit {\n\n  loading: boolean;\n  user: IUser;\n\n  constructor(private cognitoService: CognitoService) {\n    this.loading = false;\n    this.user = {} as IUser;\n  }\n\n  public ngOnInit(): void {\n    this.cognitoService.getUser()\n    .then((user: any) =\u003e {\n      this.user = user.attributes;\n    });\n  }\n\n  public update(): void {\n    this.loading = true;\n\n    this.cognitoService.updateUser(this.user)\n    .then(() =\u003e {\n      this.loading = false;\n    }).catch(() =\u003e {\n      this.loading = false;\n    });\n  }\n\n}\n```\n\n**16.** Change the `src/app/profile/profile.component.html` file. Add the lines as below.\n\n```html\n\u003cdiv class=\"row justify-content-center my-5\"\u003e\n  \u003cdiv class=\"col-4\"\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"col mb-2\"\u003e\n        \u003clabel for=\"email\" class=\"form-label\"\u003eEmail:\u003c/label\u003e\n        \u003cinput type=\"email\" id=\"email\" name=\"email\" #email=\"ngModel\" [ngModel]=\"user.email\" disabled class=\"form-control form-control-sm\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"col mb-2\"\u003e\n        \u003clabel for=\"name\" class=\"form-label\"\u003eName:\u003c/label\u003e\n        \u003cinput type=\"text\" id=\"name\" name=\"name\" #name=\"ngModel\" [(ngModel)]=\"user.name\" class=\"form-control form-control-sm\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"col d-grid\"\u003e\n        \u003cbutton type=\"button\" (click)=\"update()\" class=\"btn btn-sm btn-dark\" [disabled]=\"loading\"\u003e\n          \u003cspan class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\" *ngIf=\"loading\"\u003e\u003c/span\u003e\n          Update\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**17.** Change the `src/app/app.component.ts` file. Import the `Router` and `CognitoService` services and create the `isAuthenticated` and `signOut` methods as below.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n\nimport { CognitoService } from './cognito.service';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n\n  isAuthenticated: boolean;\n\n  constructor(private router: Router,\n              private cognitoService: CognitoService) {\n    this.isAuthenticated = false;\n  }\n\n  public ngOnInit(): void {\n    this.cognitoService.isAuthenticated()\n    .then((success: boolean) =\u003e {\n      this.isAuthenticated = success;\n    });\n  }\n\n  public signOut(): void {\n    this.cognitoService.signOut()\n    .then(() =\u003e {\n      this.router.navigate(['/signIn']);\n    });\n  }\n\n}\n```\n\n**18.** Change the `src/app/app.component.html` file and add the menu as below.\n\n```html\n\u003cnav class=\"navbar navbar-expand-sm navbar-light bg-light\"\u003e\n  \u003cdiv class=\"container-fluid\"\u003e\n    \u003ca class=\"navbar-brand\" href=\"#\"\u003eAngular Amazon Cognito\u003c/a\u003e\n\n    \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n      \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n    \u003c/button\u003e\n\n    \u003cdiv id=\"navbarContent\" class=\"collapse navbar-collapse\"\u003e\n      \u003cul class=\"navbar-nav me-auto mb-2 mb-lg-0\"\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link\" routerLink=\"/signUp\" routerLinkActive=\"active\" *ngIf=\"!isAuthenticated\"\u003eSign up\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link\" routerLink=\"/signIn\" routerLinkActive=\"active\" *ngIf=\"!isAuthenticated\"\u003eSign in\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link\" routerLink=\"/profile\" routerLinkActive=\"active\" *ngIf=\"isAuthenticated\"\u003eProfile\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"nav-item\"\u003e\n          \u003ca class=\"nav-link\" routerLink=\"\" (click)=\"signOut()\" *ngIf=\"isAuthenticated\"\u003eSign out\u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/nav\u003e\n\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\n**19.** Change the `src/app/app-routing.module.ts` file and add the routes as below.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\n\nimport { ProfileComponent } from './profile/profile.component';\nimport { SignInComponent } from './sign-in/sign-in.component';\nimport { SignUpComponent } from './sign-up/sign-up.component';\n\nconst routes: Routes = [\n  {\n    path: '',\n    redirectTo: 'signIn',\n    pathMatch: 'full',\n  },\n  {\n    path: 'profile',\n    component: ProfileComponent,\n  },\n  {\n    path: 'signIn',\n    component: SignInComponent,\n  },\n  {\n    path: 'signUp',\n    component: SignUpComponent,\n  },\n  {\n    path: '**',\n    redirectTo: 'signIn',\n  },\n];\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes),\n  ],\n  exports: [\n    RouterModule,\n  ],\n})\nexport class AppRoutingModule {\n}\n```\n\n**20.** Change the `src/app/app.module.ts` file. Import the `FormsModule` module, the `ProfileComponent`, `SignInComponent`, `SignUpComponent` components as below.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppRoutingModule } from './app-routing.module';\n\nimport { AppComponent } from './app.component';\nimport { ProfileComponent } from './profile/profile.component';\nimport { SignInComponent } from './sign-in/sign-in.component';\nimport { SignUpComponent } from './sign-up/sign-up.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    ProfileComponent,\n    SignInComponent,\n    SignUpComponent,\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    AppRoutingModule,\n  ],\n  providers: [\n  ],\n  bootstrap: [\n    AppComponent,\n  ],\n})\nexport class AppModule {\n}\n```\n\n**21.** Run the application with the command below.\n\n```powershell\nnpm start\n\n\u003e angular-cognito@1.0.0 start\n\u003e ng serve\n\n✔ Browser application bundle generation complete.\n\nInitial Chunk Files   | Names         |  Raw Size\nvendor.js             | vendor        |   9.98 MB | \nstyles.css, styles.js | styles        | 486.91 kB | \npolyfills.js          | polyfills     | 339.28 kB | \nscripts.js            | scripts       |  76.33 kB | \nmain.js               | main          |  47.13 kB | \nruntime.js            | runtime       |   6.87 kB | \n\n                      | Initial Total |  10.91 MB\n\nBuild at: 2022-01-18T16:33:13.971Z - Hash: ce7a03498c95d4f5 - Time: 25230ms\n\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n\n\n✔ Compiled successfully.\n```\n\n**Note:**\n\n* It may display some warnings when running the application. \n\n**22.** Ready! Access the URL `http://localhost:4200/` and check if the application is working. See the application working on [GitHub Pages](https://rodrigokamada.github.io/angular-cognito/) and [Stackblitz](https://stackblitz.com/edit/angular14-cognito).\n\n![Angular Amazon Cognito](https://res.cloudinary.com/rodrigokamada/image/upload/v1642523631/Blog/angular-cognito/angular-cognito.png)\n\n\n\n### Testing the application\n\n**1.** Let's test the application. Access the URL `http://localhost:4200/`, fill in the field *Email*, *Password* and click on the button *Sign up*.\n\n![Application - Sign up](https://res.cloudinary.com/rodrigokamada/image/upload/v1642530554/Blog/angular-cognito/application-step1.png)\n\n**2.** Check that the user was created in Amazon Cognito.\n\n![Application - User unconfirmed](https://res.cloudinary.com/rodrigokamada/image/upload/v1642532413/Blog/angular-cognito/application-step2.png)\n\n**3.** Open the email with the subject *Your verification code*  and copy the code generated, in my case, the code `308386` was generated.\n\n![Application - Your verification code](https://res.cloudinary.com/rodrigokamada/image/upload/v1642539595/Blog/angular-cognito/application-step3.png)\n\n**4.** Fill in the field *Code* with the code copied and click on the button *Confirm*.\n\n![Application - Confirm code](https://res.cloudinary.com/rodrigokamada/image/upload/v1642539853/Blog/angular-cognito/application-step4.png)\n\n**5.** Check that the user was confirmed in Amazon Cognito.\n\n![Application - User confirmed](https://res.cloudinary.com/rodrigokamada/image/upload/v1642540005/Blog/angular-cognito/application-step5.png)\n\n**6.** Fill in the field *Email*, *Password* and click on the button *Sign in*.\n\n![Application - Sign in](https://res.cloudinary.com/rodrigokamada/image/upload/v1642540122/Blog/angular-cognito/application-step6.png)\n\n**7.** Fill in the field *Name* and click on the button *Update*.\n\n![Application - Update user](https://res.cloudinary.com/rodrigokamada/image/upload/v1642540298/Blog/angular-cognito/application-step7.png)\n\n**8.** Click on the user link created in Amazon Cognito.\n\n![Application - Users](https://res.cloudinary.com/rodrigokamada/image/upload/v1642540443/Blog/angular-cognito/application-step8.png)\n\n**9.** Check that the user name was updated in Amazon Cognito.\n\n![Application - User updated](https://res.cloudinary.com/rodrigokamada/image/upload/v1642540632/Blog/angular-cognito/application-step9.png)\n\n**10.** Ready! We test the user sign in, sign up and update.\n\n\n\n## Cloning the application\n\n**1.** Clone the repository.\n\n```powershell\ngit clone git@github.com:rodrigokamada/angular-amazon-cognito.git\n```\n\n**2.** Install the dependencies.\n\n```powershell\nnpm ci\n```\n\n**3.** Run the application.\n\n```powershell\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-amazon-cognito","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigokamada%2Fangular-amazon-cognito","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-amazon-cognito/lists"}