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

Leave a Reply

Your email address will not be published.