ng new auth-app

Angular Routing: Yes

cd auth-app

ng g c login

ng g c home

ng g s cognito

> npm install --save amazon-cognito-identity-js

Adicionales, que son necesarios para el ejemplo, pero no necesariamente son requeridos

Revisar la plantilla del login que modulos utiliza

npm i --save @material/button

npm i -–save rxjs-compat

npm i -–save @angular/cdk

npm i –-save @angular/material (confirmar si es necesario), instalarlo al final

Environment.ts

export const environment = {
  production: false,
  cognitoPool: {
    region: 'us-west-2',
    UserPoolId: "us-west-2_1EVHvk5Yf",
    ClientId: "77ul65ejg4slvi335cvjicqlaj"
  }
};

environment.prod.ts

export const environment = {
  production: true,
  cognitoPool: {
    region: 'us-west-2',
    UserPoolId: "us-west-2_1EVHvk5Yf",
    ClientId: "77ul65ejg4slvi335cvjicqlaj"
  }
};
Cognito.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { environment } from "./../environments/environment";
import { Observable, Subject } from "rxjs";
import "rxjs/Rx";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";

import {   CognitoUserPool,  CognitoUser, AuthenticationDetails } from 'amazon-cognito-
identity-js';

@Injectable({
  providedIn: 'root'
})
export class CognitoService {

  private _accessToken: string = "";
  private _userloggedIn: boolean = false;
  private _userDetails: any = {};

  constructor(public http: HttpClient) {}

  authenticateCongnito(data): Observable<any> {
    // Defining an rxjs subject so as to emit after recieving the response
    let authResult = new Subject<any>();
    // Add the User details to amazon cognito sdk
    const CogAuthData = new AuthenticationDetails(data);
    // Create a user pool with cliend id and secret key
    const CogUserPool = new CognitoUserPool(environment.cognitoPool);
    // Instantiate an cognito user with details and pool information
    const CogUser = new CognitoUser({
      Username: data.Username,
      Pool: CogUserPool
    });
    // Authenticate the cognito user with information
    CogUser.authenticateUser(CogAuthData, {
      onSuccess: result => {
        // on success send it to subject so that it will emit the success
        authResult.next(result);
      },
      onFailure: err => {
        // on failure send it to suvject so that will emit the error
        authResult.error(err);
      }
    });
    // Handling the final Observable 
    return authResult.asObservable();
  }
  // Set accesstoken data
  set accessToken(value: string) {
    this._accessToken = value;
  }
  // set Logged in user data
  set userLoggedIn(value: boolean) {
    this._userloggedIn = value;
  }
  // get user Logged in data
  get userLoggedIn(): boolean {
    return this._userloggedIn;
  }
  // set user details
  set UserDetails(value: any) {
    this._userDetails = value;
  }
  // set user Details
  get UserDetails(): any {
    return this._userDetails;
  }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

import { ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatButtonModule } from "@angular/material/button";
import { MatInputModule } from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule, // Angular Reactive Forms
    MatButtonModule, // Material Design Button Module
    MatInputModule // Material Design Input Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

auth-app/src/app/app.component.html

<router-outlet></router-outlet>
auth-app/src/app/login/login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { Router } from '@angular/router';

import { CognitoService } from '../cognito.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  public loginForm: FormGroup;
  
  constructor(
    private fb: FormBuilder,
    public authService: CognitoService,
    public router: Router
  ) {}

  ngOnInit() {
    this.createLoginForm();
  }
  /**
   * @method createLogigForm creating an angular reactive form field with validations
   */
  private createLoginForm(): void {
    this.loginForm = this.fb.group({
      username: [
        null,
        Validators.compose([Validators.required, Validators.minLength(5)])
      ],
      password: [null, Validators.required]
    });
  }

  public OnSubmit(): void {
    /**
     * @method AuthService.authenticateCongnito calling the cognito authentication 
     * @param {string} username
     * @param {string} password
     * @return {object} With accesstoken and payload
     */
    this.authService
      .authenticateCongnito({
        Username: this.loginForm.value.username,
        Password: this.loginForm.value.password
      })
      .subscribe(result => {
        // verify the result having the accessToken and payload information
        if (result && result.accessToken) {
          // After information is received send it to angular setters in services and c
an utlised
          this.authService.accessToken = result.accessToken.jwtToken;
          this.authService.userLoggedIn = true;
          this.authService.UserDetails = {
            username: result.accessToken.payload.username
          };
          // Route to home screen after success
          this.router.navigate(["home"]);
        }
      });
  }

auth-app/src/app/login/login.component.html

<div class="login-body">
    <div class="login-container col-4">
        <h2 class="text-center">Auth Angular</h2>
        <form [formGroup]="loginForm" (ngSubmit)="OnSubmit()" class="login-form">
            <div class="form-group">
                <mat-form-field class="content-fit">
                    <input matInput formControlName="username" placeholder="Username" /
>
                </mat-form-field>
            </div>
            <div class="form-group">
                <mat-form-field class="content-fit">
                    <input matInput placeholder="Password" formControlName="password" t
ype="password" />
                </mat-form-field>
            </div>
            <div class="form-group">
                <button type="submit"   mat-raised-button color="primary">Submit</
button>
            </div>
        </form>
    </div>
</div>

auth-app/src/app/home/home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

In auth-app/src/app/home/home.component.html

<p>home works!</p>

In auth-app/src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
  { path:'', component: LoginComponent },
  { path:'home', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

index.html

<script>
  if(global === undefined) {
    var global = window;
  }
</script>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Referencial:

package.json

  "name": "test",
  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "~9.1.11",

    "@angular/cdk": "^9.2.4",

    "@angular/common": "~9.1.11",

    "@angular/compiler": "~9.1.11",

    "@angular/core": "~9.1.11",

    "@angular/forms": "~9.1.11",

    "@angular/material": "^9.2.4",

    "@angular/platform-browser": "~9.1.11",

    "@angular/platform-browser-dynamic": "~9.1.11",

    "@angular/router": "~9.1.11",

    "@material/button": "^6.0.0",

    "amazon-cognito-identity-js": "^4.3.2",

    "aws-sdk": "^2.701.0",

    "rxjs": "~6.5.4",

    "rxjs-compat": "^6.5.5",

    "tslib": "^1.10.0",

    "zone.js": "~0.10.2"

  },
  "devDependencies": {

    "@angular-devkit/build-angular": "~0.901.9",

    "@angular/cli": "~9.1.9",

    "@angular/compiler-cli": "~9.1.11",

    "@types/node": "^12.11.1",

    "@types/jasmine": "~3.5.0",

    "@types/jasminewd2": "~2.0.3",

    "codelyzer": "^5.1.2",

    "jasmine-core": "~3.5.0",

    "jasmine-spec-reporter": "~4.2.1",

    "karma": "~5.0.0",

    "karma-chrome-launcher": "~3.1.0",

    "karma-coverage-istanbul-reporter": "~2.1.0",

    "karma-jasmine": "~3.0.1",

    "karma-jasmine-html-reporter": "^1.4.2",

    "protractor": "~7.0.0",

    "ts-node": "~8.3.0",

    "tslint": "~6.1.0",

    "typescript": "~3.8.3"

  }