0

I am building an Angular SPA that uses the @azure/msal-angular version 2.3.2 package for authenticating users in my organization with their Microsoft account. However, logging in using the web app which is hosted by Azure doesn't work while logging in to the same web app running under http://localhost:4200/ works as intended. When logging in using my localhost version, I get redirected to a URL that is similar to

https://login.microsoftonline.com/.../oauth2/v2.0/authorize?client_id= ...

whilst logging in using the web app redirects me to

https://login.microsoftonline.com/.../oauth2/authorize?response_type=code+id_token ...

Trying to log in using the web app results in errors such as AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption. I assume that in order for the authorization to work I need the web app to use the correct endpoint, i. e., the one including /oauth2/v2.0. However, Azure doesn't give me an option to choose the endpoint to use for logging in users and I'm confused as to why the endpoint is used locally but not in production.

Is there a settings that I'm missing? How can I cause the web app to use the correct endpoint for logging in users?

Improve this question

1 Answer 1

Reset to default
1

I am assuming you deployed the SPA to an Azure App Service, right?

If so, can you check if you have Easy Auth enabled on the app service? You are able to see it on the Authentication tab of the App Service:

App Service Example

The fact that this is working locally and the usage of the old microsoftonline endpoints on your deployed app seems to point to this, but you can doublecheck it that way.

If you have it enabled, and since you are already protecting your application with MSAL directly on the code, you should disable this option - you are basically adding a layer of authentication (the built in Easy Auth of the App Service) on top of another layer (your own implementation of MSAL), and this can lead to some weird scenarios.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The authentication tab displays my Authentication settings plus the configuration for my Identity provider (Microsoft) which is connected to the app registration with my redirect URIs etc. I just noticed that the Manifest file for the Identity provider app registration contains the entry "oauth2AllowImplicitFlow": False, which, I'm assuming disables the endpoint that I'm trying to use. I'll check that next week.
That is most likely the problem. That Authentication tab is used when you want to add the built in app service authentication on your solution - essentially, if you don't want to implement the authentication logic on your code. Since you already implemented the authentication logic on your code using MSAL, you should disable that option on the app service.
You can read more about the built in App Services' built-in Authentication here: learn.microsoft.com/en-us/azure/app-service/…
Are you suggesting that I can get rid of the App Registration that is handling authentication altogether? Because in that case, my redirect URIs are getting lost as well and I'm sure there would be other problems coming up during the authentication process. I followed the steps listed under learn.microsoft.com/en-us/azure/active-directory/develop/… which seem to be required for making the MSAL library work when I deployed my app.
Never mind, I didn't have to delete the App Registration but just disable the Authentication so what you said the first time worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.