Securing Angular applications using the OpenID Connect Code Flow with PKCE

In this post, I show how an Angular application could be secured using the OpenID Connect Code Flow with Proof Key for Code Exchange (PKCE).

The Angular application uses the OIDC lib angular-auth-oidc-client. In this example, the src code is used directly, but you could also use the npm package. Here’s an example which uses the npm package.


lib src:

npm package:

Configuring the Angular client

The Angular application loads the configurations from a configuration json file. The response_type is set to “code”. This defines the OpenID Connect (OIDC) flow. PKCE is always used, as this is a public client which cannot keep a secret.

The other configurations must match the OpenID Connect client configurations on the server.

"ClientAppSettings": {
    "stsServer": "https://localhost:44318",
    "redirect_url": "https://localhost:44352",
    "client_id": "angular_code_client",
    "response_type": "code",
    "scope": "dataEventRecords securedFiles openid profile",
    "post_logout_redirect_uri": "https://localhost:44352",
    "start_checksession": true,
    "silent_renew": true,
    "startup_route": "/dataeventrecords",
    "forbidden_route": "/forbidden",
    "unauthorized_route": "/unauthorized",
    "log_console_warning_active": true,
    "log_console_debug_active": true,
    "max_id_token_iat_offset_allowed_in_seconds": 10,

The Angular application reads the configuration in the app.module and initializes the security lib.

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AuthModule } from './auth/modules/auth.module';
import { OidcSecurityService } from './auth/services/';
import { OpenIDImplicitFlowConfiguration } from './auth/modules/auth.configuration';
import { OidcConfigService } from './auth/services/';
import { AuthWellKnownEndpoints } from './auth/models/auth.well-known-endpoints';

// Add then other imports, config you need

export function loadConfig(oidcConfigService: OidcConfigService) {
    console.log('APP_INITIALIZER STARTING');
    return () => oidcConfigService.load(`${window.location.origin}/api/ClientAppSettings`);

    imports: [
    declarations: [
    providers: [
            provide: APP_INITIALIZER,
            useFactory: loadConfig,
            deps: [OidcConfigService],
            multi: true
    bootstrap: [AppComponent],

export class AppModule {

        private oidcSecurityService: OidcSecurityService,
        private oidcConfigService: OidcConfigService,
        configuration: Configuration
    ) {
        this.oidcConfigService.onConfigurationLoaded.subscribe(() => {

            const openIDImplicitFlowConfiguration = new OpenIDImplicitFlowConfiguration();
            openIDImplicitFlowConfiguration.stsServer = this.oidcConfigService.clientConfiguration.stsServer;
            openIDImplicitFlowConfiguration.redirect_url = this.oidcConfigService.clientConfiguration.redirect_url;
            // The Client MUST validate that the aud (audience) Claim contains its client_id value registered at the Issuer
            // identified by the iss (issuer) Claim as an audience.
            // The ID Token MUST be rejected if the ID Token does not list the Client as a valid audience,
            // or if it contains additional audiences not trusted by the Client.
            openIDImplicitFlowConfiguration.client_id = this.oidcConfigService.clientConfiguration.client_id;
            openIDImplicitFlowConfiguration.response_type = this.oidcConfigService.clientConfiguration.response_type;
            openIDImplicitFlowConfiguration.scope = this.oidcConfigService.clientConfiguration.scope;
            openIDImplicitFlowConfiguration.post_logout_redirect_uri = this.oidcConfigService.clientConfiguration.post_logout_redirect_uri;
            openIDImplicitFlowConfiguration.start_checksession = this.oidcConfigService.clientConfiguration.start_checksession;

            openIDImplicitFlowConfiguration.silent_renew = this.oidcConfigService.clientConfiguration.silent_renew;
            openIDImplicitFlowConfiguration.silent_renew_url = this.oidcConfigService.clientConfiguration.redirect_url + '/silent-renew.html';

            openIDImplicitFlowConfiguration.post_login_route = this.oidcConfigService.clientConfiguration.startup_route;
            // HTTP 403
            openIDImplicitFlowConfiguration.forbidden_route = this.oidcConfigService.clientConfiguration.forbidden_route;
            // HTTP 401
            openIDImplicitFlowConfiguration.unauthorized_route = this.oidcConfigService.clientConfiguration.unauthorized_route;
            openIDImplicitFlowConfiguration.log_console_warning_active = this.oidcConfigService.clientConfiguration.log_console_warning_active;
            openIDImplicitFlowConfiguration.log_console_debug_active = this.oidcConfigService.clientConfiguration.log_console_debug_active;
            // id_token C8: The iat Claim can be used to reject tokens that were issued too far away from the current time,
            // limiting the amount of time that nonces need to be stored to prevent attacks.The acceptable range is Client specific.
            openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds =

            // openIDImplicitFlowConfiguration.iss_validation_off = false;
            configuration.FileServer = this.oidcConfigService.clientConfiguration.apiFileServer;
            configuration.Server = this.oidcConfigService.clientConfiguration.apiServer;

            const authWellKnownEndpoints = new AuthWellKnownEndpoints();

            this.oidcSecurityService.setupModule(openIDImplicitFlowConfiguration, authWellKnownEndpoints);


        console.log('APP STARTING');

The redirect request with the code from the secure token server (STS) needs to be handled inside the Angular application. This is done in the app.component.

If the redirected URL from the server has the code and state parameters, and the state is valid, the tokens are requested from the STS server. The tokens in the response are validated as defined in the OIDC specification.

private doCallbackLogicIfRequired() {
   // Will do a callback, if the url has a code and state parameter.

or if you want more control, or have specific logic:

private doCallbackLogicIfRequired() {
        const urlParts = window.location.toString().split('?');
        const params = new HttpParams({
            fromString: urlParts[1]
        const code = params.get('code');
        const state = params.get('state');
        const session_state = params.get('session_state');

        if (code && state && session_state) {
            this.oidcSecurityService.requestTokensWithCode(code, state, session_state);

IdentityServer4 is used to configure and implement the secure token server. The client is configured to use PKCE and no secret. The client ID must match the Angular application configuration.

new Client
	ClientName = "angular_code_client",
	ClientId = "angular_code_client",
	AccessTokenType = AccessTokenType.Reference,
	// RequireConsent = false,
	AccessTokenLifetime = 330,// 330 seconds, default 60 minutes
	IdentityTokenLifetime = 30,

	RequireClientSecret = false,
	AllowedGrantTypes = GrantTypes.Code,
	RequirePkce = true,

	AllowAccessTokensViaBrowser = true,
	RedirectUris = new List<string>

	PostLogoutRedirectUris = new List<string>
	AllowedCorsOrigins = new List<string>
	AllowedScopes = new List<string>

Silent Renew

The tokens are refreshed using an iframe like the OpenID Connect Implicit Flow. The HTML has one small difference. The detail value of the event returned to the Angular application returns the URL and not just the hash.

<!doctype html>
    <base href="./">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        window.onload = function () {
            /* The parent window hosts the Angular application */
            var parent = window.parent;
            /* Send the id_token information to the oidc message handler */
            var event = new CustomEvent('oidc-silent-renew-message', { detail: window.location });

Now the OIDC Flow can be used in the Angular client application. When the application is started, the configurations are loaded.

The authorize request is sent to the STS with the code_challenge and the code_challenge_method.


The STS redirects back to the Angular application with the code and state.


The client application then requests the tokens using the code:



The tokens are then returned and validated. The silent renew works in the same way.


The Angular application works now using OIDC Code Flow with PKCE to authenticate and authorize, but requires other security protections such as CSP, HSTS XSS protection, and so on. This is a good solution for Angular applications which uses APIs from any domain.



  1. […] Securing Angular applications using the OpenID Connect Code Flow with PKCE (Damien Bowden) […]

  2. […] Securing Angular applications using the OpenID Connect Code Flow with PKCE Damien Bowden (@damien_bod) […]

  3. Jawahar Kaliraj Mariappan · · Reply

    Hi, Can this approach be used against Azure AD (and with implicit flow disabled) please?


    1. Hi Jawahar

      As far as I know, the answer is no. Azure AD does not support this flow yet.

      Greetings Damien

      1. Jawahar Kaliraj Mariappan · ·

        Thanks Damien.

      2. jawahar75 · ·

        Hi Damien,

        It appears that latest Azure AD (i.e. Microsoft Identity platform – supports “authorization code flow” now. (

        Am I right or missing something here please?


  4. jawahar75 · · Reply

    Hi Damien,

    It appears that latest Azure AD (i.e. Microsoft Identity platform – supports “authorization code flow” now. (

    Am I right or missing something here please?


    1. jawahar75 · · Reply

      Hi Damien, Please ignore this comment as I have replied to relevant comment thread.


  5. Hi Damien,

    If I use single-tenant which is my company and login with my personal account, it keeps bring me to the error page with users not exists in tenant and I can’t logout or pick user the next time I login again. It keeps using the same user identity, am i missing something here?

    1. Hi vouhoa19 this is a Azure AD thing 🙂 you need to set the prompt parameter of the OIDC client to login or select_account, then you can choose. The The reason this happens is because you are logged into a single account.

      options.Prompt = “login”; // login, select_acccount

  6. Thank you very much.I have to logout from azure app first before the prompt start working.

  7. Hi Damien, thanks for those examples, they are indeed usefull.
    My question is – if we based on this example make PWA like wrap existing Angular SPA in Cordova and build Mobile app, how refresh token would work?

Leave a Reply

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

You are commenting using your 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: