React Native Firebase undefined is not an object (evaluating 'this.storage.setItem')

Question

It's my first time using firebase and I'm trying to set the persistence but getting an error. I'm using expo on react native . Here's my code:

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

const confirmCode = async () => {
        const credential = firebase.auth.PhoneAuthProvider.credential(
          verificationId,
          code
        );
    
        firebase
          .auth()
          .setPersistence(firebase.auth.Auth.Persistence.LOCAL)
          .then(async () => {
            return firebase
              .auth()
              .signInWithCredential(credential)
              .then((result) => {
                setIsNew(result.additionalUserInfo.isNewUser);
                result.user.getIdToken().then((token) => setUserToken(token));
              });
          })
          .catch((error) => {
            console.log(error.message);
          });
      };

I'm getting error undefined is not an object (evaluating 'this.storage.setItem') when it comes to persisting.

I'm using this page in google docs and newest version of firebase 9.6.8. It's working fine without persistance but then user have to log in everytime he opens an app.

I've searched dozens of threads on stackoverflow and github but I haven't found any answer for that problem.

And also this isn't showing any user logged in with or without persisting:

if (firebase.auth().currentUser !== null) {
    console.log(firebase.auth().currentUser.uid);
  } else {
    console.log("no users logged");
  }

I thought about somehow using async storage but I don't really know how I could make it work.

Answer 1

If anyone has the same problem - I managed to solve it with help from Bernard Allotey. Here is how I did it:

In App.js:

    import { initializeApp } from "firebase/app";
    import { initializeAuth } from "firebase/auth";
    import { getReactNativePersistence } from "firebase/auth/react-native";
    import AsyncStorage from "@react-native-async-storage/async-storage";
    import firebaseConfig from "./firebaseConfing";
    
    useEffect(async () => {
        const defaultApp = initializeApp(firebaseConfig);
        initializeAuth(defaultApp, {
          persistence: getReactNativePersistence(AsyncStorage),
        });

     }, []);

In my very first screen:

import { getAuth, onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(getAuth(), (user) => {
    if (user) {
      console.log(user);
    } else {
      console.log("signed out");
    }
  });

And for login I'm using this:

    import { getAuth, signInWithPhoneNumber } from "firebase/auth";
    
    async function sendVerification() {
        const auth = getAuth();
        signInWithPhoneNumber(
          auth,
          countryCode + phoneNumber,
          recaptchaVerifier.current
        ).then((confirmationResult) =>
          navigation.navigate("SmsCode", {
            confirmationResult: confirmationResult,
            phoneNumber: phoneNumber,
          })
        );
      }
    
// next screen

    const confirmCode = async () => {
        confirmationResult.confirm(code).then((result) => {
          result.user.getIdToken().then(async (token) => {
            setUserToken(token);
          });
        });
      };

Now the user is persisting as I wanted. Huge thanks for help.

Answer 2

Ok, so I realized that to preserve login state, you actually have to do a special process if using expo. You need to initialize your own auth, passing in Async Storage, like so. When doing it this way, there is no need to set persistence.

import { initializeApp } from "firebase/app"
import { initializeAuth } from "firebase/auth"
import { getReactNativePersistence } from "firebase/auth/react-native"
import AsyncStorage from "@react-native-async-storage/async-storage"

const defaultApp = initializeApp(config);
initializeAuth(defaultApp, {
  persistence: getReactNativePersistence(AsyncStorage)
});