Auth con correo y contraseña (via Vuex)

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