How to fix AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption error in msal react application.

Chris Ebright 45 Reputation points
2023-03-30T03:22:31.9366667+00:00

I am deploying a nextjs app to azure app service with msal-react for authentication. everything works fine locally and using localhost as redirect uri. when i deploy to my hosted app service on azure i can get it to work briefly, but then i always end up getting the error: AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption. i have tried all combinations of redirect uri's but nothing has worked.

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
8,960 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Camille 40 Reputation points
    2023-06-07T18:55:26.3666667+00:00

    The redirect_uri of the external sso / idp should be registered as a "Web" instead of SPA.

    I had the same issue with my project, my Azure AD tenant set up as an identity provider was giving me "AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption error".

    https://learn.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-azure-ad-single-tenant?pivots=b2c-user-flow

    I set it up based on this but had everything changed to SPA as I thought that was what was needed based on the SPA tutorials which i followed: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-react-spa-app

    I was at a lost and changed a lot of parameters, I tried changing everything to web but it caused some errors afterwards, it seems the best is to only change the auth resp to web. I don't exactly understand why either but it fixed the PKCE error without any of the other weirdness.

    8 people found this answer helpful.

  2. Steve Dodge 10 Reputation points
    2024-01-20T00:39:02.8+00:00

    Problem fixed by moving the callback url http://localhost:3000/api/auth/callback/azure-ad into the Web platform section In my case I got this error because I am using Next.js and with nextauth.js for Azure AD. Next.js and NextAuth utilize React server components which essentially is a classic 2-tier client/web-server architecture and the Oauth is carried out on the web server side. Moving the callback URL into the "Web Platform" section avoids the CORS error I got when my callback was full client side in the "Single Page App Platform" section. Without a deep dive, I speculate single page apps using the msal library conduct the Oauth choreography solely in the browser in javascript and CORS is handled differently

    2 people found this answer helpful.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.