[英][Unhandled promise rejection: ReferenceError: Can't find variable: auth]
I am pretty new to React Native;我对 React Native 很陌生; I have been trying to add google authentication via firebase and I keep running into this warning:我一直在尝试通过 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
Here is my code:这是我的代码:
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);
}
I pass the variable auth here:我在这里传递变量 auth:
await signInWithCredential(auth, credential);
However, no users show up on the authentication page of firebase, and I keep receiving this warning.但是,在 firebase 的身份验证页面上没有用户显示,我一直收到此警告。
Thanks for your help!谢谢你的帮助!
As the error says, you're trying to pass an auth
variable to signInWithCredential
, but you don't declare or initialize it anywhere.正如错误所说,您正在尝试将auth
变量传递给signInWithCredential
,但您没有在任何地方声明或初始化它。 As shown in the documentation on getting started with Firebase Authentication on the web , you can get this with:如关于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);
Please refer to the official documentation provided by firebase for google auth google auth请参考firebase提供的官方文档
The google-signin library provides a wrapper around the official Google login library, allowing you to create a credential and sign-in to Firebase. google-signin库提供了官方 Google 登录库的封装,允许您创建凭据并登录到 Firebase。
Most configuration is already setup when using Google Sign-In with Firebase, however you need to ensure your machines SHA1 key has been configured for use with Android.大多数配置在使用 Google Sign-In 和 Firebase 时已经设置,但是您需要确保您的机器 SHA1 密钥已配置为与 Android 一起使用。 You can see how to generate the key on the Getting Started documentation.您可以在入门文档中查看如何生成密钥。
Ensure the "Google" sign-in provider is enabled on the Firebase Console .确保在Firebase 控制台上启用了“Google”登录提供程序。
Follow these instructions to install and setup google-signin
按照这些说明安装和设置google-signin
Before triggering a sign-in request, you must initialize the Google SDK using your any required scopes and the webClientId
, which can be found in the android/app/google-services.json
file as the client/oauth_client/client_id
property (the id ends with .apps.googleusercontent.com
).在触发登录请求之前,您必须使用任何所需的范围和webClientId
初始化 Google SDK,可以在android/app/google-services.json
文件中找到作为client/oauth_client/client_id
属性(id以.apps.googleusercontent.com
)。 Make sure to pick the client_id
with client_type: 3
确保使用 client_type 选择client_id
client_type: 3
import { GoogleSignin } from '@react-native-google-signin/google-signin';
GoogleSignin.configure({
webClientId: '',
});
Once initialized, setup your application to trigger a sign-in request with Google using the signIn
method.初始化后,设置您的应用程序以使用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!'))}
/>
);
}
The onGoogleButtonPress
can then be implemented as follows:然后可以按如下方式实现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);
}
Upon successful sign-in, any onAuthStateChanged listeners will trigger with the new authentication state of the user.成功登录后,任何onAuthStateChanged侦听器都将使用用户的新身份验证 state 触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.