Firebase 谷歌登錄身份驗證和彈出窗口在 React 項目中不起作用

Question

實際上我不知道 firebase 只是遵循反應課程，我的講師使用相同的代碼但它在我這邊不起作用......我已經在 firebase 項目應用程序中啟用了谷歌登錄。 這是我導入 firebase、配置應用程序並使用 PopUp 方法的代碼

import firebase from "firebase/app";

import "firebase/auth";
import "firebase/firestore";

const config = {
  apiKey: "AIzaSyAl-E7TezE_hUH9QLXVegrG9w3X72tlBSs",
  authDomain: "crwn-db-65f80.firebaseapp.com",
  databaseURL: "https://crwn-db-65f80.firebaseio.com",
  projectId: "crwn-db-65f80",
  storageBucket: "crwn-db-65f80.appspot.com",
  messagingSenderId: "92304636614",
  appId: "1:92304636614:web:7cf30df27d77b20714f5c7",
  measurementId: "G-TN40FHGKV0"
};

firebase.initializeApp(config);

export const auth = firebase.auth();
export const firestore = firebase.firestore();

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

export const signInWithGoogle = () => auth.signInWithGoogle(provider);

export default firebase;

這是來自另一個文件的一段代碼：

import {signInWithGoogle} from './firebase.utils';
<form onSubmit={this.handleSubmit}>
<button onClick={signInWithGoogle}>SignIn With Google </button>
</form>

Answer 1

如果我沒記錯的話，這是來自 Udemy 的 Complete React Developer in 2020（w/ Redux、Hooks、GraphQL）課程。

我也被困在這里然后我意識到我沒有在 CustomButton 組件中解壓自定義道具。 這樣做，讓我知道它是否有幫助：

const CustomButton = ({ children, ...props }) => {

Answer 2

如果您使用的是 Google Chrome 或 Microsoft Edge 瀏覽器，它會顯示為空白。 嘗試使用不同的瀏覽器（如 Firefox）。 這對我有用。

希望這可以幫助！

Answer 3

await GoogleSignin.revokeAccess();

await GoogleSignin.signOut();