Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • En esta lección del curso de Vue-Firebase crearemos los métodos en nuestro módulo Vuex para permitir al usuario crear una cuenta o hacer login si ya tiene credenciales.
  • En nuestro archivo store/user.js debemos crear una acción por cada acción (valga la redundancia) requerida, además de una mutación que cambie las piezas del estado. En este caso la propiedad user.
  • En la maravillosa documentación de Firebase, hay una sección específica con todo lo que necesitamos para autentificar con usuario y contraseña. Se trata del método de Firebase Auth createUserWithEmailAndPassword para crear una cuenta, signInWithEmailAndPassword para hacer login y signOut para hacer logout.
  • Primero crearemos la mutación setUser para mutar la pieza user del estado.
setUser(state, user) {
  state.user = user;
},
  • Y ahora las acciones correspondientes doRegister, doLogin y doLogout.
async doRegister({ commit }, { name, email, password }) {
  await auth.createUserWithEmailAndPassword(email, password);
  const user = auth.currentUser;
  await user.updateProfile({
    displayName: name
  });
  commit("setUser", user);
},
...
  • Ahora debemos conectar los métodos locales doLogin y doRegister de nuestra vista AuthView con las acciones Vuex.
redirect() {
    this.$router.push({ name: "home" });
  },
  resetData() {
    this.userData.name = this.userData.email = this.userData.password = "";
  },
  async doLogin() {
    this.isLoading = true;
    try {
      await this.$store.dispatch("user/doLogin", {
        email: this.userData.email,
        password: this.userData.password
      });
      console.log("Logged in");
      this.resetData();
      this.redirect();
    } catch (error) {
      console.error(error.message);
    } finally {
      this.isLoading = false;
    }
  },
	...
}
  • Ahora nos queda conectar el método doLogout del componente NavBarComponent con la acción doLogout en Vuex. Podemos mostrar los botones de la derecha solo si hay usuario autenficado, a través del helper mapState y la propiedad user.
import { mapState } from "vuex";
...
methods: {
  async doLogout() {
    try {
      await this.$store.dispatch("user/doLogout");
      this.$router.push({ name: "auth" });
      console.log("Logged out");
    } catch (error) {
      console.error(error.message);
    }
  }
},
computed: {
  ...mapState("user", ["user"])
}
...
  • En la siguiente lección crearemos la funcionalidad para comprobar en tiempo real si el usuario está autentificado (o no) para mostrar u ocultar ciertas partes de nuestro proyecto.
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 📬