firebase / firebase/firebase-js-sdk

Sign In fails when using custom OIDC provider

Open
#8,790 3 comments 0 reactions 0 assignees View on GitHub
api: auth needs-attention question stack:React
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.