javascriptreact-nativefirebase-authenticationexpo

ReactNativeAsyncStorage it is not working with firebase


I had a problem with the persistence in the web version, then I added a conditional to use differents persistences depending if it is web or mobile. The problem now is that in the mobile version I am getting a warn:

WARN [2024-01-18T19:24:16.586Z] @firebase/auth: Auth (10.7.1): 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) });

This is my code:

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

// Inicializar Firebase
const firebaseConfig = {
  apiKey: process.env.EXPO_PUBLIC_APIKEY,
  authDomain: process.env.EXPO_PUBLIC_authDomain,
  projectId: process.env.EXPO_PUBLIC_projectId,
  storageBucket: process.env.EXPO_PUBLIC_storageBucket,
  messagingSenderId: process.env.EXPO_PUBLIC_messagingSenderId,
  appId: process.env.EXPO_PUBLIC_appId,
  measurementId: process.env.EXPO_PUBLIC_measurementId,
};

export const FIREBASE_APP = initializeApp(firebaseConfig);
export const FIREBASE_DB = getFirestore(FIREBASE_APP);
export const FIREBASE_AUTH = initializeAuth(FIREBASE_APP);

// Conditional persistence configuration
if (Platform.OS !== 'web') {
  // settings for (Android/iOS)
  const reactNativePersistence = getReactNativePersistence(ReactNativeAsyncStorage);
  setPersistence(FIREBASE_AUTH, reactNativePersistence)
    .catch((error) => {
      console.error('Error with React Native: ', error);
    });
} else {
    // settings for web
  setPersistence(FIREBASE_AUTH, browserLocalPersistence)
  .catch((error) => {
    console.error('Error with the web: ', error);
  });
}

Solution

  • This was the solution:

    import { initializeApp } from 'firebase/app';
    import {
      initializeAuth,
      getReactNativePersistence,
      browserLocalPersistence,
    } from 'firebase/auth';
    import { Platform } from 'react-native';
    import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
    import { getFirestore } from 'firebase/firestore';
    import { getStorage } from "firebase/storage";
    
    
    
    // Inicializar Firebase
    const firebaseConfig = {
      apiKey: process.env.EXPO_PUBLIC_APIKEY,
      authDomain: process.env.EXPO_PUBLIC_authDomain,
      projectId: process.env.EXPO_PUBLIC_projectId,
      storageBucket: process.env.EXPO_PUBLIC_storageBucket,
      messagingSenderId: process.env.EXPO_PUBLIC_messagingSenderId,
      appId: process.env.EXPO_PUBLIC_appId,
    
    };
    
    export const FIREBASE_APP = initializeApp(firebaseConfig);
    export const FIREBASE_DB = getFirestore(FIREBASE_APP);
    export const FIREBASE_STORAGE = getStorage(FIREBASE_APP);
    
    // Aquí inicializamos AUTH con la configuración específica para React Native o web.
    const auth = initializeAuth(FIREBASE_APP, {
      persistence: ['ios', 'android'].includes(Platform.OS)
        ? getReactNativePersistence(ReactNativeAsyncStorage)
        : browserLocalPersistence,
    });
    
    export const FIREBASE_AUTH = auth;
    

    By passing the persistence type directly to initializeAuth, Firebase receives and handles the configuration from the start, which avoids cross-platform conflicts and ensures that persistence is applied correctly right out of the box.