首次使用 navigation.navigate 加载页面时未获取 currentUser.uid

Question

When the page first loads, I am trying to immediately get the user UID and user IDToken and display it in the console, as well as use both of these to retrieve user data from the backend.

I have already authenticated the user and logged into my application in react-native running on expo.

I am using the UID as part of the URL, and the token to authenticate the user.

I am also logging this data in the console.

When the page first loads, the user Token is being displayed on the console correctly, but the user UID is not. Only when I refresh the page is the user UID then displayed in the console.

Because the User UID is not loading on page load, the function to get invoices, getUserInvoices() properly is not being triggered, and I am not able to retrieve data because I am not authenticated with the backend.

I'm not sure why this is happening, and am feeling lost. Any help would be appreciated!

import { StyleSheet, Text, View } from 'react-native'
import React, { useEffect, useState} from 'react'
import {auth} from '../firebase';

const InvoicesScreen = () => {


  const [myIdToken, setMyIdToken] = useState('');
  const [myUserUID, setMyUserUID] = useState('');
  const [userCurrency, setUserCurrency] = useState([]);
  

  React.useEffect(() => {

   

     async function getUserUID() {
      if (auth.currentUser) {
        setMyUserUID(auth.currentUser?.uid);
        console.log('\nUser UID = ',myUserUID, `\n`);
        
      }
      
    } //end of function to get user UID


    async function getUserInvoices() {
      await fetch(`https://testing123/${myUserUID}/details/all`, {
        headers: {
          'Authorization': `Bearer ${myIdToken}`
        }
      })
      .then((response) => {return response.json()})
      .then((text) => {
        
        console.log('\n');
        console.log('Invoice Info: ', text);
        console.log('\n');

        for (let i=0;i<text.length;i++) {
          setUserCurrency([...userCurrency, text[i].amount.currency])
           }
        console.log(userCurrency)
        console.log('\n*********************************************************************************************************************************')

        
        // console.log(text.length)
        // console.log(text[0].amount.currency)
        // console.log(text[0].country)
      })
    } //end of getUserInvoices() function



    async function getUserIdToken() {
      await auth.currentUser?.getIdToken().then((token) => {
        if (auth.currentUser) {
          setMyIdToken(token);
          console.log('\n*********************************************************************************************************************************')
          console.log('\n\nUser Token: ', token, '\n');
        //   getUserUID();
        //   getUserInvoices();
        //tried running it inside this function too, but it also didn't work
         }
      
      })
    } //end of function setting user JSON token in the myIdToken variable 


    //tried doing this too, but it still didn't work as well
    // getUserUID().then(() => {
    //   getUserIdToken().then(() => {
    //     getUserInvoices();
    //   })
    // }) 

    getUserUID();
    getUserIdToken();
    getUserInvoices();




  }, []);

  return (
    <View style={styles.container}>
      <Text>InvoicesScreen</Text>
    </View>
  )
}

export default InvoicesScreen

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
})

I also tried looking into React Context, but from my understanding (might be wrong) it seems like it's mainly used for rendering data from one screen to another visually, for example through a Text component, but I am trying to access this data inside useEffect.

Answer 1

Firebase Authentication automatically persists the user credentials to local storage, and restores them when the app restarts. But to do that, it needs to. make a call to the server (ao to check if the account was suspected), which means it's an asynchronous process. Since your initialization code runs synchronously when the page/app loads, it checks currentUser before the check with the server has completed - at which point it will still be null .

For this type of scenario you'll want to use an auth state change listener , which fires for the first time after the check with the server has completed. Until that Firebase, you might want to show a UI that says you're restoring the user profile.

So something like:

1. Set a state variable isLoadingUser to true by default.
2. Render the "Restoring user profile UI" is isLoadingUser is true.
3. Attach an auth state change listener when the screen loads.
4. When the auth state change callback fires, set isLoadingUser to false, and render the UI as you do now.