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();
    }
}