Cross-Origin-Opener-Policy policy would block the window.closed call.

[ThakurSaad]

Operating System

Windows 11

Browser Version

Chrome Version 125.0.6422.113 (Official Build) (64-bit)

Firebase SDK Version

13.10.2

Firebase SDK Product:

Auth

Describe your project's tooling

• react
• react-router-v6.23.1
• tailwind
• daisyUI
• react-responsive-carousel
• swiper
• react-rating
• react-helmet-async
• react-parallax
• react-tabs
• react-simple-captcha
• firebase
• react-hook-form
• sweetalert2
• react-icons
• axios
• @tanstack/react-query

Describe the problem

I am trying to implement google login on my react web app. But when I click on the button it the error on console shows up. But everything works fine. User gets created in firebase.

Steps and code to reproduce issue

AuthProvider.jsx

import {
  GoogleAuthProvider,
  getAuth,
  signInWithPopup,
} from "firebase/auth";
import { app } from "../firebase/firebase.config";

export const AuthContext = createContext(null);
const auth = getAuth(app);

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const googleProvider = new GoogleAuthProvider();

  const googleSignIn = () => {
    return signInWithPopup(auth, googleProvider);
  };

  const authInfo = {
    googleSignIn,
  };

  return (
    <AuthContext.Provider value={authInfo}>{children}</AuthContext.Provider>
  );
};

export default AuthProvider;

Login.jsx

  const { googleSignIn } = useAuth();

  const handleGoogleSignIn = () => {
    googleSignIn().then((res) => console.log(res));
  };

[jbalidiong]

Hi @ThakurSaad, thanks for reaching out to us. I think this is related to an existing report #8213 . Can you try the workaround provided by our engineer to remove the error, Stack Overflow post?

[ThakurSaad]

@jbalidiong Are you talking about the answer of Artur A?

He said to add something in craco.config.js or nextjs.config.js. But I've no such file. Becuase I am using vite. npm create vite@latest my-project -- --template react

[dlarocque]

We had an issue submitted recently where the user received the same error. https://github.com/firebase/firebase-js-sdk/issues/8265#issuecomment-2133252464 Do you have any security middleware that could be causing this issue?

[ThakurSaad]

The only security measure in the google log in is setting the jsonwebtoken after the user is successfully logged in.

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      console.log("current user", currentUser);
      if (currentUser) {
        const userInfo = {
          email: currentUser.email,
        };
        axiosPublic.post("/jwt", userInfo).then((res) => {
          if (res.data.token) {
            localStorage.setItem("access-token", res.data.token);
            setLoading(false);
          }
        });
      } else {
        localStorage.removeItem("access-token");
      }
    });
    return () => {
      return unsubscribe();
    };
  }, [axiosPublic]);

The jwt is set after the user is logged in. But the error is showing before the user is done login in, when the login request is pending.

---

after some research I've also set the vite.config.js file like this,

export default defineConfig({
  plugins: [react()],
  server: {
    headers: {
      "Cross-Origin-Embedder-Policy": "unsafe-none", // added this part
    },
  },
});

But even then the error is there

[dlarocque]

after some research I've also set the vite.config.js file like this,

export default defineConfig({
  plugins: [react()],
  server: {
    headers: {
      "Cross-Origin-Embedder-Policy": "unsafe-none", // added this part
    },
  },
});

But even then the error is there

As a sanity check: Once you add that configuration to your vite.config.js, is the Cross-Origin-Opener-Policy set to unsafe-none in the request headers that are sent?

[ThakurSaad]

Is it possible to send headers in firebase social login? I don't know how I can send headers in firebase authentication. I am implementing the social login like this, Auth file -

  const googleSignIn = () => {
    return signInWithPopup(auth, googleProvider);
  };

[dlarocque]

Is it possible to send headers in firebase social login? I don't know how I can send headers in firebase authentication. I am implementing the social login like this, Auth file -

  const googleSignIn = () => {
    return signInWithPopup(auth, googleProvider);
  };

Unfortunately it's not possible to attach custom headers using your method. Two questions:

1. If you step through the code that sends the request using a debugger, are you able to see where the problematic header is attached to the request?
2. If the previous step fails, could you provide a minimal application (an application with the minimal amount of code and dependencies, e.g. no react effects, context, etc.) where the issue occurs? I could use that to reproduce the issue locally and try to identify the problem.

[ThakurSaad]

sure. As this is a personal learning project I can give you the github code and here I am using the google sing in function

[vinoddotcom]

Same issue while using Nuxt 3. Please update @dlarocque.

[dlarocque]

sure. As this is a personal learning project I can give you the github code and here I am using the google sing in function

Hi, thanks for sharing the project, and sorry again if you're still having issues with this. Previously this issue has been caused by middleware (not Firebase) attaching headers onto requests. Do you know if this is the case, or is Firebase the source of the issue here? Also, have you been able to create a minimal reproduction of the issue (an app with a minimal amount of external code / dependencies where the issue still exists)?

[dlarocque]

Same issue while using Nuxt 3. Please update @dlarocque.

Hi, thanks for reporting this! Could you share more details about your projects tooling and any middleware you are using?

[google-oss-bot]

Hey @ThakurSaad. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[BasemYahia402]

same issue with all same details Please solve @dlarocque