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 vamos a gestionar el perfil de los usuarios/as de VueTalk. Vamos a permitir que la persona conectada puede editar su nombre, correo electrónico y contraseña.
  • Como puedes comprobar, en la documentación de Firebase Auth existe una sección donde se trata lo esencial del manejo de usuarios. Algunos métodos y propiedades ya las conoces, como onAuthStateChanged o currentUser. Ahora aprenderás a utilizar nuevas opciones para cambiar otras propiedades del usuario.
  • Pero primero debemos crear la vista que nos permita realizar esas acciones. La llamaremos UserProfileView.vue y dentro usaremos un formulario donde pre-cargaremos los datos del usuario conectado. Este componente contendrá un modelo local para guardar las modificaciones de las propiedades del perfil de usuario. Usaremos los map helpers de Vuex para mostrar el contenido sólo si hay un usuario conectado.
import { mapState } from "vuex";
...
data() {
  return {
    isLoading: false,
    userData: {
      name: "",
      email: "",
      password: ""
    }
  };
},
methods: {
	updateProfile() {
		...
  }
},
computed: {
  ...mapState("user", ["user"]),
	hasDataChanged(){}
}
...
  • Así como un método, llamado updateProfile para lanzar el proceso de actualización, pero antes de crearlo tenemos establecer la acción en nuestro módulo Vuex que responderá al otro lado. En user.js creamos la acción updateProfile, establecemos sus parámetros y, haciendo uso de los métodos descritos en la documentación, cambiamos lo que sea necesario.
async updateProfile({ commit }, { name, email, password }) {
    const user = auth.currentUser;

    if (name) {
      await user.updateProfile({
        displayName: name
      });

    if (email) {
      await user.updateEmail(email);
    }

    if (password) {
      await user.updatePassword(password);
    }

    commit("setUser", user);
  }
};
  • Ahora es el momento de completar el método local updateProfile de nuestra vista UserRoomProfile para hacer la llamada a la acción que hemos creado hace un momento.
updateProfile() {
  this.isLoading = true;
  try {
    await this.$store.dispatch("user/updateProfile", {
      name: this.userData.name,
      email: this.userData.email,
      password: this.userData.password
    });
    this.$toast.success("Account data updated");
    this.userData.name = this.userData.email = this.userData.password = "";
  } catch (error) {
    this.$toast.error(error.message);
    console.error(error.message);
  } finally {
    this.isLoading = false;
  }
}
  • Como medida extra, en hasDataChanged vamos a preguntar si ha cambiado algo en la información del usuario, para permitirle lanzar el formulario sólo en ese caso.
hasDataChanged() {
  return (
    (this.userData.name && this.userData.name !== this.user.displayName) ||
    (this.userData.email && this.userData.email !== this.user.email) ||
    this.userData.password.length
  );
}
  • Por último, nos queda crear la nueva ruta en Vue Router. Para ello abrimos router/index.js y establecemos la nueva ruta, protegiéndola con autentificación.
import UserProfileView from "../views/UserProfileView.vue";
...
{
  path: "/profile",
  name: "profile",
  component: UserProfileView,
  meta: {
    requiresAuth: true
  }
},
...
  • Ahora añadimos la nueva ruta en el componente NavBarComponent con :to="{ name: 'profile' }" en el botón correspondiente, y comprobamos que todo funcione correctamente.
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 📬