Reiniciar la contraseña del usuario/a

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

• Y ahora hacemos la prueba, reiniciando la contraseña de mi usuario.
• Verás que el correo que llega tiene la plantilla por defecto. Aunque como sabes esta parte del servicio Auth no es la más configurable, en la documentación se indica cómo utilizar algunas variables o marcadores para personalizar el mensaje. Si hacemos uso de ellas y volvemos a lanzar el proceso verás que los cambios han sido aplicados.