Expo React Native项目中使用firebase/compat/auth设置认证状态持久化的问题

我太懂你这种头疼的感觉了——每次关了App用户就自动登出，查了一堆方案还是没用，还因为Firebase的新旧API混用踩了坑，别急，咱们一步步把问题搞定！

问题根源 #

你现在的核心问题是混用了Firebase Compat兼容库和新的模块化Auth API：你导入了firebase/compat/auth用兼容式写法，却又用了新模块firebase/auth里的getReactNativePersistence和setPersistence，这两套体系完全不兼容，自然起不了作用。

正确的解决方案（纯Compat版本写法） #

我们全部用Compat库的方式来配置持久化，不需要碰新的模块化API，步骤如下：

1. 修正Firebase配置文件

把原来的配置文件里的新API导入删掉，改用Compat版本的持久化设置方式：

import firebase from "firebase/compat/app";
import 'firebase/compat/firestore'
import 'firebase/compat/auth'
// 只保留AsyncStorage的导入，这是持久化需要的存储载体
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';

const firebaseConfig = {
  apiKey: "key",
  authDomain: "domain",
  databaseURL: "url",
  projectId: "id",
  storageBucket: "bucket",
  messagingSenderId: "id",
  appId: "id",
  measurementId: "id"
};

// 初始化Firebase App（保持不变）
if (firebase.apps.length === 0) {
  firebase.initializeApp(firebaseConfig);
}

// 关键：配置认证持久化（LOCAL模式会把用户状态存在AsyncStorage里）
const setupAuthPersistence = async () => {
  try {
    // Compat版本用自身的Persistence枚举指定持久化模式
    await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
    // 手动指定存储实现，确保React Native环境下正常工作
    firebase.auth().settings.storage = ReactNativeAsyncStorage;
    console.log("认证持久化配置成功");
  } catch (error) {
    console.error("配置持久化失败:", error);
  }
};

// 启动时执行持久化配置
setupAuthPersistence();

// 导出实例（保持不变）
export const auth = firebase.auth();
export const firestore = firebase.firestore();

2. 保持SignIn.js的代码不变

你原来的SignIn组件里的signInWithEmailAndPassword调用完全没问题，不需要修改：

import { auth } from '../../firebase.js'
import { useState } from 'react';

export default function SignIn({ navigation }) {
  const [email, setEmail] = useState(null);
  const [password, setPassword] = useState(null);
  const [error, setError] = useState(null);

  const onLogin = async () => {
    if(!email || !password){
      return;
    }
    auth.signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log("用户登录成功:", user);
      })
      .catch((error) => {
        const errorCode = error.code;
        console.log("登录错误:", error);
        if(errorCode === "auth/invalid-credential"){
          setError("提供的认证信息不正确、格式错误或已过期。");
        }else{
          setError("登录时发生错误，请稍后重试。");
        }
      });
  };

  return (
     // 你的组件UI（保持不变）
  );
}

3. 确认依赖安装

确保你已经安装了AsyncStorage依赖（Expo环境下用这个命令最稳妥）：

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

几个重要的注意事项 #

• 不要同时使用firebase/compat/auth和firebase/auth的API，选一套坚持用到底
• 持久化配置必须在任何登录操作之前完成，所以放在配置文件里启动时执行是最优选择
• 测试时不要用模拟器的「清除数据」功能，正常关闭再打开App就能看到效果
• 你App.js里的onAuthStateChanged监听逻辑完全正确，启动时会自动读取持久化的用户状态，帮你切换页面

这样修改之后，用户关闭App再打开就会保持登录状态啦！

备注：内容来源于stack exchange，提问作者newbie coder