如何将post提交回调传递给认证方法

Question

我正在实现一个用户评论功能，我希望允许用户在要求身份验证之前开始写作，以减少UX摩擦。

用户流程如下:

1. 用户点击输入栏，开始输入。
2. 提交完成后，用户点击提交按钮，系统将检查用户是否通过认证。
3. (A)用户已登录输入，然后它将提交内容。(B)如果用户没有登录in，打开登录/注册模式。
4. (A)如果用户有账号，他们选择登录方式，电子邮件或社交登录。(B)如果用户是新的，他们注册了一个新帐户，无论是电子邮件或社交帐户。
5. 用户通过身份验证后，身份验证模式将关闭，然后提交内容。(用户不需要再次点击提交按钮)

我认为这是一个非常常见的用例，但是我在Stackoverflow上找不到任何东西，或者在谷歌搜索。

我使用React与Firebase身份验证。我的第一个尝试是每秒钟检查一次用户是否通过了身份验证。

const submit = async (data) => {
if (!isAuthenticated) {
setOpenAuthDialog(true);
while (!isAuthenticated)
await new Promise((resolve) => setTimeout(resolve, 1000));
}
setDoc(doc(firestore, "comments", postId), data);
setInputField("");
};

但是，我不认为这是最佳实践，因为即使用户放弃了身份验证流，它也会继续检查。

我认为使用回调可能是更好的方法，但是身份验证模式和注释是兄弟组件。我不确定是否可以将回调函数传递给登录方法。

请告诉我是否有更好的方法来解决这个问题。

Answer 1

使用回调的一种方法是:

const submit = async (data) => {
if (!isAuthenticated) {
setOpenAuthDialog(true);
setDataWaitingForSubmission(data)
return;
}
setDoc(doc(firestore, "comments", postId), data);
setInputField("");
}
// This is passed as callback to auth modal 
const onAuthSuccess = () => {
if (dataWaitingForSubmission && isAuthenticated) {
submit(dataWaitingForSubmission)
}
}