Firebase电话认证：设置LOCAL持久化后仍丢失用户凭据？

嘿，我碰到过类似的坑，给你梳理几个最可能的原因和解决办法：

1. 别直接读取currentUser，改用状态监听 #

这是最常见的问题！Firebase Auth初始化时需要从本地存储加载用户信息，这个过程是异步的。如果你在页面刚加载时直接调用firebase.auth().currentUser，大概率会拿到null——哪怕本地已经有持久化的用户数据。

正确的做法是用onAuthStateChanged监听用户状态变化，Auth完成初始化后会自动触发这个回调：

// 放在页面初始化的代码里，比如DOMContentLoaded之后
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // 用户已登录（包括从本地持久化恢复的情况）
    console.log("当前登录用户：", user.phoneNumber);
    // 这里处理你的业务逻辑，比如渲染用户信息
  } else {
    // 用户未登录，跳转到登录页或者显示登录界面
    console.log("用户未登录");
  }
});

2. 确保持久化设置在登录操作之前执行 #

虽然你说已经设置了LOCAL持久化，但要确认setPersistence是异步完成后才执行的登录操作。如果并行执行，持久化设置可能没生效：

// 正确的流程：先设置持久化，再发起登录请求
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
  .then(() => {
    // 这里才是安全的登录操作时机
    return firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier);
  })
  .then((confirmationResult) => {
    // 把验证结果存在全局，方便后续输入验证码后调用
    window.confirmationResult = confirmationResult;
    alert("验证码已发送，请输入！");
  })
  .catch((error) => {
    console.error("设置持久化或登录请求失败：", error);
  });

3. 检查验证码验证环节是否成功 #

如果用户输入验证码后验证失败，实际上并没有完成登录流程，自然不会有持久化数据。一定要在confirm方法的回调里确认登录成功：

// 验证验证码的代码
const verifyCode = (code) => {
  window.confirmationResult.confirm(code)
    .then((result) => {
      const user = result.user;
      console.log("验证码验证成功，用户已登录：", user);
      // 到这一步，持久化数据才会写入本地存储
    })
    .catch((error) => {
      console.error("验证码验证失败：", error);
      // 这里用户并没有登录，所以不会有持久化
    });
};

4. 检查浏览器本地存储是否有Auth数据 #

打开浏览器开发者工具（F12），进入Application -> Local Storage，看看有没有类似firebase:authUser:<你的API_KEY>:<你的APP_ID>的键值对。如果没有，说明持久化根本没生效，可能是：

• 浏览器禁用了本地存储（检查隐私设置）
• 你的域名没有添加到Firebase项目的授权域名列表（在Firebase控制台 -> 认证 -> 设置 -> 授权域名）
• 登录流程中存在未捕获的错误（检查控制台的error日志）

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