Expo应用重载后Firebase用户登录状态丢失问题求助

核心问题 #

你的代码存在两个关键问题导致重载后用户状态丢失：

1. useEffect的依赖项包含user，会导致每次用户状态变化都重新订阅onAuthStateChanged，触发不必要的重复执行，甚至覆盖正确的会话状态
2. Expo环境下Firebase Auth默认持久化配置可能失效，无法保存用户会话到本地

修复步骤 #

1. 修正Auth状态监听逻辑 #

移除useEffect的user依赖，确保只在组件挂载时订阅一次状态变化：

export default function RootNavigator() {
  const { user, setUser } = useContext(AuthenticatedUserContext);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const unsubscribeAuthStateChanged = getAuth().onAuthStateChanged((authenticatedUser) => {
      setUser(authenticatedUser);
      setIsLoading(false);
      console.log('Auth state updated:', authenticatedUser);
    });

    return unsubscribeAuthStateChanged;
  }, []); // 空数组确保仅挂载时执行一次订阅

  if (isLoading) {
    return <LoadingScreen />;
  }

  return (
    <NavigationContainer>
      {user ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

2. 配置Firebase Auth持久化 #

Expo环境下需要明确指定用AsyncStorage保存用户会话，修改Firebase初始化代码：

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

// 你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

// 初始化Auth并启用本地持久化
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage)
});

export { auth };

3. 必要依赖安装 #

如果未安装AsyncStorage，执行以下命令：

npx expo install @react-native-async-storage/async-storage

额外检查点 #

• 确认Firebase控制台已启用邮箱/密码登录方式
• 确保AuthenticatedUserContext的Provider正确包裹了RootNavigator，示例：

  const AuthenticatedUserContext = createContext();
  
  export function AuthenticatedUserProvider({ children }) {
    const [user, setUser] = useState(null);
    return (
      <AuthenticatedUserContext.Provider value={{ user, setUser }}>
        {children}
      </AuthenticatedUserContext.Provider>
    );
  }
  
  // 在App.js中使用
  export default function App() {
    return (
      <AuthenticatedUserProvider>
        <RootNavigator />
      </AuthenticatedUserProvider>
    );
  }
  

内容的提问来源于stack exchange，提问作者Jon Fry