Does Azure AD support Authorization Code Flow with PKCE for Single page applications

Question

I am thinking of upgrading the authentication flow in my angular app from implicit flow to authorization code flow with pkce. I am using Azure AD as the auth provider.

I didn't find documentation related to pkce flow for spa in Microsoft docs. Auth0 has already started supporting pkce from last year, wanted to know if Azure ad supports it. Or if it is in their future road map.

Hydromechanics

Answer 1

Azure AD supports PKCE on both the v1.0 and v2.0 endpoints.

You can find the v2.0 documentation here and the v1.0 documentation here.

Distrustful

Thanks @harikrishna, I have successfully upgraded my code from implicit flow to pkce (pixie). – Hydromechanics

can you please let us know the official release date of pkce support by Azure. Thank you. – Hydromechanics

Do we have to manually implement PKCE flow in the SPA or it is managed by msal under the hood? – Subjectivism

@AakashGoswami , We can implement oauth with or with out MSAL ,it is not mandatory – Distrustful

Answer 2

Microsoft have recently fixed the CORS issue. Changes required -

Change your redirect URI type to enable CORS. You can do this by going to the manifest editor for your app registration in the portal, finding the replyUrlsWithType section and changing the type of your redirect URI to SPA. This may remove the affected redirect URIs from the Web platform Authentication tab - that's OK! We are working on getting UI set up for this.

Source: https://www.npmjs.com/package/@azure/msal-browser

Liquidambar

Thanks, I have already done the changes in the application manifest and PKCE is working as expected in my angular application. Actually, I am using OIDC-client-js library and integration was much easier. Thanks – Hydromechanics

Answer 3

Previously I posted that PKCE was not supported but that is no longer the case. If it helps here is a PKCE code sample and blog post that will give readers something to compare against:

• Azure AD Single Page App and API Code Sample

It should be possible to just reconfigure the JSON configuration files to get the sample working. Note however that I am using standards based certified libraries and not Microsoft specific libraries.

Heman

Now, I am able to implement PKCE in my Angular app using Azure AD & OIDC. – Hydromechanics

@PrateekKumarDalbehera can you please let me know how you did it thanks – Sandstorm

@JeffinJ - any standards based library should work - I've updated my post with a link to a code sample and blog post in case useful. – Heman

@GaryArcher Hi, thanks for your help. Can you please check my post. I have put a bounty on it. – Sandstorm

If you are building an SPA with an interactive user you should use Authorization Code Flow (PKCE) and redirect the user to sign in, according to OAuth for Browser Based Apps. In your question, could you describe why you are trying to get a token without a user redirect. That feels like a solution that would fail security reviews, due to any user being able to get the secret via browser tools - but maybe I'm misunderstanding. – Heman

Answer 4

Yes. Azure AD plattform supports PKCE on both the v1.0 and v2.0 endpoints. But for SPA, e.g. Angular, it is not official supported by Microsoft. For Angular, there is only example for Implicit Flow.

https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular

Some other libraries support PKCE with AzureAD, e.g. https://github.com/damienbod/angular-auth-oidc-client. Example of using PCKE from autor: https://github.com/damienbod/AzureAD-Auth-MyUI-with-MyAPI

But not all features from user view are so perfect, e.g. by switching tabs, by some token refreshed. It would be better to check issue list and then to make the decision.

Crosspollination