Why I need to press Login button 2 times then it will fetch the user data from firestore?

Question

I am new to react-native and firebase authentication also firestore database. Basically here I would like to implement 3 different types of user which is buyer, seller and admin in one login screen. But I am having something like bug or error that I need to press Login button 2 times then it will fetch the user data from firestore.

Everytime I run the code for the first time, the code will enter the if(docsnap.exist()) then it will straight go to else statement. When I successfully logged in either as buyer or admin, I logged out from the system and try to login using other emails, the console.log(userInfo) will display previous logged in user's data.

Here is my

loginScreen.js

import { useNavigation } from '@react-navigation/native';
import { signInWithEmailAndPassword } from 'firebase/auth';
import React, { useEffect, useState } from 'react';
import { Text, TextInput, TouchableHighlight, Image, View } from 'react-native';
import { authentication,db } from '../../firebase';
import styles from '../../styles/screens/LogoutStack/loginScreen.style';
import { doc, getDoc } from 'firebase/firestore';

export default function LoginScreen() {

    const navigation = useNavigation()
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [userInfo, setUserInfo] = useState('')
    const SignIn = async () => {
        signInWithEmailAndPassword(authentication,email,password)
            .then( async (result) => {
                user = result.user; 
                console.log("test")
                const docRef = doc(db, "users", user.uid);
                const docSnap = await getDoc(docRef);
                console.log("yay");
                if (docSnap.exists()) {
                    const data = docSnap.data();
                    setUserInfo(data);
                    console.log(userInfo);
                    if (userInfo.role == "buyer") {
                        console.log("lol1");
                        navigation.navigate('Home')
                    } else if (userInfo.role == "seller") {
                        console.log("lol3");
                    } else if (userInfo.role == "admin") {
                        console.log("lol2");
                        navigation.navigate('Home')
                    } else {
                        console.log("lol");
                    }
                } else {
                    // doc.data() will be undefined in this case
                    console.log("No such document!");
                }
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
            })
    }
    return (
        <View style={styles.container}>
            <View style={styles.upper}>
                <Image
                    style={styles.image}
                    source={require('../../assets/Foodie-assets/LogoLoginBlack.png')}
                />
                <Text style={styles.h1}>Login</Text>
            </View>
            <View>
                <Text style={styles.text}>Email</Text>
                <TextInput 
                    value={email}
                    onChangeText={text => setEmail(text)}
                    style={styles.input} 
                />
                <Text style={styles.text}>Password</Text>
                <TextInput
                    value={password}
                    onChangeText={text => setPassword(text)} 
                    style={styles.input} 
                    secureTextEntry
                />
                <TouchableHighlight onPress={SignIn} style={styles.button}>
                    <Text style={styles.textButton}>Login</Text>
                </TouchableHighlight>
                <View style={styles.or}>
                    <Text style={styles.text}>OR</Text>
                </View>
                <TouchableHighlight onPress={() => navigation.navigate('Register')} style={styles.button}>
                    <Text style={styles.textButton}>Register</Text>
                </TouchableHighlight>

            </View>
        </View>
    );
}

I really hope someone can help me fix this problem because this system is for my final year project.

Thank you.

Answer 1

Just a suggestion, try adding 'await' at this code block,

user = await result.user;

And try explicitly call the function onPress={signIn()} and see if it helps