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ódulo user.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 y container, además de añandiendo una columna con las clases columns, 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 y v-else envolviendo cada formulario en un template.
  • 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.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Aprende Firebase en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬