[未處理的 promise 拒絕：ReferenceError：找不到變量：auth]

Question

我對 React Native 很陌生； 我一直在嘗試通過 firebase 添加谷歌身份驗證，但我一直遇到這個警告：

[Unhandled promise rejection: ReferenceError: Can't find variable: auth]
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:66:31 in <anonymous>
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:124:27 in invoke
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:148:16 in PromiseImpl$argument_0
at node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:147:15 in callInvokeWithMethodAndArg
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:152:154 in _invoke
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:238:57 in exports.async
at node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:177:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:437:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:388:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:131:4 in flushedQueue

這是我的代碼：

import React, { createContext, useContext } from 'react';
import * as Google from "expo-google-app-auth";

import{
  GoogleAuthProvider,
  onAuthStateChanged,
  signInWithCredential,
  signOut,
} from "@firebase/auth";


const AuthContext = createContext({});

const config = {
  androidClientId: key,
  iosClientId: key,
  scopes: ['profile', 'email'],
  permissions: ['public_profile', 'email', 'gender', 'location'],
}

export const AuthProvider = ({children}) => {
  const signInWithGoogle = async () => {
      await Google.logInAsync(config).then(async (logInResult) => {
        if(logInResult.type === 'success'){
            const { idToken, accessToken }  = logInResult;
            const credential = GoogleAuthProvider.credential(idToken, accessToken);

            await signInWithCredential(auth, credential);
        }

        return Promise.reject();
      });
  };

    return (
      <AuthContext.Provider value ={{
          user: null,
          signInWithGoogle
      }}
      >
        {children}
      </AuthContext.Provider>
    );
};

export default function useAuth() {
    return useContext(AuthContext);
}

我在這里傳遞變量 auth：

await signInWithCredential(auth, credential);

但是，在 firebase 的身份驗證頁面上沒有用戶顯示，我一直收到此警告。

謝謝你的幫助！

Answer 1

正如錯誤所說，您正在嘗試將auth變量傳遞給signInWithCredential ，但您沒有在任何地方聲明或初始化它。 如關於web 上 Firebase 身份驗證入門的文檔中所示，您可以通過以下方式獲得：

import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Answer 2

google auth請參考firebase提供的官方文檔

google-signin庫提供了官方 Google 登錄庫的封裝，允許您創建憑據並登錄到 Firebase。

大多數配置在使用 Google Sign-In 和 Firebase 時已經設置，但是您需要確保您的機器 SHA1 密鑰已配置為與 Android 一起使用。 您可以在入門文檔中查看如何生成密鑰。

確保在Firebase 控制台上啟用了“Google”登錄提供程序。

按照這些說明安裝和設置google-signin

在觸發登錄請求之前，您必須使用任何所需的范圍和webClientId初始化 Google SDK，可以在android/app/google-services.json文件中找到作為client/oauth_client/client_id屬性（id以.apps.googleusercontent.com ）。 確保使用 client_type 選擇client_id client_type: 3

    import { GoogleSignin } from '@react-native-google-signin/google-signin';
    
    GoogleSignin.configure({
      webClientId: '',
    });

初始化后，設置您的應用程序以使用signIn方法向 Google 觸發登錄請求。

    import React from 'react';
    import { Button } from 'react-native';
    
    function GoogleSignIn() {
      return (
        <Button
          title="Google Sign-In"
          onPress={() => onGoogleButtonPress().then(() => console.log('Signed in with Google!'))}
        />
      );
    }

然后可以按如下方式實現onGoogleButtonPress ：

    import auth from '@react-native-firebase/auth';
    import { GoogleSignin } from '@react-native-google-signin/google-signin';
    
    async function onGoogleButtonPress() {
      // Get the users ID token
      const { idToken } = await GoogleSignin.signIn();
    
      // Create a Google credential with the token
      const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    
      // Sign-in the user with the credential
      return auth().signInWithCredential(googleCredential);
    }

成功登錄后，任何onAuthStateChanged偵聽器都將使用用戶的新身份驗證 state 觸發。