Firebase logs out user when reloading Expo

Question

Firebase screen

import  firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: "xxxxx",
    authDomain: "xxxx",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxxxx",
    appId: "xxxxxxxx",
    measurementId: "xxxxxx"
};

let app;

if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig)
} else {
  app = firebase.app();
}


const db = app.firestore();
const auth = firebase.auth();
const api = firebase.app();
const phoneAuth = firebase.auth;

export { db, auth, api, phoneAuth};

App Screen

//redux
import {Provider} from 'react-redux';
import { createStore, applyMiddleware } from "redux";
import rootReducer from "./redux/reducers";
import thunk from "redux-thunk";
import { auth } from './src/config/firebase';


const store = createStore(rootReducer, applyMiddleware(thunk));

const Stack = createNativeStackNavigator();



export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
    };
  }

   componentDidMount() {
     auth.onAuthStateChanged((user) => {
      console.log(user)<------------------------------------------
      if (!user) {
        this.setState({
          loggedIn: false,
          loaded: true,
        });
      } else {
        this.setState({
          loggedIn: true,
          loaded: true
        });
      }
    });
  }

  

    render() {
      const { loggedIn, loaded } = this.state;

      if (!loaded) {
        return (
          <SafeAreaView>
              <Text>Template</Text>
              <ActivityIndicator  size='large' color='white'/>
          </SafeAreaView>
        );
      }
      if(!loggedIn) {
        return (
          <Provider store={store}>
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen name="Landing" component={LandingScreen}/>
                <Stack.Screen name="Register" component={RegisterScreen}/>
                <Stack.Screen name="SignGuest" component={SignGuestScreen}/>
                <Stack.Screen name="VerifyPhoneNumber" component={VerifyPhoneNumberScreen} />
                <Stack.Screen name="AddressSearchPage" component={AddressSearchPageScreen} />
                <Stack.Screen name="AddressSearch" component={AddressSearchScreen} />
              </Stack.Navigator>
            </NavigationContainer>
          </Provider>
        )
      }
        return (
          <Provider store={store}>
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen name="TabNavigator" component={TabNavigatorScreen} />
                <Stack.Screen name="Account" component={AccountScreen}/>
                <Stack.Screen name="Cart" component={CartScreen}/>
                <Stack.Screen name="RegisterModal" component={RegisterModalScreen} />
                <Stack.Screen name="AddressSearch" component={AddressSearchScreen} />
                <Stack.Screen name="DisplayItem" component={DisplayItemScreen} />
              </Stack.Navigator>
            </NavigationContainer>
        </Provider>
      )}
  }

  export default App;

Firebase logs out user when reloading expo. I put a console.log in the componentDidMount to see the problem and it returns null after the app reloads.

To be honest I don't understand where the problem is.

I would like for the user to stay logged in. I've tried many methods and read a lot of tutorials, but it just doesn't seem to work.

Answer 1

To add a workaround for your issue with the auth, You can apply a modular approach instead of using the compat approach from the firebase.

As per the documentation, Compat is a temporary workaround if you are already using the firebase v8 SDK.

It should work but I also don't know why it is not working.

For This, I created a demo and used the modular approach from firebase and it is working properly.

Check the Doc: Firebase Modular Update documentation

You can use the Modular approach from firebase to implement the auth functionality.

Code.

import React, { useEffect } from "react";
import { View, Button } from 'react-native'
import { initializeApp } from 'firebase/app'
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const App = () => {
  async function logIn() {
    try {
      const loginRes = await signInWithEmailAndPassword(getAuth(), 'user@gmail.com', 'xxxxxx')
      console.log('loginRes : ', loginRes.user?.email)
    } catch ({ message }) {
      console.log('[Error] logIn : ', message)
    }
  }

  useEffect(() => {
    const firebaseConfig = {
      apiKey: "xxxxxx",
      authDomain: "xxxxx",
      projectId: "xxxxxx",
      storageBucket: "xxxxxx",
      messagingSenderId: "xxxxxx",
      appId: "xxxxxx",
      measurementId: "xxxxxx"
    };

    // Initialize Firebase
    initializeApp(firebaseConfig);

    // Adding listener for firebase auth
    const unsubscribe = getAuth().onAuthStateChanged((user) => {
      if (user) {
        console.log('user already loggen in')
      } else {
        console.log('user not logged in')
      }
    });

    return unsubscribe
  }, [])

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Button" onPress={logIn} />
    </View>
  )
}

export default App