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;
  }
}
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 📬