firebase / firebase/firebase-js-sdk
Sign In fails when using custom OIDC provider
- Dominant language
- TypeScript
- Stars
- 5.1k
- Forks
- 1k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 37
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 (
<>
Login with popup (firebase sdk):
Login Popup
Login with redirect (firebase sdk):
Login Redirect
);
}
export default App;
```
Clicking on sign in button fails and redirect us back to our app.
Contributor guide
Assessment
This issue has not been assessed yet.