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: [
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’;

imports: [
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.


Leave a Reply

Your email address will not be published. Required fields are marked *