Angular 9 Application Authentication Using Okta

This tutorial help to add okta with angular 9 application, We will authenticate the app with OKTA using angular 9. We will use a simple Okta login button which will redirect to the Okta login page and redirect to angular 9 home page.

I will use Okta Auth SDK builds on top of Okta’s Authentication API and OAuth 2.0 API to enable you to create a fully branded sign-in experience using JavaScript.

Angularjs is very most popular front-end language, After angular 2, they are focusing on building reusable components in the application, which help you decouple the various concerns in your application. Angular CLI makes it easy to scaffold new project, components etc.

Why We Use OKTa for Auth

Okta is based on OpenID Connect (OIDC), which is built on top of the OAuth 2.0 protocol. Okta help to create, edit and securely store user information data using API. You can validate and connect one or many applications using them. Its helps to easy and secure user management and secure data.

How to create OpenID Account in OKTA

You need to register or create an okta account from Official Website. Now You need to click the Applications menu link and click on the Add Application button, Please select SPA type application and click Next. On the next page, specify http://localhost:4200 as a Base URI, Login redirects URI once the user authenticates successfully.

I am extending my previous Angular 4/5 Using Bootstrap Template tutorials, We have created layout and added a login component. We will add here Okta authentication.

We will use okta-angular module, okta-angular is an Angular (4+) wrapper around Okta Auth JS, that builds on top of Okta’s OpenID Connect API. So we need to install using npm into the angular 5 application:

npm install @okta/okta-angular --save

We will create a login event on the okta login button under login.component.html file.

Attached login method on-click event of a button, We are displaying the login button if a user is not authenticated using Okta.

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

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

  isAuthenticated: boolean;
  
  userName: string;

  constructor(public oktaAuth: OktaAuthService) {
    this.oktaAuth.$authenticationState.subscribe(isAuthenticated => this.isAuthenticated = isAuthenticated)
  }

  async ngOnInit() {
  	this.isAuthenticated = await this.oktaAuth.isAuthenticated();
    if (this.isAuthenticated) {
      const userClaims = await this.oktaAuth.getUser();
      this.userName = userClaims.name;
    }
  }
  logout() {
    this.oktaAuth.logout('/');

  }
  login() {
    this.oktaAuth.loginRedirect('/home');
  }

}

We have created isAuthenticated and userName variable, We are validating user is logged-in into OKTA or not and set value of isAuthenticated. We are setting the username on the successfully authenticated user:
this.userName = userClaims.name;

We will create a logout view into header.component.html file.

<div class="col-md-2"><nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" style="color: white; cursor: pointer;">Logout</a></li>
</ul>
</nav></div>

We will create logout() method into header.component.ts file.

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

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

  isAuthenticated: boolean;
  constructor(public oktaAuth: OktaAuthService) {
    this.oktaAuth.$authenticationState.subscribe(isAuthenticated => this.isAuthenticated = isAuthenticated)
  }
  async ngOnInit() {
    this.isAuthenticated = await this.oktaAuth.isAuthenticated();
  }
  logout() {
    this.oktaAuth.logout('/');
  }

}

We will change app.routes.ts file and import OktaAuthGuard, OktaAuthModule and OktaCallbackComponent into this file, We will add a callback method to redirect routes for okta.

import {
  OktaAuthGuard,
  OktaAuthModule,
  OktaCallbackComponent,
} from '@okta/okta-angular';
{
    path: 'implicit/callback',
    component: OktaCallbackComponent
  }

We will create .okta.config.ts into config/ folder and added all okta configuration parameters.

export default {
  oidc: {
    clientId: 'clientID',
    issuer: 'https://dev-772550.oktapreview.com/oauth2/default',
    redirectUri: 'http://localhost:4200/implicit/callback',
    scope: 'openid profile email'
  }
};

We will import this file into app.module.ts file with OktaAuthModule into app.module.ts file:

import {
  OktaAuthModule
} from '@okta/okta-angular';

import oktaConfig from './configs/.okta.config';

const oktaConfigData = Object.assign({
  onAuthRequired: ({oktaAuth, router}) => {
   
    router.navigate(['/login']);
  }
}, oktaConfig.oidc);

imports: [
    OktaAuthModule.initAuth(oktaConfigData)
  ]

We have passed OKTA configuration params to OktaAuthModule module.