How To Enable Cors In An Azure App Registration When Used In An Oauth Authorization Flow With Pkce?

I have a pure Javascript app which attempts to get an access token from Azure using OAuth Authorization Flow with PKCE. The app is not hosted in Azure. I only use Azure as an OAuth

Solution 1:

Okay, after days of banging my head against the stupidity of Azure's implementation I stumbled upon a little hidden nugget of information here: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser#prerequisites

If you change the type of the redirectUri in the manifest from 'Web' to 'Spa' it gives me back an access token! We're in business! It breaks the UI in Azure, but so be it.

Solution 2:

You should define the internal url with your local host address.

https://docs.microsoft.com/en-us/azure/active-directory/manage-apps/application-proxy-understand-cors-issues

Solution 3:

When I first posted, the Azure AD token endpoint did not allow CORS requests from browsers to the token endpoint, but it does now. Some Azure AD peculiarities around scopes and token validation are explained in these posts and code in case useful:

• Code Sample
• Blog Post