Angular authentication with AWS Amplify

In this tutorial, we are going to implement a full fleged serverless Angular authentication using AWS amplify and Angular. In here, user can signup, verifying their email, sign in, and sign out. Here we will use,

1. Use pre-built UI components

2. Call Authentication APIs manually

Prerequisites

Node.js

To Continue with this tutorial, you should have installed Node.js in your pc. If you are still not installed Node.js in your machine you can download it from here.

NPM

To Continue with this tutorial, you should have installed npm in your pc. If you are still not installed npm in your machine you can configure it from here.

AWS Account

There is no need to pay for AWS because we can implement our application using AWS free tier. You can obtain a AWS account from here.

Configure AWS

Before moving to our coding part, we need toinstall the Amplify CLI, to do it simply run the following command:

npm install -g @aws-amplify/cli

After you installed the CLI, you need to create IAM user to create and manage AWS resources. You can create an IAM user by your terminal by simply running:

aws configure 

After running this command:

This will open your AWS console and you need to log in to your account. Then, you need to press enter in the terminal to continue the process.

Next, it will ask you to specify the AWS region: (choose it acording to your region)

Next, you need to provide the username of the new IAM user:(you can provide any name according to your preference)

After clicking the enter, it will redirect you to the IAM management console. Then you can give permission to this user according to your preferences. After that you can head over to the terminal and hit enter to continue.

Next, it will ask:

accessKeyId: YOUR_ACCESS_KEY_ID

secretAccessKey: YOUR_SECRET_ACCESS_KEY

(You can grab these keys from your IAM user.)

Next, it will ask for a profile name: (default)

Now you have successfully set up the new user.

Creating the Angular Project

To create a new Angular project in our local machine, you should have installed AngularCLI in your machine globally. If not you can simply run this command to install it globally:

npm install -g @angular/cli

To create new Angular project:

ng new amplify-app

After successfully created the Angular app, you should navigate to the project directory by running below command:

cd amplify-app

Now, open your project using your favourite text editor.

Angular 6+ Support

The newest versions of Angular (6+) do not include shims for ‘global’ or ‘process’ as provided in previous versions. To recreate them add the following code to your src/polyfills.ts file:

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

Initiate the Amplify project

Now we have already setup our basic Angular application and now we need to set up Amplify for this app. To do it run below command in your terminal:

amplify init

This command take you trough several questions like,

Choose your default editor: (choose the code editor you wish to use.)

Type of app that you’re using: JavaScript.

JavaScript framework are you using: Angular.

Source directory path: src

Destination directory path: dist/amplify-app

Build command: npm run-script build

Start command: ng serve

Do you want to use an AWS profile? Yes

lease choose the profile you want to use: default.

Install Amplify and Angular dependencies

Inside you project directory run below command to install required Angular and Amplify dependencies

npm install --save aws-amplify @aws-amplify/ui-angular

This @aws-amplify/ui-angular package is a set of Angular components and an Angular provider which helps integrate your application with the AWS-Amplify library.

Create authentication service in Angular

We start it from scratch. So run the following command in your project’s root folder:

amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings?  No, I am done.

To deploy the service, run the push command:

amplify push

Now, the authentication service has been deployed and we can start using it.

Set AWS Amplify Config to the App

In your app’s main.ts file, import and load the configuration file:

import { Amplify } from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);
Auth.configure(awsconfig);

Import AWS Amplify UI module

In your 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 { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AmplifyUIAngularModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, replace the app.component.ts with following code:

import { Component, ChangeDetectorRef } from '@angular/core';
import { onAuthUIStateChange, CognitoUserInterface, AuthState } from '@aws-amplify/ui-components';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'amplify-app';
  user: CognitoUserInterface | undefined;
  authState: AuthState;

  constructor(private ref: ChangeDetectorRef) {}

  ngOnInit() {
    onAuthUIStateChange((authState, authData) => {
      this.authState = authState;
      this.user = authData as CognitoUserInterface;
      this.ref.detectChanges();
    })
  }

  ngOnDestroy() {
    return onAuthUIStateChange;
  }
}

Finally, in your app.component.html add following code:

<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>

<div *ngIf="authState === 'signedin' && user" class="App">
    <amplify-sign-out></amplify-sign-out>
    <div>Hello, {{user.username}}</div>  
</div>

To more options you can refer https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular#customization

You can access to your user pool by following path (services->Security, Identity, & Compliance->Cognito)

You can access to your amplify app by following path (services->front-end Web & Mobile->AWS Amplify)

Now, you can check our application by running:

ng serve 

Conclusion

In this tutorial, we implemented Angular authentication using AWS Amplify. If you have any issue regarding this tutorial, mention your issue in comment section or reach me through my E-mail. You can obtain complete source code for this tutorial from this GitHub repository.