Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.
Curso Firebase para Web
Auth con correo y contraseña (via Vuex)
- 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.jsdebemos 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
createUserWithEmailAndPasswordpara crear una cuenta,signInWithEmailAndPasswordpara hacer login ysignOutpara hacer logout. - Primero crearemos la mutación
setUserpara mutar la piezauserdel estado.
setUser(state, user) {
state.user = user;
},
- Y ahora las acciones correspondientes
doRegister,doLoginydoLogout.
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
doLoginydoRegisterde nuestra vistaAuthViewcon 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
doLogoutdel componenteNavBarComponentcon la accióndoLogouten Vuex. Podemos mostrar los botones de la derecha sólo si hay usuario autenficado, a través de el helpermapStatey 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.
Descarga la chuleta de Vue 3
Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️
DESCARGA GRATIS LA CHULETA AHORA 💾Presentación
Firebase Auth
Cloud Firestore 🔥
Cloud Storage 🗄
Cloud Functions ☁
No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
