使用 google auth npm 时出现 firebase 错误

Question

我正在尝试学习火力基地，以下是代码

import { initializeApp } from "firebase/app";

import {
  getAuth,
  signInWithRedirect,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: "API KEY",
  authDomain: "crwn-clothing-db-4d333.firebaseapp.com",
  projectId: "crwn-clothing-db-4d333",
  storageBucket: "crwn-clothing-db-4d333.appspot.com",
  messagingSenderId: "SENDER ID",
  appId: "API ID",
  measurementId: "G-6MLB6CSGZR",
};

const app = initializeApp(firebaseConfig);

const provider = new GoogleAuthProvider();
provider.setCustomParameters({
  prompt: "select_account",
});

export const auth = getAuth();
export const signInWithGooglePopup = () => signInWithPopup(auth, provider);

以下是登录页面

import React from "react";
import { signInWithGooglePopup } from "../../../utils/firebase/firebase.utils";

function SignIn() {
  const logGoogleUser = async () => {
    try {
      const response = await signInWithGooglePopup();
      console.log(response);
    } catch (error) {
      // Handle specific error: auth/popup-closed-by-user
      if (error.code === "auth/popup-closed-by-user") {
        console.log("Google sign-in popup was closed by the user.");
        // Handle this case as needed (e.g., show a message to the user)
      } else {
        console.error("Error during Google sign-in:", error);
      }
    }
  };

  return (
    <div>
      <h1>Sign In Page</h1>
      <button onClick={logGoogleUser}>Sign In With Google Popup</button>
    </div>
  );
}

export default SignIn;

我在控制台中收到以下错误

错误处理响应：错误：无法从“位置”读取命名属性“href”：阻止来源为“https://crwn-clothing-db-4d333.firebaseapp.com”的框架访问跨源框架.

在 tryShowingMateBar （成功时评估（chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke/src/kernel/kernel.js:233:37），:5428:57）

at eval (eval at success (chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke/src/kernel/kernel.js:233:37), \<anonymous\>:153:17)

at eval (eval at success (chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke/src/kernel/kernel.js:233:37), \<anonymous\>:108:27)

popup.ts:289 Cross-Origin-Opener-Policy 策略会阻止 window.close 调用。 民意调查@popup.ts:289

popup.ts:289 Cross-Origin-Opener-Policy 策略会阻止 window.close 调用。 民意调查@popup.ts:289

popup.ts:289 Cross-Origin-Opener-Policy 策略会阻止 window.close 调用。 民意调查@popup.ts:289

popup.ts:289 Cross-Origin-Opener-Policy 策略会阻止 window.close 调用。 民意调查@popup.ts:289

signin.component.jsx：8 UserCredentialImpl {用户：UserImpl，providerId：'google.com'，_tokenResponse：{…}，操作类型：'signIn'}

登录：1 未捕获（承诺中）错误：侦听器通过返回 true 指示异步响应，但消息通道在收到响应之前关闭 webpackHotDevClient.js:76 开发服务器已断开连接。 如有必要请刷新页面。

有人可以指导我我做错了什么吗

我正在尝试制作一个 firebase 应用程序

Answer 1

     const logGoogleUser = async() => {
            const provider = new GoogleAuthProvider() 
            const auth = getAuth(app)
            provider.setCustomParameters({prompt:"select-account"}) // Add this
           
           // Rest of the code
           }