Sign In fails when using custom OIDC provider

[douglass97]

Operating System

Ubuntu 22

Environment (if applicable)

Chrome 132

Firebase SDK Version

11.0.1

Firebase SDK Product(s)

Auth

Project Tooling

React 19 App With Vite

Detailed Problem Description

We are developing an app in which we are trying to use Firebase's Authentication with a custom OIDC provider, but we are facing some errors when trying to sign in.
We have already followed the steps described in this guide: https://firebase.google.com/docs/auth/web/openid-connect

However, when we try to sign in, we receive the following error:

{
   "error": {
      "code": 400,
      "message": "INVALID_IDP_RESPONSE : Error connecting to the given credential's issuer.",
      "errors": [
         {
            "message": "INVALID_IDP_RESPONSE : Error connecting to the given credential's issuer.",
            "domain": "global",
            "reason": "invalid"
         }
      ]
   }
}

We have also tried to follow the troubleshooting guide available below, but none of the checks we executed indicated a problem.

https://cloud.google.com/iam/docs/troubleshooting-workforce-identity-federation#oidc_sign-in_errors

Steps and code to reproduce issue

import { useCallback, useContext, useEffect } from "react";
import "./App.css";
import {
  OAuthProvider,
  getAuth,
  getRedirectResult,
  signInWithPopup,
  signInWithRedirect,
} from "firebase/auth";

import FirebaseContext from "./FirebaseContext";

function App() {
  const { authProvider, app } = useContext(FirebaseContext);

  useEffect(() => {
    getRedirectResult(getAuth())
      .then((result) => {
        if (!result) {
          console.log("No redirect result from Firebase");
          return;
        }

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        console.log("credential from firebase login redirect", credential);
      })
      .catch((error) => {
        console.log("Error on Firebase getRedirectResult", error);
      });
  }, []);

  const onLoginWithFirebasePopup = useCallback(async () => {
    try {
      const result = await signInWithPopup(getAuth(app), authProvider);
      const credential = OAuthProvider.credentialFromResult(result);
      console.log("user credential from firebase", credential);
    } catch (error) {
      console.error("Error on Firebase signInWithPopup", error);
    }
  }, [app, authProvider]);

  const onLoginWithFirebaseRedirect = useCallback(async () => {
    await signInWithRedirect(getAuth(), authProvider);
  }, [authProvider]);

  return (
    <>
      <div className="card">
        <p>Login with popup (firebase sdk):</p>
        <button onClick={onLoginWithFirebasePopup}>Login Popup</button>
      </div>

      <div className="card">
        <p>Login with redirect (firebase sdk):</p>
        <button onClick={onLoginWithFirebaseRedirect}>Login Redirect</button>
      </div>
    </>
  );
}

export default App;

Clicking on sign in button fails and redirect us back to our app.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

What is authProvider at this time? Can you log it? Could there be something wrong with the way React Context is providing the value?

Double check that the provider name you used in the provider initialization (const provider = new OAuthProvider('oidc.example-provider');) matches the one in Firebase console (listed as "Provider Id: oidc.your-provider-name") and note that it's case sensitive. You can also log authProvider.providerId in this component to make sure it's what you expect.

[douglass97]

Hello, thanks for the response!

Logging the authProvider.providerId shows the following: "oidc.id-magalu-prod"

It is the same value we registered in the Firebase Console: