How to implement Authorization Code Grant with PKCE in Angular6+ applications

Question

I need some input in implementing MSAL library in Angular6+ applications for integrating with AZURE AD.

As i read through the microsoft docs, i came across two flows 'implicit grant flow' and 'auth code flow'. It is been recommended by microsoft team themselves that 'auth code flow' must be implemented as its secure as compared to 'implicit grant flow'.

Im working on a Angular6+ application, and I have to integrate it with AZURE AD. When i checked the MSAL libraries for angular i could only find 1 version "npm i @azure/msal-angular", which i assume implements 'implicit grant flow'. I have to implement 'auth code flow'.

Could anyone please help in this regard.

Answer 1

When I first posted this I believe the MSAL library did not support Authorization Code Flow (PKCE) - but that has now changed - see comments above and below

ALTERNATIVE OPTIONS?

Of course, OAuth is about standards - and Azure AD is standards based - so you can use any respected library for your tech stack.

As an example I've used the oidc-client library against both Azure AD and other providers

• Azure AD Code Sample
• Azure AD SPA Security Code

Answer 2

There are 2 confusions here, one is about the security of flows, the other is about whether MSAL supports auth code (w/ PKCE).

1. Auth Code Flow vs. Implicit Flow

You should not understand this as "auth code is secure and implicit flow is insecure". These are relative terms; that is, auth core is considered more secure than implicit flow. However, there are use cases where implicit flow is considered just as good (e.g. user session timeout is short). There is some debate on the internet about this.

2. Using MSAL.js with Angular

The current MSAL.js 2.x (msal-browser) implements auth code (w/ PKCE) flow. There is no reason for you not to use it with your Angular project. There is also an MSAL-Angular wrapper library, which comes with some extra features and glue code, and that is the one that implements implicit flow (because it is based on MSAL.js 1.x aka msal-core). However, you don't have to use it just because you have an Angular project. Instead, you can create your own authentication service using MSAL.js 2.x directly.