Preface

This installment is part of our in-depth series on developing a Talent Management SPA using Angular 17 and .NET Core 8. For an overview of the series and access to previous entries, please consult the table of contents, which is structured to assist you through each phase of creating a robust Talent Management SPA.

SPA Architecture Overview

The architecture of our Talent Management demo application is based on the Clients, API Resources, and Token Service (CAT) model, which emphasizes strong integration and loose coupling. The components interact via HTTP to exchange and validate JSON Web Tokens (JWT).

Components Interaction:

• Clients: The Angular app utilizes the OpenID Connect (OIDC) protocol to request JWTs from the Token Service. The obtained JWT is included in the header for API requests.
• API Resources: The .NET Core REST API decodes the JWT to verify the client’s identity and authorize access to requested resources.
• Token Service: The Duende IdentityServer generates JWTs for the Angular client and validates them when requested by the REST API.

In this post, we'll delve into the intricate relationship between Angular 17 and the Duende IdentityServer 6. We will analyze the source code responsible for the login and token refresh processes, enhancing your understanding of the system. The demo project includes ready-to-use code snippets that you can easily adapt for your own projects!

Prerequisites

• Understanding Token Service concepts and technologies (e.g., Duende IdentityServer).
• Familiarity with the "Building a Talent Management SPA with Angular 17 and .NET Core 8" tutorial series.

Acknowledgments

This tutorial was developed utilizing tools and methodologies from several high-quality open-source projects and resources, including:

• manfredsteyer/angular-oauth2-oidc: A popular NPM package with over 1.7K stars on GitHub, designed for OIDC and OAuth 2.0 support in Angular.
• DuendeSoftware/IdentityServer: The leading open-source solution for securing enterprise SPA/.NET WebAPI by Duende Software.
• Duende.IdentityServer4.Admin: An excellent Admin UI for Duende IdentityServer and ASP.NET Core Identity by Jan Škoruba, ideal for learning high-quality C# coding.

Implementation Steps:

1. Install the angular-oauth2-oidc library via npm.
2. Configure the library with necessary settings such as client ID and redirect URI.
3. Create a service for handling authentication and access token management using the library's API.
4. Implement the login and logout functionalities in your application by invoking the appropriate service methods.

In summary, the angular-oauth2-oidc library significantly simplifies the implementation of user authentication and login in Angular applications. With its user-friendly API, support for popular providers, and built-in management for common authentication challenges, it’s an excellent choice for developers seeking to add user authentication to their applications.

Key Configuration Settings:

• issuer: The URL of the IdentityServer's issuer, which is essential for obtaining the discovery document containing necessary metadata.
• clientId: The registered client ID with IdentityServer, identifying the Angular application.
• redirectUri: The URI to which IdentityServer will redirect the user post-authentication.
• scope: The scopes requested by the Angular application, determining the level of access to user resources.
• silentRefreshRedirectUri: The URI for silent refreshes of the access token, typically an HTML page loaded as an iframe.
• sessionChecksEnabled: Enabling session checks ensures the user remains authenticated before making API calls.

By defining these settings, the Angular application can securely communicate with IdentityServer and acquire access tokens for protected APIs.

Source Code Walkthrough

The configuration settings for Angular's interaction with IdentityServer are located in the auth-config.ts file. Update this file to point to your IdentityServer. Below is a sample code snippet:

import { AuthConfig } from 'angular-oauth2-oidc';

import { environment } from '@env/environment';

export const authConfig: AuthConfig = {

issuer: environment.oidc.issuer,

clientId: environment.oidc.clientId,

responseType: environment.oidc.responseType,

redirectUri: environment.oidc.redirectUri,

postLogoutRedirectUri: environment.oidc.postLogoutRedirectUri,

silentRefreshRedirectUri: environment.oidc.silentRefreshRedirectUri,

scope: environment.oidc.scope,

useSilentRefresh: environment.oidc.useSilentRefresh,

silentRefreshTimeout: environment.oidc.silentRefreshTimeout,

timeoutFactor: environment.oidc.timeoutFactor,

sessionChecksEnabled: environment.oidc.sessionChecksEnabled,

showDebugInformation: environment.oidc.showDebugInformation,

clearHashAfterLogin: environment.oidc.clearHashAfterLogin,

nonceStateSeparator: environment.oidc.nonceStateSeparator,

};

This snippet imports AuthConfig from the angular-oauth2-oidc library and the environment object from the environment.ts file. The authConfig constant is assigned an object of type AuthConfig, where each property is set according to the environment object’s values.

PKCE Flow Overview

1. Users log in to an identity provider (IdP) with their credentials.
2. The IdP generates an authorization code and returns it to the client application (Angular).
3. The client sends a request to the authorization server, including the authorization code and a code verifier (a randomly generated string that is hashed).
4. The authorization server validates the authorization code and code verifier, and if they match, it issues an access token and refresh token.

The PKCE flow adds an extra layer of security compared to traditional OAuth 2.0 flows, helping to prevent various attack types, such as authorization code interception.

Source Code Walkthrough

In the Talent Management demo application, the login option is located in the upper right corner of the UI.

When the Login menu is selected, it triggers the login function in the header.component.ts source file. Here’s a snippet of that code:

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

import { Router } from '@angular/router';

import { Observable } from 'rxjs';

import { AuthService } from '@app/core/auth/auth.service';

@Component({

selector: 'app-header',

templateUrl: './header.component.html',

styleUrls: ['./header.component.scss'],

})

export class HeaderComponent implements OnInit {

menuHidden = true;

isAuthenticated: Observable;

constructor(private authService: AuthService, private router: Router) {

this.isAuthenticated = authService.isAuthenticated$;

}

ngOnInit() {}

toggleMenu() {

this.menuHidden = !this.menuHidden;

}

login() {

this.authService.login();

}

logout() {

this.authService.logout();

}

get username(): string | null {

return this.authService.identityClaims ? (this.authService.identityClaims as any)['name'] : null;

}

}

The login() method calls the login() method from the AuthService, initiating the login process.

AuthService Overview

Here's a snippet from the auth.service.ts file:

import { Injectable } from '@angular/core';

import { Router } from '@angular/router';

import { OAuthErrorEvent, OAuthService } from 'angular-oauth2-oidc';

import { BehaviorSubject, combineLatest, Observable } from 'rxjs';

import { filter, map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })

export class AuthService {

private isAuthenticatedSubject$ = new BehaviorSubject(false);

public isAuthenticated$ = this.isAuthenticatedSubject$.asObservable();

constructor(private oauthService: OAuthService, private router: Router) {

// Event handling and initialization code...

}

public login(targetUrl?: string) {

this.oauthService.initLoginFlow(targetUrl || this.router.url);

}

public logout() {

this.oauthService.logOut();

}

}

This service manages authentication, storing the authenticated state using observables that can be subscribed to.

Token Refresh Mechanism

In Angular, token refresh typically involves sending a request to the server to obtain a new token using the existing one. Successful requests return new tokens for subsequent use.

Angular offers several methods for handling token refresh, including interceptors, which can modify outgoing requests and incoming responses. Interceptors can intercept expired token errors and initiate the token refresh process.

Source Code for Token Refresh

The silentRefreshRedirectUri setting in environment.ts specifies the HTML page that supports automatic token refresh.

Here’s a snippet of code from the silent-refresh.html file:

<script>

const checks = [/[?|&|#]code=/, /[?|&|#]error=/, /[?|&|#]token=/, /[?|&|#]id_token=/];

function isResponse(str) {

let count = 0;

if (!str) return false;

for (let i = 0; i < checks.length; i++) {

if (str.match(checks[i])) return true;

}

return false;

}

let message = isResponse(location.hash) ? location.hash : '#' + location.search;

(window.opener || window.parent).postMessage(message, location.origin);

</script>

This script enables silent token refresh through an iframe, allowing for a seamless user experience without requiring re-authentication.

Viewing Token Refresh in Action

To observe token refresh in your Angular application:

1. Open the application in your browser and access the developer console (F12).
2. Navigate to the "Network" tab.
3. Log in and wait for the access token to expire.
4. Look for a request labeled "silent-refresh.html" in the Network tab to verify if a new token has been issued.

The first video titled "NET 8 Angular Authentication with Identity and Refresh Tokens" provides insights into implementing secure authentication practices.

The second video "Refresh Token in Angular 17 & .NET 8 (Series Part 15)" elaborates on the refresh token mechanism in Angular 17.