Obtain access token via authorization code grant with PKCE in angular using oidc-client-js and Microsoft Identity Platform.

Recently, I learned about why implicit flow is not secure because of exposing the access token in the browser. Authorization code grant with PKCE is more secure and should be preferred over implicit flow for protecting a public application which cannot keep the client secret secure. The good new is if you already use oidc-client-js and get tokens from azure ad via implicit flow, the changes you have to make to use authorization code flow with PKCE are minimal. In this post, I show what you need to change to use authorization code grant with PKCE.

For code reference, checkout the sample project here.

Changes in app

• In your angular application, set response_type for oidc-client-js to ‘code’.

oidcSettings: {
    client_id : '{replace with client id you register for your angular app in azure ad}',
    authority: 'https://login.microsoftonline.com/{replace with your tenant id}/v2.0/',
    response_type: 'code',  
    post_logout_redirect_uri: 'http://localhost:4200/',
    loadUserInfo: false,
    redirect_uri: 'http://localhost:4200/',
    silent_redirect_uri: 'http://localhost:4200/',
    scope: '{replace with the scope you define in Expose API section of the app registration for your api in azure ad} openid profile'
  }

Changes in azure app registration

• In the manifest of your angular app registration, set allowPublicClient to true and type under replyUrlsWithType section to Spa.

{
  "id": "...",
  ....
  "allowPublicClient": true,
  ...
  "replyUrlsWithType": [
    {
      "url": "http://localhost:4200",
      "type": "Spa"
    }
  ],
  ...
}

• Under Authentication, Advanced settings, set
  Treat application as a public client to Yes.

That’s it. Although the changes are minimal, it took me a few hours to realize the changes i need to make in the manifest file to enable the grant. This is probably because support for authorization flow with PKCE is still new. Indeed, at the time of writing, the MSAL library for javascript just releases an alpha verison which has support for authorization code with PKCE.

References

Migrating oidc-client-js to use the OpenID Connect Authorization Code Flow and PKCE

Implement the OAuth 2.0 Authorization Code with PKCE Flow

Disadvantages of the Implicit Flow

Msal-browser releases