React Native中Firebase SDK本地登录持久化问题求助

问题描述 #

我试过官方文档和Stack Overflow上的所有方法，还是搞不懂怎么实现登录持久化。用setPersistence(auth, localPersistence);以及其他变体都不管用，有的资料说要实现Redux，也有的说Firebase默认就支持这个功能，只要写类似这样的代码就行：

firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log('user is logged');
      }
});

以下是我当前的认证相关代码，求指导怎么设置本地持久化：

Firebase电话认证函数 #

const sendVerification = () => {
const phoneProvider = new firebase.auth.PhoneAuthProvider();
phoneProvider
.verifyPhoneNumber(phoneNumberWithCode, recaptchaVerifier.current)
.then(setVerificationId);
setConfirming(!confirming);
setCode('');
};

const confirmCode = () => {
    const credential = firebase.auth.PhoneAuthProvider.credential(
        verificationId,
        code
    );
    firebase.auth().signInWithCredential(credential)
    .then(() => {
        setCode('');
        checkIfPhoneExists(phoneNumberWithCode).then((userExists) => {
            if (userExists) {
                navigation.navigate('Threads');
            } else {
                navigation.navigate('EnterInfo');
            }
        })
        createAccountIfNotUser(phoneNumberWithCode);
    }).catch((error) => {
        console.log(error);
    });
};

Firebase应用及认证初始化代码 #

export const app = firebase.initializeApp(firebaseConfig);

export const auth = getAuth(app);
auth.languageCode = 'it';
setPersistence(auth, localPersistence);

解决步骤 #

1. 修正setPersistence的调用方式 #

setPersistence是异步函数，必须在所有认证操作（比如signInWithCredential）前完成执行。你的初始化代码直接调用但未等待Promise完成，这是导致持久化失效的核心原因之一。修改初始化代码：

export const app = firebase.initializeApp(firebaseConfig);
export const auth = getAuth(app);
auth.languageCode = 'it';

// 封装异步初始化持久化的函数
export const initAuthPersistence = async () => {
  try {
    await setPersistence(auth, localPersistence);
    console.log('本地持久化设置成功');
  } catch (error) {
    console.error('设置持久化失败:', error);
  }
};

在应用启动时（比如根组件的useEffect中）调用initAuthPersistence()，确保在触发sendVerification或confirmCode前执行完毕。

2. 正确配置onAuthStateChanged监听器 #

Firebase依赖这个监听器在页面刷新/应用重启时恢复用户会话。在应用根组件中添加全局监听，用来自动处理登录状态跳转：

import { auth } from './path-to-your-firebase-config';

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged((user) => {
    if (user) {
      // 用户已登录，自动跳转到对应页面
      checkIfPhoneExists(user.phoneNumber).then((exists) => {
        navigation.navigate(exists ? 'Threads' : 'EnterInfo');
      });
    } else {
      // 用户未登录，跳转登录页
      navigation.navigate('Login');
    }
  });

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

3. 验证登录会话有效性 #

在confirmCode的回调中打印用户对象，确认登录成功且会话被正确创建：

firebase.auth().signInWithCredential(credential)
.then((userCredential) => {
  console.log('登录用户信息:', userCredential.user);
  // 原有业务逻辑...
})

如果能正常输出用户对象，说明登录成功，Firebase会自动将会话持久化到本地（前提是持久化设置正确）。

4. 关于Redux的说明 #

Firebase Auth本身已经处理了会话持久化，不需要强制引入Redux。只有当你需要在多组件间共享用户状态、做复杂状态管理时，才需要考虑使用Redux或其他状态管理工具。

关键注意事项 #

• 确保Firebase Auth依赖是最新版本，旧版本可能存在持久化相关bug；
• 检查浏览器/设备是否允许本地存储（禁用Cookie或LocalStorage会导致持久化失效）；
• 若在React Native环境下，需确保安装了@react-native-firebase/auth对应依赖，并配置了AsyncStorage作为持久化存储介质。

内容的提问来源于stack exchange，提问作者Adam Bournes