Persisted auth is initially null

[tomgilon]

Operating System

android

Browser Version

react-native expo

Firebase SDK Version

10.3.0

Firebase SDK Product:

Auth

Describe your project's tooling

react native with expo

Describe the problem

Hi, we used to have the auth in our app persist without us having to do anything explicitly.
However, seems like after some package upgrades we started getting the @firebase/auth: Auth (10.3.0): You are initializing Firebase Auth for React Native without providing AsyncStorage warning and the auth wasn't persistent anymore, so we took the advice of the warning and used
const auth = initializeAuth(app, { persistence: getReactNativePersistence(ReactNativeAsyncStorage) });
While this does work, initially the user is null so our login screen is shown for a second and only then onAuthStateChanged callback happens and the user sees the correct screen... this really sucks and is clearly a regression

Any solution?

Steps and code to reproduce issue

package.json:
{ "name": "something", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo run:android", "ios": "expo run:ios", "web": "expo start --web" }, "dependencies": { "@react-native-async-storage/async-storage": "1.19.3", "@react-native-community/masked-view": "^0.1.11", "@react-native-google-signin/google-signin": "^10.0.1", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/drawer": "^6.6.3", "@react-navigation/native": "^6.1.7", "@react-navigation/stack": "^6.3.17", "@types/react-native-snap-carousel": "^3.8.5", "dayjs": "^1.11.9", "dotenv": "^16.3.1", "encoding": "^0.1.13", "expo": "~49.0.8", "expo-constants": "~14.4.2", "expo-dev-client": "~2.4.8", "expo-device": "~5.4.0", "expo-linear-gradient": "~12.3.0", "expo-notifications": "~0.20.1", "expo-permissions": "~14.2.1", "expo-server-sdk": "^3.7.0", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", "firebase": "^10.3.0", "firebase-admin": "^11.10.1", "firebase-functions": "^4.4.1", "framer-motion": "^10.16.2", "next": "^13.4.19", "react": "18.2.0", "react-data-table-component": "^7.5.4", "react-icons": "^4.10.1", "react-native": "0.72.4", "react-native-dropdown-picker": "^5.4.6", "react-native-elements": "^3.4.3", "react-native-gesture-handler": "~2.12.1", "react-native-reanimated": "~3.4.2", "react-native-safe-area-context": "4.7.1", "react-native-screens": "~3.24.0", "react-native-snap-carousel": "^3.9.1", "react-navigation": "^4.4.4", "react-responsive": "^9.0.2", "react-tailwindcss-datepicker": "^1.6.6", "typescript": "^5.2.2" }, "devDependencies": { "@babel/core": "^7.22.11" }, "private": true }

firebase.tsx:

import { initializeApp } from "firebase/app";
import { getFirestore} from "firebase/firestore";
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';

// Your web app's Firebase configuration
const firebaseConfig = {
  ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});

export default app;

useauthentication.ts:

import React from 'react';
import { onAuthStateChanged, User } from 'firebase/auth';
import { auth } from '../../config/firebase';

export function useAuthentication() {
  const [user, setUser] = React.useState<User>();

  React.useEffect(() => {
    const unsubscribeFromAuthStateChanged = onAuthStateChanged(auth, (user) => {
      if (user) {
        // User is signed in, see docs for a list of available properties
        // https://firebase.google.com/docs/reference/js/firebase.User
        setUser(user);
      } else {
        // User is signed out
        setUser(undefined);
      }
    });

    return unsubscribeFromAuthStateChanged;
  }, []);

  return {
    user
  };
}

[renkelvin]

@hsubox76 Could you help take a look? Seems related to AsyncStorage changs.

[tomgilon]

?

[hsubox76]

Sorry, I thought I replied to this. Can you give me some sample code and tell me which version of Firebase to use where things work as you expect?

Looking at the code it looks like you've initially set user to undefined with useState, and it doesn't get populated (setUser) until onAuthStateChanged() is called, which is asynchronous. That means that I would expect user to always briefly be undefined on page load.

So maybe I'm misunderstanding, but you said that it used to work as you expected, and now it doesn't (with the sample code above and current Firebase version). I'm pretty sure you are correct there and we can verify that the sample code using the current Firebase version initially has user as undefined. Can you show me a version of the code, and specify a version of Firebase, where user was not initially undefined?

[tomgilon]

I can try but it seems that trying to use older versions causes weird errors..
Anyway, I looked and when onAuthStateChanged fires for the first time it does give the user object.
Maybe the problem is that it used to fire faster..

[tomgilon]

Anyway, I can't seem to get the old version (10.1.0) to work on my computer again. But it seems that when we were using that version, the event would fire faster...
I guess you can close this for now

[DellaBitta]

Ok, thanks! If the problem occurs again please create a new issue and link it to this one. Thanks so much!