This posts shows how an Angular application can be secured using Open ID Connect code flow with PKCE and node-oidc-provider identity provider. This requires the correct configuration on both the client and the identity provider.
The node-oidc-provider clients need a configuration for the public client which uses refresh tokens. The grant_types ‘refresh_token’, ‘authorization_code’ are added as well as the offline_access scope.
clients: [
{
client_id: 'angularCodeRefreshTokens',
token_endpoint_auth_method: 'none',
application_type: 'web',
grant_types: [
'refresh_token',
'authorization_code'
],
response_types: ['code'],
redirect_uris: ['https://localhost:4207'],
scope: 'openid offline_access profile email',
post_logout_redirect_uris: [ 'https://localhost:4207' ]
}
,]
The Angular client is implemented using angular-auth-oidc-client. The offline_access scope is requested as well as the prompt=consent. The nonce validation after a refresh is ignored.
import { NgModule } from '@angular/core';
import { AuthModule, LogLevel } from 'angular-auth-oidc-client';
@NgModule({
imports: [
AuthModule.forRoot({
config: {
authority: 'http://localhost:3000',
redirectUrl: window.location.origin,
postLogoutRedirectUri: window.location.origin,
clientId: 'angularCodeRefreshTokens',
scope: 'openid profile offline_access',
responseType: 'code',
silentRenew: true,
useRefreshToken: true,
logLevel: LogLevel.Debug,
ignoreNonceAfterRefresh: true,
customParams: {
prompt: 'consent', // login, consent
},
},
}),
],
exports: [AuthModule],
})
export class AuthConfigModule {}
That’s all the configuration required.
Links:
Software Engineering 
[…] Implementing Angular Code Flow with PKCE using node-oidc-provider (Damien Bowden) […]
[…] Implementing Angular Code Flow with PKCE using node-oidc-provider (Damien Bowden) VMware Eases Kubernetes Dev Woes with Tanzu Application Platform (Darryl K. Taft) Announcing the General Availability of VMware Tanzu Kubernetes Grid 1.4 (Donna Lee) Next.js “New Post” Node Script (Elijah Manor) Azure Machine Learning Environments (Luis Valencia) Is Blazor the Future or Just Another Walled Garden? (Matthew MacDonald) Creating a Game in Blazor – Part 1 – Moving Objects (Paul Michaels) Node.js Performance Monitoring (Stackify) ESLint v8.0.0-beta.2 released (ESLint Team) I completely ignored the front end development scene for 6 months. It was fine (Brad Frost) Train your machine learning models on any GPU with TensorFlow-DirectML (Clarke Rahrig) Node v16.9.1 (Current) (Richard Lau) […]
[…] Implementing Angular Code Flow with PKCE using node-oidc-provider – Damien Bowden […]