Estoy implementando una función de comentarios de usuarios y me gustaría permitir que los usuarios comiencen a escribir antes de solicitar autenticación para reducir la fricción de UX.

El flujo de usuario sería:

1. El usuario hace clic en el campo de entrada y comienza a escribir.
2. Una vez hecho esto, el usuario hace clic en el botón Enviar, luego el sistema verificará si el usuario está autenticado.
3. (A) Si el usuario ha iniciado sesión, enviará el contenido. (B) Si el usuario no ha iniciado sesión, abra un modal de inicio de sesión/registro.
4. (A) Si el usuario tiene una cuenta, elige los métodos de inicio de sesión, ya sea correo electrónico o inicio de sesión social. (B) Si el usuario es nuevo, se registra en una nueva cuenta con correo electrónico o una cuenta social.
5. Una vez que el usuario esté autenticado, el modo de autenticación se cerrará y se enviará el contenido. (el usuario no necesita hacer clic en el botón de enviar una vez más)

Creo que este es un caso de uso muy común, pero no puedo encontrar nada en Stackoverflow o en la búsqueda de Google.

Estoy usando React con autenticación de Firebase. Mi primer intento es verificar cada segundo si el usuario está autenticado.

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

Sin embargo, no creo que esta sea la mejor práctica, porque continuará verificando incluso cuando el usuario abandone el flujo de autenticación.

Creo que usar devoluciones de llamada podría ser el mejor enfoque, pero el modo de autenticación y los comentarios son componentes hermanos. No estoy seguro de si es posible pasar la función de devolución de llamada a los métodos de inicio de sesión.

Por favor, hágame saber si hay un mejor enfoque para este problema.