Mantener el estado de autentificación en tiempo real
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Si accedes a nuestro proyecto con el usuario que creamos en la lección anterior, verás que todo va bien y podemos conectarnos, viendo la parte del UI que sólo se muestra si estás autenticado. Las mutación que hidrata el objeto
user
se ha lanzado, podemos verlo a través de las Vue Devtools. - Sin embargo, si recargamos la página, ese estado de autentificación se ha evaporado. ¿Lo hemos perdido?. La respuesta es no. Es sólo que no lo estamos escuchando.
- Si vamos a la documentación de Firebase Auth veremos que la persistencia de la sesión por defecto es mantenerse hasta salir de ella, aunque se puede cambiar.
- Nada más cargar nuestro proyecto debemos escuchar la respuesta del método de Firebase Auth
onAuthStateChanged
. Este ejecuta un callback (observador) con el objetouser
como parámetro. Si hay usuario autentificado,user
contendrá sus datos. De lo contrario su valor será nulo. - Podemos implementarlo en nuestra acción Vuex
checkAuth
ya creada en el módulouser
para hacer que lance la mutación que se encarga de la información del usuario.
checkAuth({ commit, dispatch }) {
auth.onAuthStateChanged(function(user) {
if (user) {
commit("user/setUser", user);
} else {
commit("user/setUser", null);
}
});
}
- Ahora solo queda lanzar
checkAuth
al inicio del proyecto.
// Initial load
store.dispatch("checkAuth");
- Ahora podemos mantener ese estado de autentificación aunque cerremos el navegador o recarguemos la página. Ten en cuenta eso sí que se trata de algo asíncrono. El token de sesión local (tal como indicaba en la documentación que vimos al principio) debe ser comprobado con el servicio Auth de Firebase, por lo que puedes mostrar un spinner o cargador mientras se comprueba. Nosotros, en una lección posterior usaremos el navigation guard
beforeEach
para hacer esta comprobación al acceder a cada una de las rutas. - Para finalizar, vamos a instalar Vue Toast, un pequeño componente que muestra notificaciones emergentes. Primero lo instalamos con
npm install vue-toast-notification
y luego lo añadimos como dependencia enmain.js
.
import VueToast from "vue-toast-notification";
import "vue-toast-notification/dist/theme-default.css";
Vue.use(VueToast, {
position: "bottom",
});
- A partir de aquí podemos cambiar nuestras llamadas a
console
por el nuevo componente, mostrando así las notificaciones.
...
this.$toast.success("Account created");
this.$toast.error(error.message);
...
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.