Auth con correo y contraseña (via Vuex)
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 Vue-Firebase crearemos los métodos en nuestro módulo Vuex para permitir al usuario crear una cuenta o hacer login si ya tiene credenciales.
- En nuestro archivo
store/user.js
debemos crear una acción por cada acción (valga la redundancia) requerida, además de una mutación que cambie las piezas del estado. En este caso la propiedaduser
. - En la maravillosa documentación de Firebase, hay una sección específica con todo lo que necesitamos para autentificar con usuario y contraseña. Se trata del método de Firebase Auth
createUserWithEmailAndPassword
para crear una cuenta,signInWithEmailAndPassword
para hacer login ysignOut
para hacer logout. - Primero crearemos la mutación
setUser
para mutar la piezauser
del estado.
setUser(state, user) {
state.user = user;
},
- Y ahora las acciones correspondientes
doRegister
,doLogin
ydoLogout
.
async doRegister({ commit }, { name, email, password }) {
await auth.createUserWithEmailAndPassword(email, password);
const user = auth.currentUser;
await user.updateProfile({
displayName: name
});
commit("setUser", user);
},
...
- Ahora debemos conectar los métodos locales
doLogin
ydoRegister
de nuestra vistaAuthView
con las acciones Vuex.
redirect() {
this.$router.push({ name: "home" });
},
resetData() {
this.userData.name = this.userData.email = this.userData.password = "";
},
async doLogin() {
this.isLoading = true;
try {
await this.$store.dispatch("user/doLogin", {
email: this.userData.email,
password: this.userData.password
});
console.log("Logged in");
this.resetData();
this.redirect();
} catch (error) {
console.error(error.message);
} finally {
this.isLoading = false;
}
},
...
}
- Ahora nos queda conectar el método
doLogout
del componenteNavBarComponent
con la accióndoLogout
en Vuex. Podemos mostrar los botones de la derecha solo si hay usuario autenficado, a través del helpermapState
y la propiedaduser
.
import { mapState } from "vuex";
...
methods: {
async doLogout() {
try {
await this.$store.dispatch("user/doLogout");
this.$router.push({ name: "auth" });
console.log("Logged out");
} catch (error) {
console.error(error.message);
}
}
},
computed: {
...mapState("user", ["user"])
}
...
- En la siguiente lección crearemos la funcionalidad para comprobar en tiempo real si el usuario está autentificado (o no) para mostrar u ocultar ciertas partes de nuestro proyecto.
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.