0
189
Views¿Cómo administrar GoogleAuthProvider, iniciar sesión con correo electrónico y contraseña y configurar la persistencia en Firebase 9?
Tengo una aplicación que inicia sesión tanto por correo electrónico y contraseña como por GoogleAuth, pero después de iniciar sesión, si el usuario vuelve a cargar la página, se desconecta.
Estoy tratando de administrar GoogleAuthProvider , signInWithEmailAndPassword y setPersistence . Para este ejemplo, simplemente siga la función de inicio de sesión con Google. Lo hice de la siguiente manera:
Login.vue
import { getAuth, setPersistence, inMemoryPersistence, GoogleAuthProvider, signInWithPopup, } from "firebase/auth"; googleSignIn: function() { const auth = getAuth(); const provider = new GoogleAuthProvider(); signInWithPopup(auth, provider) .then(() => { setPersistence(auth, inMemoryPersistence); this.$router.push("/"); }) .catch((error) => { // error messages } }); },Estoy tratando de aplicar lo que vi aquí: https://firebase.google.com/docs/auth/web/auth-state-persistence
Por otro lado, en el componente principal (después de iniciar sesión), obtengo los datos del usuario sin ningún problema de la siguiente manera:
Encabezado.vue
import { getAuth, onAuthStateChanged } from "firebase/auth"; export default { date: () => ({ username: "" }), created() { const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { this.username = user.displayName; } else { this.username = "logged out"; } }); }, };EDITAR
Estoy incluyendo los datos guardados en la aplicación aquí. Aun así, al recargar el usuario cierra la sesión.
2 answers
Answer question0
En entornos de navegador, el comportamiento predeterminado para Firebase Authentication es mantener el estado de autenticación del usuario entre cargas de página y no es necesario llamar a setPersistence usted mismo. Recomiendo eliminar esta llamada de su código y dejar que el SDK de Firebase use sus valores predeterminados.
0
Ese es el comportamiento previsto. Está configurando la persistencia de autenticación en inMemoryPersistencce . La documentación dice,
NONE(inMemoryPeristence) indica que el estado solo se almacenará en la memoria y se borrará cuando se actualice la ventana o la actividad.
Intente establecer la persistencia en SESSION o LOCAL .
Si abro las herramientas de desarrollo, puedo ver que estoy autenticado. El problema parece ser con su redirección aquí:
router.beforeEach((to, from, next) => { // This currentUser maybe undefined const currentUser = getAuth().currentUser; // ... else next(); }); Intenta usar onAuthStateChanged() en beforeEach :
router.beforeEach((to, from, next) => { const auth = getAuth() onAuthStateChanged(auth, (user) => { if (!user) return next("login"); }) })