不带localStorage的Firebase无密码注册电子邮件地址

Question

当使用Firebase无密码注册web时，对相同设备注册的期望是您输入您的电子邮件地址，一个魔术链接被发送到您的电子邮件地址，您单击魔术链接，该链接返回您的网站，URL中的参数应该给Firebase几乎足够的信息来完成注册过程。

但是，作为安全检查，如果点击链接时使用的设备/浏览器与初始注册时使用的设备/浏览器不同，Firebase希望用户重新确认他们的电子邮件地址。对于相同的设备/浏览器注册，Firebase应该在本地记住电子邮件地址以跳过/避免此步骤。

在过去，Firebase似乎已经能够跳过这个额外的电子邮件输入检查，将注册时的电子邮件地址放入localStorage，根据网络和文档中的大量参考和文档(参见localStorage.set)。然而，Firebase似乎不再使用localStorage了，而是将信息存储在indexedDB中。

我的问题是，当用户返回到页面，以完成注册，我需要调用signInWithEmailLink(auth, email, window.location.href);，但我没有email参数，似乎没有一个API调用在Firebase(除非我错过了它)在这个阶段从indexedDB获取这个电子邮件地址。我可以看到它存储在浏览器存储中，但是缺少直接调用indexedDB api本身(这有可能在将来更新firebase时破坏更改)，我不确定如何检索此值。

有一些建议，答案可能是在实现onAuthStateChanged，但这在这个阶段返回null(大概是因为用户尚未确认?)。

目前，这让我不得不重新提示用户即使在同一设备上输入他们的电子邮件地址，或者手动设置localStorage,sessionStorage或直接访问indexedDB。

Answer 1

我读了你的担忧，并找到了解决方案在创建认证链接时，您应该在重定向url中包含查询参数email，而不是将email保存在localstorage中。

try {
await sendSignInLinkToEmail(FirebaseInstance.auth, email, {
url: `${process.env.REACT_APP_URL}/verify-business?email=${email}`,
handleCodeInApp: true,
});
return withSuccess(data, "Email has sent!");
} catch (e) {
return withError("Error Creating User");
}

您将收到一封"电子邮件"。在验证该链接后，从查询参数中获取，然后您可以轻松地使用电子邮件登录。

static async SignIn(email: string) {
try {
const res = await signInWithEmailLink(
FirebaseInstance.auth,
email,
window.location.href
);
const idToken = await res.user.getIdToken();
localStorage.setItem("token", idToken);
localStorage.setItem("account_type", "business");
} catch (error) {
showErrorToast("You are not Authorized");
}
}