Firebase网页无密码注册：无localStorage时获取邮箱的问题

核心问题 #

同设备发起无密码注册后，用户点击魔法链接返回网站时，调用signInWithEmailLink(auth, email, window.location.href)必须传入email参数，但Firebase已改用indexedDB存储该邮箱，且无官方API提取，直接操作indexedDB易受版本变更影响，onAuthStateChanged此时返回null无法获取用户信息。

推荐解决方案 #

1. 主动存储邮箱到本地（最稳妥） #

在用户首次输入邮箱并调用sendSignInLinkToEmail时，手动将邮箱存入localStorage或sessionStorage：

// 用户输入邮箱后执行
const email = userInputEmail;
// 存储邮箱
localStorage.setItem('firebase_temp_email', email);
// 发送魔法链接
await sendSignInLinkToEmail(auth, email, {
  url: 'https://your-domain.com/verify',
  handleCodeInApp: true
});

用户点击链接返回后，先从本地存储获取邮箱，再完成登录：

// 页面加载时检查
const email = localStorage.getItem('firebase_temp_email');
if (email && isSignInWithEmailLink(auth, window.location.href)) {
  try {
    await signInWithEmailLink(auth, email, window.location.href);
    // 登录成功后清除临时存储
    localStorage.removeItem('firebase_temp_email');
  } catch (error) {
    // 处理错误，比如提示用户重新输入邮箱
    localStorage.removeItem('firebase_temp_email');
  }
}

优势：完全可控，不受Firebase存储方式变更影响，逻辑清晰。

2. 兜底方案：提示用户重新输入邮箱 #

如果本地存储失效（比如用户清理了缓存），直接提示用户再次输入邮箱，这是Firebase默认的兜底逻辑，虽然体验稍差，但能保证流程正常推进。

3. 不推荐：直接读取indexedDB #

虽然可以通过indexedDB API读取Firebase存储的邮箱，但Firebase的indexedDB存储结构属于内部实现，随时可能变更，一旦Firebase更新存储逻辑，代码会直接失效，因此不建议采用这种方式。

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