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 Firebase aprenderás a implementar la función de reinicio de contraseña en el caso de que la hayas olvidado. Con Firebase es tremendamente sencillo.
  • Como ves, estoy en la documentación de Firebase Auth y se nos indica que para restablecer la contraseña debemos usar el método sendPasswordResetEmail y el nuevo correo, así que vamos añadir esta funcionalidad en nuestra vista de autentificación AuthView.
  • Debemos añadir un nuevo formulario. Podríamos usar un único formulario y método y con condiciones if y v-if activar el contenido adecuado, así tendríamos un único formulario y método local, pero creo que lo que ganamos en reducir código lo perdemos en legibilidad. Para saber qué formulario mostrar convertimos la propiedad isLogin en action y manipulamos/comparamos los valores.
<!-- Reset password form -->
<template v-if="action === 'reset'">
  <h1 class="title has-text-centered">Reset password</h1>
  <form @submit.prevent="doReset">
    <div class="field">
      <label class="label">Email</label>
      <div class="control">
        <input
          v-model="userData.email"
          class="input"
          type="email"
          placeholder="e.g. alexsmith@gmail.com"
          required
        />
      </div>
    </div>

    <div class="field has-text-right">
      <div class="control">
        <button
          type="submit"
          class="button is-link"
          :class="{ 'is-loading': isLoading }"
        >
          Reset password
        </button>
      </div>
    </div>
    <a class="is-block" href="#" @click="action = 'register'"
      >Don't have an account?</a
    >
  </form>
</template>
<!-- End of Reset password form -->
  • Ahora creamos la acción en nuestro módulo user.js de Vuex.
...
async doReset(context, email) {
  await auth.sendPasswordResetEmail(email);
}
...
  • Y la consumimos desde el nuevo método local doReset.
async doReset() {
  this.isLoading = true;
  try {
    await this.$store.dispatch("user/doReset", this.userData.email);
    this.$toast.success(
      `Check ${this.userData.email} for further instructions`
    );
    this.resetData();
  } catch (error) {
    this.$toast.error(error.message);
    console.error(error.message);
  } finally {
    this.isLoading = false;
  }
}
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 📬