Reiniciar la contraseña del usuario/a
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ónAuthView
. - 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
enaction
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.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿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.