如何在React Native Expo CLI函数式组件中用AsyncStorage存储Firebase OTP登录凭据

核心逻辑说明 #

你要实现关闭应用后保留登录状态的需求，不需要存储过期失效的OTP/verificationId，依赖Firebase自带的持久化登录能力+AsyncStorage存储可选的手机号预填内容即可，具体修改步骤如下：

步骤1：启动页增加登录状态检查 #

在DummyWelcome组件中增加初始化的useEffect钩子，APP打开时优先判断是否已有登录用户，同时预填之前存储过的手机号，减少用户重复输入：

// DummyWelcome 组件内新增
useEffect(() => {
  // 监听Firebase登录状态，Firebase默认会持久化登录凭证
  const unsubscribe = firebase.auth().onAuthStateChanged(async (user) => {
    if (user) {
      // 已有登录用户，直接跳转到业务首页
      navigation.navigate("DumQuestion1");
      // 可选：读取存储的手机号做业务展示
      const savedPhone = await AsyncStorage.getItem('phoneNumber');
      console.log('已登录手机号：', savedPhone);
      return;
    }
    // 未登录时预填之前存储的手机号
    const savedPhone = await AsyncStorage.getItem('phoneNumber');
    if (savedPhone) setPhoneNumber(savedPhone);
  });
  // 组件卸载时取消监听
  return unsubscribe;
}, [navigation]);

步骤2：优化OTP验证逻辑 #

你当前DummyOtp中的confirmCode逻辑可以简化，不需要判断本地存储的手机号是否存在，只要OTP验证通过就完成登录，Firebase会自动持久化登录状态：

// 优化后的confirmCode函数
const confirmCode = async () => {
  try {   
    const credential = firebase.auth.PhoneAuthProvider.credential(
      verificationId,
      code
    );
    await firebase.auth().signInWithCredential(credential);
    // 登录成功直接跳转
    navigation.navigate("DumQuestion1");
  } catch (error) {   
    console.log('OTP验证失败：', error);
    Alert.alert('验证失败', '请输入正确的OTP验证码')
  } 
}

步骤3：可选增加退出登录逻辑 #

如果后续需要做退出登录功能，同步清除Firebase登录状态和本地存储内容即可：

const handleLogout = async () => {
  try {
    await firebase.auth().signOut();
    await AsyncStorage.removeItem('phoneNumber');
    // 跳转到登录页
    navigation.navigate('DummyWelcome');
  } catch (e) {
    console.log('退出失败：', e);
  }
}

注意事项 #

• OTP和verificationId时效性极强（默认仅1分钟有效期），不需要存储到AsyncStorage，过期后引导用户重新发送验证码即可
• Firebase的onAuthStateChanged监听是最可靠的登录状态判断方式，比自行存储本地标识更准确，会自动识别凭证过期等异常状态
• AsyncStorage所有操作都是异步的，必须搭配await或者.then()处理，避免时序问题

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