Proof Key for Code Exchange is required for cross-origin authorization code redemption.

[charleshss]

I am developing a React SPA using AWS Amplify. My client requested the implementation of Microsft SSO as they are part of Microsoft House. I have been using OIDC to implement this as it is more of a lightweight protocol. I couldn't find much documentation online and followed the guidelines of friends and no one seems to be able to help me fix this error. When I click my login button it is redirected to the Microsoft log-in page as expected and then however when a user signs in with the correct details I get this. A proof key for code exchange. I think I have set up correctly in AWS, Entra ID and my code. I was wondering if anyone knows how to fix this.

[HuiSF]

Hi @charleshss thanks for opening this issue.

We would need more information for triaging.

1. What Amplify APIs are you using to implement this flow?
2. Are you using Amplify UI Authenticator component?
3. Please provide Amplify packages versions
4. Please clarify which Amplify APIs you are invoking on you login button click
5. Which party was throwing this error? From Microsoft, or Amplify API?
6. Please provide a screenshot of the error state

[charleshss]

1. I was using signInWithRedirect and using a custom provider of Microsoft entra.
2. I was not using an authentication component and instead defining my own auth in the backend with OIDC parameters.
3. Frommy packages file of that branch that uses this:

"dependencies": {
"@aws-amplify/predictions": "^6.1.42",
"@aws-amplify/ui-react": "^6.5.5",
"@aws-sdk/client-transcribe-streaming": "^3.744.0",
"@tailwindcss/vite": "^4.0.0",
"aws-amplify": "^6.6.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^4.0.0"
},

4. Again the signInWithRedirect
5. I believe Microsoft but I think it was because I couldn't get amplify to send over the correct information so they communicating properly.

[HuiSF]

Hi @charleshss thanks for answering my inquires. That's helpful for understanding this issue. Since you have not used any Amplify UI component, but are directly using the signInWithRedirect API, I will transfer this issue into Amplify JS repo for a better tracking.

Regarding the information sent by Amplify:

The signInWithRedirect API generates the proof key for code exchange (PKCE) and submit this information to Cognito's /oauth2/authorize endpoint. How Cognito forwards Amplify JS library provided information to Microsoft Azure Entra is out of Amplify JS library's control.

Could you do me a favor, open developer tool in the browser, switch to the network tab, clear existing entries, then click your sign-in button to trigger the signInWithRedirect API call. When it lands in the Microsoft login page, export the network traffic to an HAR file and provide us for inspecting.

[ashika112]

@charleshss Did u get a chance to look into what Hui was asking for? That help us debug better