2

I'm developing a TypeScript React application and I'm using Firebase Authentication for user sign-in. I've set up Microsoft as an OAuth provider, but I'm encountering an issue during the sign-in process.

Sorry, but we’re having trouble signing you in.
AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption.

enter image description here

const handleMicrosoftLogin = (
  e: React.MouseEvent<HTMLButtonElement>,
): void => {
  e.preventDefault();
  const provider = new OAuthProvider('microsoft.com');
  signInWithPopup(auth, provider)
    .then((result: UserCredential | null) => {
      if (result != null) {
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        if (credential != null) {
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
          console.log(accessToken, idToken);
        }
      }
    })
    .catch((error: FirebaseError) => {
      // handle errors here
      console.log(error);
    });
};

I understand that this error is related to the PKCE (Proof Key for Code Exchange) flow in OAuth 2.0, but my understanding was that Firebase should handle this for me.

I've checked my Azure Active Directory app registration and the configuration seems correct:

  • The redirect URI is set to https://.firebaseapp.com/__/auth/handler. Authorized domains are also added in the Firebase Authentication settings.
  • Both "Access tokens" and "ID tokens" are enabled under "Implicit grant and hybrid flows"
  • The correct account type (Accounts in any organizational directory) is selected under "Supported account types".
  • Application ID and Application secret have been added in the Firebase Authentication sign-in method's provider settings.

I'm using the latest version of the Firebase SDK. I would like to keep my application as a SPA and DO NOT want to change my platform configuration from SPA to Web (unless I have misunderstood the docs). I also want to avoid adding helper functions and modifying the URL where I send users to authenticate.

Any ideas on what could be causing this error and how to resolve it? Any help would be greatly appreciated.

I've already checked the following related questions but none of them seem to offer a proper solution or explanation of the issue:

Update 1

I found a similar issue, for Auth0 (https://community.auth0.com/t/proof-key-for-code-exchange-is-required-for-cross-origin-authorization-code-redemption/44529/12) in which the solution was to add the platform as Web instead of a Single-page Application in the Azure Platform configuration, which doesn't make proper sense to me.

enter image description here

Sebin Benjamin
  • 1,758
  • 2
  • 21
  • 45
  • If you are using SPA authentication, then you have to pass code challenge in the request. Refer this https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow#request-an-authorization-code – Rukmini Jul 26 '23 at 07:58

1 Answers1

0

Looks like Firebase does not support PKCE. To keep going you will have to skip PKCE by not registering an SPA reply URL and enable implicit flow as you've already done.

AlfredoRevilla-MSFT
  • 3,171
  • 1
  • 12
  • 18