React Native Firebase Auth未配置AsyncStorage引发持久化警告问题

之前Web版本Firebase Auth持久化功能异常，我添加了根据平台（Web/移动端）选择不同持久化方式的逻辑，但移动端出现如下警告：

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) });

我的现有代码：

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);
  });
}

问题原因 #

警告触发的核心是调用initializeAuth时未传入持久化配置，而是在初始化完成后通过setPersistence补设。此时Firebase已默认使用内存持久化并抛出警告，后续的setPersistence无法消除初始化阶段的警告。

解决方案 #

直接在initializeAuth时根据平台传入对应的持久化配置，替换原初始化逻辑：

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';

// 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);

// 根据平台配置持久化并初始化Auth
export const FIREBASE_AUTH = initializeAuth(FIREBASE_APP, {
  persistence: Platform.OS !== 'web' 
    ? getReactNativePersistence(ReactNativeAsyncStorage) 
    : browserLocalPersistence
});

说明 #

1. 移除后续的setPersistence调用，将持久化配置直接整合到initializeAuth的参数中
2. 移动端用getReactNativePersistence包装AsyncStorage传入，Web端使用browserLocalPersistence
3. 初始化阶段完成持久化配置，既消除警告，又保证跨平台持久化逻辑正常工作

内容的提问来源于stack exchange，提问作者Albin Rdz