onAuthStateChanged return User=null when Reload/Refresh Page, firebase React Native

Question

I have problem in firebase authentication - React Native. using OnAuthStateChanged

the login process was successfully executed. but when page is refreshed/reloaded, in debugger it shows value user = 'null', even though I'm logged in.

import {onAuthStateChanged} from 'firebase/auth';
import React, {useEffect} from 'react';
import {auth} from '../../utils/firebase';

export default function GetStarted({navigation}) {
  useEffect(() => {
    onAuthStateChanged(auth, user => {
      console.log('user :', user);
      if (user) {
        navigation.replace('MainApp');
      } else {
        //
      }
    });
  }, [navigation]);

when Logged In ---- Debugger: Loggin

When Reload/Refresh Page --- Debugger: Reload/Refresh Page

using React Native V0.71, Firebase V9 can anyone help me to solve this?, i really appreciate the help

Answer 1

react native needs to use AsyncStorage as persistence, change your 'auth' to initializeAuth

1. install AsyncStorage

   npm install @react-native-async-storage/async-storage
   

2. import these

import AsyncStorage from "@react-native-async-storage/async-storage";
import { initializeAuth, getReactNativePersistence} from 
'firebase/auth/react-native';

...

const Auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage)
})

3. then restart