Question 33127 in React native Question posted in
The official React Native documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    It sounds like you may be running on a platform where the Firebase SDK doesn’t automatically persist user data. Have a look at the documentation on authentication state persistence to find your options.

    Login or Signup to reply.
  2. 0

    I you are using react-navigation v6 I strongly suggest you use the logic below

    import React, { useEffect, useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { onAuthStateChanged, getAuth } from "firebase/auth/react-native";
import app from "../firebase-initialization";
import AuthNavigator from "./auth-navigator";
import AppNavigator from "./app-navigator";
import SplashScreen from "./splash-screen";

const auth = getAuth(app); // where app is the app you initialized with firebase

export default function Navigation() {
  const [loading, setLoading] = useState(true);
  const [authState, setAuthState] = useState(null);
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setLoading(true);
      if (user) {
        setAuthState(true);
        setLoading(false);
      } else {
        setAuthState(false);
        setLoading(false);
      }
    });
    return () => {
      unsubscribe();
    };
  }, []);
  return loading ? <SplashScreen/> : <NavigationContainer>{authState ? 
   <AppNavigator /> : <AuthNavigator />}</NavigationContainer>;
   }

    you should never user navigation.replace(‘MainApp’) to manually navigate between stacks on auth state changes. Simply put here we’re displaying a splash screen until the onAuthStateChanged finishes running. if finished we check if the user is logged in. if yes authState is true else false. and we display MainApp or authStack accordingly.

    Edit
    I noticed firebase uses AsyncStorage from react native for storing user’s session (Whether it is a secure way to store it I don’t think so ) so you may run into a warning saying that AsyncStorage must be imported from @react-native-async-storage/async-storage.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search