Cuando inicio sesión o me registro todo funciona perfectamente. Pero si vuelvo a cargar la página tengo que iniciar sesión de nuevo. ¿Hay alguna forma de evitar esto? He intentado configurar la persistencia yo mismo pero no funciona. este es mi codigo
const iniciarSesion = (e) => { const auth = getAuth(); setPersistence(auth, browserLocalPersistence) .then(() => { signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { setVentana("Tienda") }) .catch((error) => { console.log(error) }); }) } const registar = (e) => { const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { setVentana("Tienda") }) .catch((error) => { console.error(error) }); }En la mayoría de los entornos basados en navegador, Firebase ya persiste y restaura las credenciales del usuario al volver a cargar la página. De la documentación de Firebase sobre la persistencia de autenticación :
Para una aplicación web, el comportamiento predeterminado es persistir en la sesión de un usuario incluso después de que el usuario cierre el navegador. Esto es conveniente ya que no se requiere que el usuario inicie sesión continuamente cada vez que se visita la página web en el mismo dispositivo.
Entonces, si su código se ejecuta en un navegador, no debería necesitar llamar a setPersistence(auth, browserLocalPersistence) . Sin embargo, lo que necesita es detectar en su código cuando Firebase haya restaurado al usuario que inició sesión.
Restaurar el usuario al recargar la página requiere que Firebase llame al servidor, entre otras cosas, para verificar si la cuenta ha sido deshabilitada. Mientras se realiza esta llamada, currentUser será null . Para recibir una notificación cuando el usuario haya sido restaurado y para otros cambios en el estado de autenticación, querrá usar un oyente de estado de autenticación como se muestra en el primer fragmento de código en la documentación sobre cómo obtener el usuario actual :
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User const uid = user.uid; // ... } else { // User is signed out // ... } }); En este código, llamará a setVentana("Tienda") para navegar a la ventana correcta.
puede usar redux-persist, por lo que si vuelve a cargar la página, la tienda redux persistirá. este documento te ayudará https://react-redux-firebase.com/docs/integrations/redux-persist.html
Implemente redux con kit de herramientas (la forma más fácil de configurar redux IMO): puede seguir este tutorial
Un consejo importante es actualizar el estado con el método onAuthStateChanged disponible en el paquete firebase, en lugar de cambiarlo directamente durante la función de inicio de sesión/registro