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 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);
...
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Aprende Firebase en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬