I'm implementing a user comments feature, and I'd like to allow users to start writing before asking for authentication to reduce UX friction.

The user flow would be:

1. The user clicks on the input field, and start typing.
2. Once done, the user clicks on the submit button, then the system will check if the user is authenticated.
3. (A) If the user is logged in, then it will submit the content. (B) If the user is not logged in, open a login/signup modal.
4. (A) If the user has an account, they choose login methods either email or social login. (B) If the user is new, they signup for a new account with either email or a social account.
5. Once the user is authenticated, the authentication modal will close, and the content will then be submitted. (the user does not need to click on the submit button once again)

I think this is a very common use case, but I cannot find anything on Stackoverflow, or on Google search.

I'm using React with Firebase authentication. My first attempt is to check every second if the user is authenticated.

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

However, I don't feel this is the best practice, because it will continue to check even when the user abandons the authentication flow.

I think using callbacks might be the better approach, but the authentication modal and comments are sibling components. I'm not sure if passing the callback function to the sign-in methods is possible.

Please let me know if there is an any better approach to this problem.