如何通过发布提交回调对身份验证方法

Question

我正在实现用户注释功能，并且我想允许用户在要求身份验证以减少UX摩擦之前开始写作。

用户流将是：

1. 用户单击输入字段，然后开始键入。
2. 完成后，用户单击“提交”按钮，然后系统将检查用户是否经过身份验证。
3. （a）如果用户已记录 在，然后将提交内容。 （b）如果用户未记录 在，打开登录/注册模式。
4. （a）如果用户有帐户，则 选择电子邮件或社交登录方式。 （b）如果用户 是新的，他们通过电子邮件或社交注册了一个新帐户 帐户。
5. 一旦用户进行身份验证，身份验证模式将关闭，然后将提交内容。 （用户无需再次单击“提交”按钮）

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

我正在使用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)
    }
}