Implementing Angular Code Flow with PKCE using node-oidc-provider

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:

https://github.com/panva/node-oidc-provider

https://github.com/damienbod/angular-auth-oidc-client

3 comments

  1. […] Implementing Angular Code Flow with PKCE using node-oidc-provider (Damien Bowden) […]

  2. […] 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) […]

  3. […] Implementing Angular Code Flow with PKCE using node-oidc-provider – Damien Bowden […]

Leave a Reply to The Morning Brew - Chris Alcock » The Morning Brew #3315 Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: