microsoft-authentication-library-for-js
microsoft-authentication-library-for-js copied to clipboard
AzureAD
msal-react and the PKCE auth flow are incompatible with AzureAD App Proxy
Core Library
@azure/msal or msal
Wrapper Library
@azure/msal-react
Description
Work with the AzureAD App Proxy team to ensure the new PKCE/SPA flow works with AzureAD App Proxy. Currently these are not compatible because of the way App Proxy works and modifies authentication methods.
Source
External (Customer)
@rayterrill Thanks for filing this issue. Can you please provide more details on what doesn't work? This is the first I'm hearing about incompatibility here.
cc: @hpsin
Here’s what the Authentication tab in App Registrations looks like for my app prior to adding AzureAD App Proxy. Note that the only “Platform” I have configured is the “Single-page application” platform:
Everything works great.
I go in and configure AzureAD App Proxy for my app, and Save it.
If I go back to the App Registration view of my app, it looks like AzureAD App Proxy has added a new “Web” platform to my app:
When I try to use the App Proxy (after setting up DNS), I get this error. This error occurs both internally (without hitting App Proxy) and externally (through App Proxy) because App Proxy has changed/added an auth method for my app. Note that at this point my app is broken both internally and externally.
Confirmed this AM with the AzureAD App Proxy team via email that these are currently incompatible and there's no ETA for resolution (via Ronnie Greenstein and Jasmine Betthauser @ Microsoft).
You are indeed correct - AppProxy does not support apps using this new flow as it does not work with the way AppProxy is currently integrated with AAD.
Created a User Voice issue to request this be supported: https://feedback.azure.com/forums/169401-azure-active-directory/suggestions/43106385-support-pkce-spa-auth-flow-with-azuread-app-proxy
Let me know what else I can add.
@jasonnutter I mostly wanted to add this as a note in case others run into this same scenario - this def took a while to track down what was happening.
@rayterrill Great, thanks! I'll follow up internally and let you know if we can provide any additional guidance.
Been trying to get msal-angular to work with AzureAD AppProxy for weeks now with no luck and the same error. Hopefully this fix will resolve our issue too.
@bsrchalam That's exactly why I created this issue - banging my head against this and finally tracked it down. Was hoping to save others some time. ❤️
@rayterrill was it clearing the response headers as well? especially access-control-allow-origin
@bsrchalam I don't know - it basically entirely failed to load the front end with the sign-in error I included in the screenshot because it wasn't able to get past the initial AzureAD auth (which we require up-front before we display content).
Me and a colleague have struggled a lot with this error. We have 2 identical apps, same code, just different key vaults. The latest app reg. works through an app proxy and the old one gets the error "AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption". After we compared manifests and tried a lot, we gave up. We deleted the old app registration and created a new one and then we turned on the app proxy in the related enterprise application afterward, we have only single page redirects URIs added and now it works :) But we have no idea where the error was...
I can't deploy modern frontends - such as Angular and React - that use MSAL 2.x to hardened tenants (where PKCE is a requirement).
From what I can see no progress has been made on this since it was reported. Can I get a handle on whether you intend to fix this or not, because I must replace our Azure AD Application Proxy infrastructure otherwise.
Created a User Voice issue to request this be supported: https://feedback.azure.com/forums/169401-azure-active-directory/suggestions/43106385-support-pkce-spa-auth-flow-with-azuread-app-proxy
Website were moved, here is the new link: https://feedback.azure.com/d365community/idea/e8d41bf6-c625-ec11-b6e6-000d3a4f0789
We are also in the progress to Azure App Proxy and due to the previous implementation of MSAL 2.x in our web applications, we are running into incompatibilities with Microsoft products. Who (MSAL or App Proxy team) is responsible for this? Who should be contacted to ensure that this incompatibility is resolved in a prioritized way or how can we support you @jasonnutter in solving this issue asap?
@SimonGolms Apologies for the delayed response. The App Proxy team is aware of this issue, however, we have no ETA to share at this time, unfortunately. We'll update this issue when we have more information.
@jasonnutter thanks for your quick reply, sounds great that you are aware of the issue and urgency! Looking forward to any progress and hopefully a fix to the issue soon. And please let me know if there is anything we can do to support you here.
@rayterrill if I understand the Azure App proxy correctly, it sits between the user and the webserver where the app is hosted. If you set it to pre-authenticate, like you, the users’ browser first needs to login before the browser can even access the JavaScript files.
What happens if you would just open the login pop-up afterwards?
- User tries to access app
- App Proxy forces user to login
- User logged in
- Browser loads SPA
- SPA triggers login
- User already logged in pop-up closes automatically
- Both the app proxy and the spa are logged in.
@svrooij I've moved on and no longer work with AzureAD - feel free to close. :)
Any update here? I still have this issue in mid 2023 with Angular 14, MSAL 2.5.9
@benwhitman I think my comment is still relevant, https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/3420#issuecomment-1099613801
But on the other hand I think this issue should just be closed, doing pkce using MSAL from a SPA, defeats the whole purpose of using the pre-authentication.
Why not do the following:
- Protect your api with the proxy
- Host your SPA on any unprotected or not pre-authenticated url and call MSAL from there. With the token you can then access the protected api.
With ADFS you could "split" one domain where only a specific folder (like /api) would be protected, that would also enable MSAL, if you would absolutely want to use that.
Any update here? I still have this issue in mid 2023 with Angular 14, MSAL 2.5.9
@benwhitman Did you ever resolve this? I am in the same boat and wound up here. Angular 14 and MSAL 2.4.3
@wesysec I found a workaround for this issue:
Configure your SPA to use a different path as the redirectUri, e.g. https://example-company.msappproxy.net/login.
Then add the base path https://example-company.msappproxy.net/ as the Web Redirect URI and https://example-company.msappproxy.net/login as the SPA redirect URI.
@FabianSamuelssonSR We're struggling with the same isssue. I have tried your workaround but I'm getting an AADSTS500112 error, specifying that my reply (the SPA URI) address does not match the reply adress (Web URI) provided when requesting Authorization code.
Did you get the same error or do you have any suggestions on solving that?
