React Native Auth Persistence

[arsotech]

trafficstars

Operating System

React Native 0.73.4

Browser Version

Mobile/React Native

Firebase SDK Version

10.8.0

Firebase SDK Product:

Auth

Describe your project's tooling

Hi guys,

Having an issue with the React Native persistence of Auth. I am using Async Storage as per below. However, the auth state persist only on the 2nd time auth happens not on the first.

Describe the problem

The auth logs correctly but on app restart for the first time, it logs null. On the 2nd time, it persists. It should persist on the very first time. The persistence fails when the user signs in the very first time (account creation). Subsequent logins, no issue.

Steps and code to reproduce issue

if (getApps().length === 0) {
  app = initializeApp(config);
  auth = initializeAuth(app, {
    persistence: getReactNativePersistence(AsyncStorage),
  });
} else {
  app = getApp();
  auth = getAuth(app);
}

useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) setUserId(user.uid);
      else setUserId(null);
      console.log("user", user);
    });

    return () => unsubscribe();
  }, []);

[Jangyaseni666]

As far as I know the async storage has been removed from firebase. I have been struggling with auth persistence as well. The new setPersistence method is a bit confusing to me as there's not much code available of it.

[arsotech]

When I adjust the import to look at the @firebase/auth/dist/index.rn.d.ts entry point, the getReactNativePersistence is picked up. So, the persistence is still in the most recent firebase version. Just not working as expected.

[Jangyaseni666]

I see but still the new auth persistence is very confusing to use for me. I'd suggest just using Async storage directly to store the user details in order to make it seem like persistence.

[arsotech]

Can you share how you did that? What are you storing with async storage and how?

[Afaq503]

• this code is my Firebase config

import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore';

const firebaseConfig = { };

const app = initializeApp(firebaseConfig); export const auth = getAuth(); export const database = getFirestore();

• Now if i run our project then show this error in console

WARN [2024-02-20T12:45:47.746Z] @firebase/auth: Auth (10.8.0): You are initializing Firebase Auth for React Native without providing AsyncStorage. Auth state will default to memory persistence and will not persist between sessions. In order to persist auth state, install the package "@react-native-async-storage/async-storage" and provide it to initializeAuth:

import { initializeAuth, getReactNativePersistence } from 'firebase/auth'; import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage'; const auth = initializeAuth(app, { persistence: getReactNativePersistence(ReactNativeAsyncStorage) });

if you have any idea about this warning then tell me Thanks

[JosephKorel]

Here's a workaround i found:
Go to your tsconfig.json, and add under path this "@firebase/auth": ["./node_modules/@firebase/auth/dist/index.rn.d.ts"]

Then in your firebase config file

import { getReactNativePersistence, initializeAuth } from "firebase/auth";
export const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage),
});

[DellaBitta]

Hi @arsotech,

Could you check this user post? It was made after having had a simlar issue reported in this forum. thanks!

[google-oss-bot]

Hey @arsotech. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[google-oss-bot]

Since there haven't been any recent updates here, I am going to close this issue.

@arsotech if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.