Authentication Using Okta In Angular And ASP.NET CORE Web API 5.0

In this blog, you will learn about authentication using Okta in Angular and ASP.NET CORE Web API 5.0 to validate the users.

Prerequisites

• Okta Account.
• Know the basics of Angular.
• Sample project or application that you want to add authentication to.
• Know the basics of building Asp.Net core web API applications.

Register a SPA Application in Okta

You need to follow the below details,

Enable Trusted Origins

To enable trusted origins, you need to add your base URL in the below sections.

To install the Okta-related file from NPM

npm install @okta/okta-angular

Below are the main settings,

You need to put your client id and Okta domain information. For that setting, we have used a separate file and put all those details in that config file.

export default {
    config: {
        clientId: '0oa1wt3aznmXLKmtR5d7',
        issuer: 'https://dev-2209333.okta.com/oauth2/default',
        redirectUri: 'https://localhost:4200/login/callback',
        scopes: ['openid', 'profile', 'email'],
        pkce: true,
    },
    resourceServer: {
        backEndUlr: 'https://localhost:44313/api/Messages',
    },
};

Now utilize those settings in the app.Madule.ts file and also define the routing details with Okta guards.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { Routes, RouterModule } from '@angular/router';
import {OKTA_CONFIG,OktaAuthGuard,OktaAuthModule,OktaCallbackComponent,} from '@okta/okta-angular';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MessagesComponent } from './messages/messages.component';
import { ProfileComponent } from './profile/profile.component';
import configInfo from './app.config';
const appRoutes: Routes = [{
    path: '',
    component: HomeComponent,
}, {
    path: 'home/login',
    component: HomeComponent,
}, {
    path: 'login/callback',
    component: OktaCallbackComponent,
}, {
    path: 'user/profile',
    component: ProfileComponent,
    canActivate: [OktaAuthGuard],
}, {
    path: 'backEndApi/call',
    component: MessagesComponent,
    canActivate: [OktaAuthGuard],
}, ];
@NgModule({
    declarations: [AppComponent, HomeComponent, ProfileComponent, MessagesComponent, ],
    imports: [BrowserModule, HttpClientModule, OktaAuthModule,
        RouterModule.forRoot(appRoutes, {
            relativeLinkResolution: 'legacy'
        }),
    ],
    providers: [{
        provide: OKTA_CONFIG,
        useValue: configInfo.config
    }, ],
    bootstrap: [AppComponent],
})
export class AppModule {}

How to implement the login and logout feature?

For login and logout, you can create your login HTML in the app.componets.html file and implement the login and logout as below. You check if a user is authenticated or not. Then initiate login.

<div class="ui inverted top fixed menu">
  <div class="ui container-flud">
    <a class="item btn btn-primary ml-1" *ngIf="!isAuthenticated" (click)="login()">Login</a>
    <a id="messages-button" class="item btn btn-secondary ml-1" *ngIf="isAuthenticated" routerLink="/backEndApi/call">
      <i aria-hidden="true" class="mail outline icon"></i>Messages </a>
    <a id="profile-button" class="item btn btn-warning ml-1" *ngIf="isAuthenticated" routerLink="/user/profile">Profile</a>
    <a id="logout-button" class="item btn btn-success ml-1" *ngIf="isAuthenticated" (click)="logout()">Logout</a>
  </div>
</div>
<div class="ui text container" style="margin-top: 7em;">
  <router-outlet></router-outlet>
</div>
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { OktaAuthService } from '@okta/okta-angular';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'app';
    isAuthenticated: boolean;
    baseUri: string;
    constructor(public oktaAuth: OktaAuthService) {
        this.oktaAuth.$authenticationState.subscribe(isAuthenticated => this.isAuthenticated = isAuthenticated);
    }
    async ngOnInit() {
        this.isAuthenticated = await this.oktaAuth.isAuthenticated();
    }
    async login() {
        await this.oktaAuth.signInWithRedirect({
            originalUri: '/'
        });
    }
    async logout() {
        await this.oktaAuth.signOut();
    }
}

Okta Call back settings from register applications

Whatever you set the call back URL in application registration time, you need to define those details in routing sections.

Get the user claims information

Once the user logged in successfully you can call the getUser() method and get user details.

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
interface Claim {
    claim: string;
    value: string;
}
@Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
    idToken: any;
    claims: Array < Claim > ;
    constructor(public oktaAuth: OktaAuthService) {}
    async ngOnInit() {
        const userClaims = await this.oktaAuth.getUser();
        this.claims = Object.entries(userClaims).map(entry => ({
            claim: entry[0],
            value: entry[1]
        }));
    }
}
<h1 class="ui header">
  <i aria-hidden="true" class="drivers license outline icon"></i> My User Profile (ID Token Claims)
</h1>
<table class="ui table">
  <thead>
    <tr>
      <th>Claim</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let claim of claims">
      <td>{{claim.claim}}</td>
      <td id="claim-{{claim.claim}}">{{claim.value}}</td>
    </tr>
  </tbody>
</table>

Use the access token to call the back-end API.

In Single page applications if we want to communicate with API we need to set access token information. On your front-end (this SPA), make sure that you place the access token in the HTTP Authorization header of outgoing requests using this format:

Authorization: Bearer ${token}

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
import { HttpClient } from '@angular/common/http';
import sampleConfig from '../app.config';
interface Message {
    date: string;
    text: string;
}
@Component({
    selector: 'app-messages',
    templateUrl: './messages.component.html',
    styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
    failed: Boolean;
    messages: Array < Message > [];
    constructor(public oktaAuth: OktaAuthService, private http: HttpClient) {
        this.messages = [];
    }
    async ngOnInit() {
        const accessToken = this.oktaAuth.getAccessToken();
        this.http.get(sampleConfig.resourceServer.backEndUlr, {
            headers: {
                Authorization: 'Bearer ' + accessToken,
            }
        }).subscribe((data: any) => {
            this.messages = data;
        }, (err) => {
            console.error(err);
            this.failed = true;
        });
    }
}

Web API Changes

Then redirect to the Okta login page and click on the login button. Users will be redirected to the Okta widget login page. You need to put your credentials and hit on login button.

After successful login user will be redirected to the main application page. Here you need to note as per your setting in okta you will be redirected to that page only.

Now the authentication will happen successfully. Now you need to communicate with backend API for that you have to do some changes in the startup’s file.

After creating a testing controller with Authorize attribute to validate the user, follow the below setups.

Summary

With help of all settings, you can secure your app with Okta.