AWS: Cognito Hosted UI Login with Amplify in Angular 7

Amplify + Angular

Amplify is the official js library from AWS which supports Cognito. Let's get started with a simple Angular project which uses hosted UI for Authentication and Authorization.

This series is split into sub-modules.

1. Cognito Hosted UI with Amplify in Angular 7
2. Configuring Cognito User pool + Federated Identity (Okta)
3. Resource Server with Cognito
4. Deploying your AngularApp in Cloudfront with SSL

Download:

Please fork the complete project from my Github.

Angular 7 App

Below is the project structure.

Project Structure

Setting up bootstrap in Angular 7

1. Install the below modules in angular (including ngx-spinner)

npm install -save bootstrap
npm install -save popper.js
npm install --save jquery
npm install -save ngx-spinner

2. Include the .css and .js in angular.json

include the details in angular.json

3. Run the project using the below command. If everything goes well, you should have bootstrap installed in your project.

npm serve -o

Setting up Amplify in Angular

1. Install aws-amplify and aws-amplify-angular npm packages into your Angular app.

$ npm install aws-amplify aws-amplify-angular

2. Add the following to your polyfills.ts

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

3. Update your src/tsconfig.app.json:

"compilerOptions": {
    "types" : ["node"]
}

Configuring Amplify in Angular

1. Create a aws-exports.js file inside /src.

2. Import the configuration file and load it in main.ts

3. Include Amplify in app.modules.ts.

We have configured amplify in our Angular App.

Using Amplify

1. We will create the UI elements.

• Login Page
• Dashboard Page
• Navbar

ng g component pages/login --no-spec
ng g component pages/dashboard --no-spec
ng g component components/nav-bar --no-spec

a. Login Page

pages/login.component.html

pages/login.component.ts

Note: We have set custom provider(okta) in federatedSign().

b. Dashboard Page

pages/dashboard.component.html

pages/dashboard.component.ts

c. Navbar Component

components/nav-bar.component.html

components/nav-bar.component.ts

Note:

Auth.signOut(), calls the logout URL of Cognito. You can check that in the browser, network calls.

2. Now we will create the interceptors.

a. JWT Interceptor

Note:

from(Auth.currentSession()) // Promise --> Observable

b. Error Interceptor

c. Interceptor Provider

3. Create Auth Guard & Routing

• app-routing-module.ts

• auth.gaurd.ts

4. We will create services

• services/rest-api/rest-api.service.ts

• services/dashboard/dashboard.service.ts

5. Setting environment properties

Note: Amplify receives 3 tokens from Cognito

• Refresh Token (Used to get a new Access Token, upon expiry)
• Identity Token (Used in your frontend, for showing the Name, Email etc)
• Access Token (Sent to resource server along with Request)

Access Token expiry is set to 1 hour by default.

We can set the expiry fo Refresh token in Cognito Settings

Amplify uses the refresh token, and automatically renews your Acess Token.

We have now completed the usage of Amplify in Angular App. In the next series, I will walk you through AWS Cognito configuration.

Found it Interesting?
Please show your support by 👏.