首页 > 解决方案 > React Native:Firestore 对用户进行身份验证,但不将文档添加到用户集合

问题描述

所以我对 Firebase 整体来说还很陌生,我刚开始在 React Native 中使用它。现在我正在尝试注册一个新用户。为此,我使用电子邮件和密码对用户进行身份验证,然后尝试将新用户添加到我在 firebase 中的集合中。问题是我可以使用密码和电子邮件创建用户,但是当我查看我的用户集合时,我仍然只有我最初开始使用的一个用户,而不是应该创建的新用户。我究竟做错了什么?

这是我的注册文件:

import React, {useState} from 'react'
import { View, Text, TextInput, ScrollView } from 'react-native'
import {Avatar} from 'react-native-elements';
import {Styles} from '../StyleSheets/index';
import {Button} from '../components/Button';
import {firebase} from '../backend/firebase';

const Register = ({navigation}) => {
    const [fullName, setFullName] = useState('');
    const [email, setEmail] = useState('');
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [profileImage, setProfileImage] = useState(null);

    const validateUser = () => {
        console.log('validating user')
        firebase.auth().createUserWithEmailAndPassword(email, password).then(response => {
            console.log('created user with email and password')
            const uid = response.user.uid;
            const data = {
                id: uid,
                email,
                fullName,
                profile_image: "",
                username
            }
            
            const db = firebase.firestore()
            db.collection('users').doc(uid).set(data).then(() => {
                console.log('user was created')
                navigation.reset({index: 0, routes: [{name: 'Feed'}]})
            }).catch(e => {
                alert(e);
            })
        }).catch(e => {
            alert(e);
        })      
    }

    const selectProfileImage = () => {
        console.log('user selecting image')
        // allow user to access their photos or take a photo, and then update the image src with that image.
    }

    return (
        <ScrollView keyboardShouldPersistTaps='handled' contentContainerStyle={Styles.container}>
            <Text >Welcome!</Text>
            <Text >Sign Up to get started.</Text>
            <Avatar size="xlarge" containerStyle={{backgroundColor: '#DDDDDD', marginTop: 50, marginBottom: 20}} icon={{name: 'camera', type: 'feather'}} source={{uri: profileImage}} rounded onPress={selectProfileImage} />            
            <TextInput style={Styles.text_input} textContentType="name" placeholder="Name" onChangeText={text => setFullName(text)}/>
            <TextInput style={Styles.text_input} textContentType="emailAddress" placeholder="Email" onChangeText={text => setEmail(text)}/>
            <TextInput style={Styles.text_input} textContentType="username" placeholder="Username" onChangeText={text => setUsername(text)}/>
            <TextInput style={Styles.text_input} textContentType="password" secureTextEntry placeholder="Password" onChangeText={text => setPassword(text)}/>            
            <Button style={Styles.button_clear} title="Sign Up" onPress={validateUser} />
            <View style={{flexDirection: 'row'}}>
                <Text>Already have an account? </Text><Button textColor="#ff08e6" title="Log In" onPress={() => navigation.navigate('Login')}/>
            </View>
        </ScrollView>
    )
}

export default Register

这是firebase配置文件:

// contains firebase config
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import * as firebase from 'firebase';
import '@firebase/auth';
import '@firebase/firestore';

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "myapp.firebaseapp.com",
    projectId: "myapp",
    storageBucket: "myapp.appspot.com",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "1:xxxxxxxx:web:xxxxxxxx",
    measurementId: "G-xxxxxxxx"
};

if(!firebase.apps.length){
    firebase.initializeApp(firebaseConfig);
}

export {firebase}

我目前正在通过我的 iPhone 测试我的应用程序。我还将 .plist 文件添加到应用程序的根文件夹中。我在网上查看了其他答案,但没有一个对我有用。我也没有收到任何错误日志,但我的应用程序永远不会到达user created日志。我希望 firebase 能够为这种情况添加更好的错误处理。

如果有人知道可能导致我的问题的原因,那将非常有帮助。蒂亚!

标签: firebasereact-native

解决方案


推荐阅读