How to fix 'AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption' error in MSAL Angular Application

MMans 0

I'm deploying an angular app to azure using MSAL Angular for authentication. Much like the user in this post doing a similar thing with a nextjs app (https://learn.microsoft.com/en-us/answers/questions/1194524/how-to-fix-aadsts9002325-proof-key-for-code-exchan), The app works fine when I host it locally and use localhost as the redirect uri; however, when I deploy the app to Azure, I always get the error "AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption." after signing in.

Angular version is 17.0.4 and MSAL version is 3.1.0

I am using single tenant, multitenant or Azure AD B2C, since I only want users who are part of my organization to be able to log in.
As for troubleshooting steps I've already tried, I've tried changing the platform to web instead of SPA, since it was recommended by a lot of people in different forums, which didn't work for me. I also already made sure that the Azure AD App registration and the auth config in the app itself both have the same redirect URI.

Shree Hima Bindu Maganti 2,820 Reputation points Microsoft Vendor

2025-02-06T11:41:00.1133333+00:00
Hi MMans ,
Thanks for the question and using MS Q&A platform.
Fix for 'AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption' in MSAL Angular

This error occurs when the authorization code exchange process requires Proof Key for Code Exchange (PKCE), but it is not properly configured.

MSAL Angular 2.x and later enforce PKCE by default, but verify that it is enabled:

import { PublicClientApplication } from '@azure/msal-browser'; export const msalConfig = { auth: { clientId: "your-client-id", authority: "https://login.microsoftonline.com/your-tenant-id", redirectUri: "https://your-deployed-app-url", }, cache: { cacheLocation: "sessionStorage", storeAuthStateInCookie: true, // Helps with cross-origin issues } }; export const msalInstance = new PublicClientApplication(msalConfig);

Go to Azure Portal → Azure AD App Registration → Authentication.

Ensure your Redirect URI matches your deployed app URL.

Select Single-Page Application (SPA) as the platform.

Uncheck Implicit Grant and Hybrid Flows (ID Token and Access Token).

Ensure that CORS is properly configured in Azure App Service.

Use storeAuthStateInCookie: true in the MSAL config to prevent cross-origin authentication issues.

Confirm that the redirect URI in MSAL Configuration matches exactly with the one in Azure AD App Registration (e.g., ).

Set navigateToLoginRequestUrl: false

export const msalAngularConfig = { interactionType: InteractionType.Redirect, authRequest: { scopes: ["User.Read"] }, system: { navigateToLoginRequestUrl: false } };

This setting prevents incorrect redirect behavior after login:

Clear your browser cookies and session storage to remove stale authentication tokens. References:

https://learn.microsoft.com/en-us/entra/identity-platform/v2-oauth2-auth-code-flow
https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-react-spa-app https://learn.microsoft.com/en-us/entra/identity-platform/tutorial-single-page-apps-angular-prepare-app
Let me know if you have any further assistances.
MMans 0 Reputation points

2025-02-06T17:21:05.65+00:00
Hi @Shree Hima Bindu Maganti ,

Thank you for your reply. I have followed the steps you outlined above where I could, but I did run into a few issues:

When I uncheck "ID tokens (used for implicit and hybrid flows)", I get the error "AADSTS700054: response_type 'id_token' is not enabled for the application." rather than the error I was getting previously.

I have the MSAL configured as described in this Learn article: https://learn.microsoft.com/en-us/entra/identity-platform/tutorial-single-page-apps-angular-prepare-app
I did change storeAuthStateInCookie to always be true in my configuration, but I am not sure where to set navigateToLoginRequestUrl. I can't set it in MsalGuardConfiguration where I have interactionType and authRequest set, since system isn't one of the parameters.
Shree Hima Bindu Maganti 2,820 Reputation points Microsoft Vendor

2025-02-06T20:22:40.0866667+00:00
Hi MMans ,
Thanks for the update!

Error after unchecking "ID tokens"
If you uncheck "ID tokens," it disables the Implicit Flow (which uses id_token), causing the error "AADSTS700054: response_type 'id_token' is not enabled". To fix this, just re-enable ID tokens in Azure AD settings. This is needed for the PKCE-based Authorization Code Flow, which doesn't use the id_token directly.

Make sure PKCE is enabled (it's the default in MSAL).

storeAuthStateInCookie should be true, as you did, to handle cross-origin requests.

Add navigateToLoginRequestUrl directly in msalConfig (not in MsalGuardConfiguration).

export const msalConfig = { auth: { clientId: "your-client-id", authority: "https://login.microsoftonline.com/your-tenant-id", redirectUri: "https://your-deployed-app-url", }, cache: { cacheLocation: "sessionStorage", storeAuthStateInCookie: true, // Helps with cross-origin issues }, system: { navigateToLoginRequestUrl: false // Ensure this is set here } };

Make sure in MsalGuardConfiguration, you're using interactionType and authRequest correctly for your SPA setup.

export const msalGuardConfig = { interactionType: InteractionType.Redirect, // Or .Popup based on your choice authRequest: { scopes: ["User.Read"] } };

Prepare an Angular SPA
Let me know if the issue persists.

Share via

How to fix 'AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption' error in MSAL Angular Application

Your answer