Vista de login y registro de usuario
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Vamos a crear la vista
AuthView.vue
, que permitirá al usuario registrarse o hacer login en el caso de que tenga credenciales. - En una lección siguiente conectaremos los métodos locales de
AuthView
con nuestro almacén de estado en Vuex, módulouser.js
. - Bulma (el framework CSS que estamos utilizando) tiene una serie de clases y modificadores muy intuitivos para trabajar con formularios, pero antes vamos a crear el layout con las ya conocidas clases
section
ycontainer
, además de añandiendo una columna con las clasescolumns
, para trabajar con rejillas y columnas.
<article class="section">
<div class="container">
<div class="columns">
<div class="column is-half is-offset-one-quarter"></div>
</div>
</div>
</article>
- En cuanto a la lógica, comenzaremos con algunas propiedades en el modelo y un par de métodos para hacer autentificar y registrar.
export default {
name: "AuthView",
data() {
return {
isLogin: true,
isLoading: false,
userData: {
name: "",
email: "",
password: "",
},
};
},
methods: {
doLogin() {},
doRegister() {},
},
};
- Ahora podemos añadir los campos ambos formularios (registro y login) y conectarlos con los métodos locales.
<form @submit.prevent="doLogin">
...
<div class="field">
<label class="label">Password</label>
<div class="control">
<input
v-model="userData.password"
class="input"
type="password"
required
/>
</div>
</div>
...
</form>
- Para poder decidir cual es el formulario a visualizar, dependiendo de si el usuario quiere registrarse o hacer login, podemos utilizar la directiva
v-if
yv-else
envolviendo cada formulario en untemplate
. - Por supuesto, también tenemos que añadir la nueva vista a nuestro enrutador Vue Router.
import AuthView from "../views/AuthView.vue";
...
{
path: "/auth",
name: "auth",
component: AuthView
},
- En la siguiente lección crearemos las acciones que hablarán a Firebase Auth a través de Vuex con nuestros métodos locales.
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.