Mantener el estado de autentificación en tiempo real

• 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 objeto user 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ódulo user 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-notificationy luego lo añadimos como dependencia en main.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);
...