javascript - 尝试登录时反应本机firebase注销方法会删除我的电子邮件和密码数据

Question

我的 react native 应用程序中有一个注销方法，每次我注销并尝试重新登录我的电子邮件时，firebase 中都不会记住密码。数据库显示了电子邮件和密码，但由于某种原因，当我输入我的电子邮件和密码时它没有登录。我找不到我做错了什么。

这是我的登录屏幕

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View, ImageBackground } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';
import { firebase } from '../../firebase/config';


export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')


    const onFooterLinkPress1 = () => {
        navigation.navigate("Registration")
    }

    const onFooterLinkPress2 = () => {
        navigation.navigate("ResetPassword")
    }

    const onLoginPress = () => {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .get()
                    .then(firestoreDocument => {
                        if (!firestoreDocument.exists) {
                            alert("User does not exist anymore.")
                            return;
                        }
                        const user = firestoreDocument.data()
                        
                    })
                    .catch(error => {
                        alert(error)
                    });
            })
            .catch(error => {
                alert(error)
            })
        }

    return (
        <ImageBackground source={require('../../../assets/backgroundCopySilk.jpg')} style={styles.backgroundImage}>
        <View style={styles.container}>
            <KeyboardAwareScrollView
                style={{ flex: 1, width: '100%' }}
                keyboardShouldPersistTaps="always">
                <Image
                    style={styles.logo}
                    source={require('../../../assets/logoCopy.png')}
                />
                <TextInput
                    style={styles.input}
                    placeholder='E-mail'
                    placeholderTextColor="#aaaaaa"
                    onChangeText={(text) => setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TextInput
                    style={styles.input}
                    placeholderTextColor="#aaaaaa"
                    secureTextEntry
                    placeholder='Password'
                    onChangeText={(text) => setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => onLoginPress()}>
                    <Text style={styles.buttonTitle}>Log in</Text>
                </TouchableOpacity>
                <View style={styles.footerView}>
                    <Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress1} style={styles.footerLink}>Sign up</Text></Text>
                </View>
                <View style={styles.footerView}>
                    <Text style={styles.footerText}>Forgot Password? <Text onPress={onFooterLinkPress2} style={styles.footerLink}>Reset Here</Text></Text>
                </View>
            </KeyboardAwareScrollView>
        </View>
        </ImageBackground>
    )
}

这是我的退出屏幕

import React from 'react';
import { Image, Text, Linking, TouchableOpacity, View,ImageBackground, Alert } from 'react-native'
import styles from './styles';
import { firebase } from '../../firebase/config';
import { auth } from 'firebase';
import {Spacer} from '../spacer';



export default function ProductScreen({navigation}){

    const logOutPress = () => {
        try {
        auth()
        .signOut()
        .then(() => { navigation.navigate("Login"),
        alert('You have signed out')})
    } catch(error){
    console.log('Unable to logout')}
    }

   const yalaPress = () =>  Alert.alert( "You're about to leave the app",[
    { text: "Cancel",
        onPress: ()=> console.log('Cancel Pressed')},
    {text: "Ok", 
        onPress: () => Linking.openURL('https://yalajets.com/')
    }],{ cancelable: false }  );


    return(
<ImageBackground source={require('../../../assets/backgroundCopySilk.jpg')} style={styles.backgroundImage}>
<View style={styles.container}>

<TouchableOpacity 
onPress={()=> navigation.navigate('LawnCare')}
style={styles.button}>
<Text style={styles.buttonText}>Luxury Commercial Lawn Care</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Vehicle Car Detail</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Pharmaceuticals</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Personal Fitness</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Luxury Massage with Catch These Hands</Text>
</TouchableOpacity>

<TouchableOpacity 
onPress={yalaPress}
style={styles.button}>
<Text style={styles.buttonText}>Luxury Private Flights with Yala Jets</Text>
</TouchableOpacity>

<Spacer/>
<TouchableOpacity
onPress={()=> logOutPress()}>
<Text style={styles.buttonText}>Log Out</Text>
</TouchableOpacity>
        </View>
</ImageBackground>
    )
};

这也是我的注册屏幕

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View,ImageBackground } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';
import { firebase } from '../../firebase/config'


export default function RegistrationScreen({navigation}) {
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [confirmPassword, setConfirmPassword] = useState('')
    const onFooterLinkPress = () => {
        navigation.navigate('Login')
    }

   
    const onRegisterPress = () => {
        if (password !== confirmPassword) {
            alert("Passwords don't match.")
            return
        }
        firebase
            .auth()
            .createUserWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const data = {
                    id: uid,
                    email,
                    firstName,
                    lastName
                };
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .set(data)
                    .then(() => {
                        navigation.navigate("Products", {user: data})
                    })
                    .catch((error) => {
                        alert(error)
                    });
            })
            .catch((error) => {
                alert(error)
        });
    }

    return (
        <ImageBackground source={require('../../../assets/backgroundCopySilk.jpg')} style={styles.backgroundImage}>
        <View style={styles.container}>
            <KeyboardAwareScrollView
                style={{ flex: 1, width: '100%' }}
                keyboardShouldPersistTaps="always">
                <Image
                    style={styles.logo}
                    source={require('../../../assets/logoCopy.png')}
                />
                <TextInput
                    style={styles.input}
                    placeholder='First Name'
                    placeholderTextColor="#aaaaaa"
                    onChangeText={(text) => setFirstName(text)}
                    value={firstName}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TextInput
                    style={styles.input}
                    placeholder='Last Name'
                    placeholderTextColor="#aaaaaa"
                    onChangeText={(text) => setLastName(text)}
                    value={lastName}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TextInput
                    style={styles.input}
                    placeholder='E-mail'
                    placeholderTextColor="#aaaaaa"
                    onChangeText={(text) => setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TextInput
                    style={styles.input}
                    placeholderTextColor="#aaaaaa"
                    secureTextEntry
                    placeholder='Password'
                    onChangeText={(text) => setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TextInput
                    style={styles.input}
                    placeholderTextColor="#aaaaaa"
                    secureTextEntry
                    placeholder='Confirm Password'
                    onChangeText={(text) => setConfirmPassword(text)}
                    value={confirmPassword}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => onRegisterPress()}>
                    <Text style={styles.buttonTitle}>Create account</Text>
                </TouchableOpacity>
                <View style={styles.footerView}>
                    <Text style={styles.footerText}>Already got an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Log in</Text></Text>
                </View>
            </KeyboardAwareScrollView>
        </View>
        </ImageBackground>
    )
}

标签： javascriptfirebasereact-nativefirebase-authentication

Answer 1

对于创建用户，您需要在方法中添加一些数据：

firebase
            .auth()
            .createUserWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const data = {
                    id: uid,
                    email: useremail,
                    firstName: firstname,
                    lastName: lastname
                };
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .set(data, {merge: true})
                    .then(() => {
                        navigation.navigate("Products", {user: data})
                    })
                    .catch((error) => {
                        alert(error)
                    });
            })
            .catch((error) => {
                alert(error)
        });

您创建登录方法，其中您检查是新用户，例如这样。

emailPassRegister(mail, password) {
    this.afAuth.createUserWithEmailAndPassword(mail, pasword).then(ref => {
      if (ref.additionalUserInfo.isNewUser) {
        // method for new user
        this.addNewUser(ref.user);
        this.router.navigate(['/']);
      } else {
        // method for reapeater user
        this.updataUser(ref.user);
        this.router.navigate(['/']);
      }
    });
  }

但每次如果您设置新数据，您需要使用 {merge: true}，因为如果文档或文件不存在，则如果存在更新则创建。我希望能帮助你解决你的问题。

注册用户方法：

RegisterUser() {
  emailPassRegister(**username from input**, **password from input**);
}