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