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.

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

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

$ 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

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

  • Login Page
  • Dashboard Page
  • Navbar
ng g component pages/login --no-specng g component pages/dashboard --no-specng 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 👏.

Writes on Big Data, AWS & Backend technologies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store