React Native Expo中Firebase用户登录状态持久化问题求助

别再折腾Async Storage了，Firebase Auth本身就内置了用户会话持久化机制，你需要做的是正确利用它的状态监听来控制页面跳转，而不是手动存储认证信息。

核心解决方案：用onAuthStateChanged监听用户状态 #

在App的根组件里添加认证状态监听，启动时先判断用户是否已登录，再决定显示主页还是登录页，完全不需要手动操作Async Storage。

完整代码示例（App.js）

import { useState, useEffect } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';

export default function App() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const auth = getAuth();

  useEffect(() => {
    // 监听认证状态变化，启动时自动读取本地会话
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setIsLoading(false);
    });

    // 组件卸载时取消监听，避免内存泄漏
    return unsubscribe;
  }, [auth]);

  // 加载状态显示指示器，防止登录页闪屏
  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  // 根据用户状态渲染对应页面
  return user ? <HomeScreen /> : <LoginScreen />;
}

关键注意事项 #

1. 不要手动存储认证信息：Firebase会自动把用户会话存在本地（默认用Async Storage），手动存储反而可能导致状态冲突。
2. 等待监听完成再渲染：必须用isLoading状态过渡，否则App启动时会先短暂显示登录页，再跳转到主页，影响体验。
3. 确认Firebase初始化正确：确保你的Firebase配置代码在App启动时就执行了，比如放在单独的firebase.config.js文件并在App.js顶部导入。

可选：手动指定持久化存储（如果默认失效） #

如果默认的持久化不生效，可以手动指定用Expo的Async Storage作为存储介质：

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

// 初始化Firebase App
const firebaseConfig = {
  // 你的Firebase配置
};
const app = initializeApp(firebaseConfig);

// 初始化Auth时指定持久化
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage)
});

内容的提问来源于stack exchange，提问作者Virendra Maurya