将Firebase Google身份验证与React Native配合使用

u2nhd7ah  于 2023-02-05  发布在  React
关注(0)|答案(1)|浏览(169)

我在尝试使用Firebase的SignIn With google auth方法时遇到了一个错误。到目前为止,我遇到了:
1.在我的管理控制台中启用了Google身份验证方法
1.查看了相关文档并实施了要求
1.已启用,并已正确获得电子邮件/密码授权
我正在尝试使用signInWithPopup方法而不是重定向。
下面是SignIn.js代码文件:

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput, Pressable } from 'react-native';
import tw from 'tailwind-react-native-classnames';
import { signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { auth, provider } from "../firebaseConfig";
import { Ionicons } from '@expo/vector-icons';
import { Feather } from '@expo/vector-icons';

import SignInHeader from '../components/SignInHeader';

export default function SignIn({ navigation }) {

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    let signInWithGoogle = () => {
        signInWithPopup(auth, provider)
            .then((result) => {
                const credential = GoogleAuthProvider.credentialFromResult(result);
                const token = credential.accessToken;
                const user = result.user;
                navigation.navigate("Home");
                console.log(user);
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                const email = error.customData.email;
                const credential = GoogleAuthProvider.credentialFromError(error);
                console.log(errorCode, errorMessage, email, credential);
            });
    }

    let signIn = () => {
        signInWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                const user = userCredential.user;
                navigation.navigate("Home");
                console.log(user);
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                console.log(errorCode, errorMessage);
                switch (errorCode) {
                    case "auth/invalid-email":
                        alert("Please Enter a valid email address");
                        break;
                    case "auth/user-not-found":
                        alert("User not found");
                        break;
                    case "auth/wrong-password":
                        alert("Incorrect Password. Try again.");
                        break;
                    case "auth/internal-error":
                        alert("Please enter a valid password");
                        break;
                }
            });
    }


    return (
        <>
            <SignInHeader />
            <View style={{ alignItems: 'center', marginTop: '25%', paddingTop: 10 }}>
                <View style={styles.searchSection}>
                    <Ionicons name="mail-outline" size={20} color="black" style={styles.searchIcon} />
                    <TextInput
                        style={styles.input}
                        placeholder="Email"
                        onChangeText={text => setEmail(text)}
                        value={email}
                        clearButtonMode="always"

                    />
                </View>
                <View style={{ padding: 25 }}>
                    <View style={styles.searchSection}>
                        <Feather name="lock" size={20} color="black" style={styles.searchIcon} />
                        <TextInput
                            style={styles.input}
                            placeholder="Password"
                            onChangeText={text => setPassword(text)}
                            value={password}
                            secureTextEntry={true}
                            clearButtonMode="always"
                        />
                    </View>
                </View>
                <Pressable style={{ marginLeft: '55%', marginTop: -10 }} onPress={() => navigation.navigate("ResetPassword")}>
                    <Text style={{ color: '#cdcdcd' }}>Forgot Password?</Text>
                </Pressable>

                <Pressable onPress={signIn} style={({ pressed }) => [
                    {
                        backgroundColor: pressed
                            ? '#34AE65'
                            : '#64DA93'
                    },
                    styles.notPressed,
                ]}>
                    <Text style={{ fontFamily: "OpenSans_600SemiBold", fontSize: 20, color: 'white' }}>Log In</Text>
                </Pressable>

                <Pressable onPress={signInWithGoogle} style={({ pressed }) => [
                    {
                        backgroundColor: pressed
                            ? '#34AE65'
                            : '#64DA93'
                    },
                    styles.notPressed,
                ]}>
                    <Text style={{ fontFamily: "OpenSans_600SemiBold", fontSize: 20, color: 'white' }}>Log In with Google</Text>
                </Pressable>

                <Pressable onPress={() => navigation.navigate("SignUp")}>
                    <Text style={{ flex: 1, color: '#cdcdcd', marginTop: 20, flexDirection: 'row' }}>Don't have and account?<Text style={{ color: 'grey' }}> Sign Up</Text></Text>
                </Pressable>

            </View >
        </>
    );
}

const styles = StyleSheet.create({
    searchSection: {
        flexDirection: 'row',
        alignItems: 'center',
        width: 360,
        height: 45,
        borderBottomColor: '#64DA93',
        borderBottomWidth: 2,
    },
    searchIcon: {
        padding: 1,

    },
    input: {
        flex: 1,
        paddingTop: 10,
        paddingRight: 10,
        paddingBottom: 10,
        paddingLeft: 10,
    },
    notPressed: {
        height: 45,
        width: 360,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        marginTop: 50
    }
});

接下来,重要的是我的firebaseConfig.js代码文件:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
    apiKey: "xx",
    authDomain: "xx",
    projectId: "xx",
    storageBucket: "xx",
    messagingSenderId: "xx",
    appId: "xx",
    measurementId: "xx"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const provider = new GoogleAuthProvider();
export { auth, provider };

这是错误:
错误类型错误:(0,_auth. signInWithPopup)不是函数。(在"(0,_auth. signInWithPopup)(_firebaseConfig. auth,_firebaseConfig. provider)"中,"(0,_auth. signInWithPopup)"未定义)
谢谢你的帮助。

iklwldmw

iklwldmw1#

React Native中不支持signInWithPopup。请改用auth().signInWithCredential(googleCredential)
成功登录后,任何onAuthStateChanged侦听器都将使用用户的新身份验证状态触发。
考虑使用this library,因为您正在使用的是真正用于Web的

相关问题