Open
Description
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.