Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • Como veíamos antes, la mayoría de proyectos necesitan algún tipo de autenticación.
  • Puedes construirlo tú mismo/a (en ocasiones si el proyecto lo exige esa es la solución a seguir) o puedes utilizar un servicio externo para que cumpla esa función integrándolo en tu proyecto. Firebase Auth es perfecto para esta tarea. Es sencillo de utilizar y muy potente.
  • Como ves permite utilizar proveedores sociales como Google, Facebook, GitHub y demás. Incluso autentificación con número de teléfono.
  • Además incluye una serie de componentes llamados Firebase UI para integrar todo el flujo de de acceso de tu aplicación. En el curso no lo usaremos, sino que haremos toda la integración de forma manual.
  • Por ejemplo, antes de comenzar a integrar Firebase Auth en VueTalk vamos a poner a prueba el proveedor social de Google.
  • Primero, debemos ir a la consola de Firebase, seleccionar nuestro proyecto creado anteriormente, hacer click en "Authentication" y activar al menos un método de inicio de sesión. Por ahora, Google.
  • Ahora, de nuevo en la documentación, vamos al apartado Web y proveedor Google para seguir las instrucciones, aunque utilizando el wrapper async/await en lugar de Promises.
  • Por ejemplo, en nuestro Home.vue podemos crear dos métodos locales para hacer login y logout con Google. Primero, creando un nuevo proveedor con new firebase.auth.GoogleAuthProvider y luego usándolo para crear un nuevo popup de Auth con signInWithPopup.
// Home.vue
methods: {
  async doLogin() {
    try {
      const provider = new fb.auth.GoogleAuthProvider();
      const user = await auth.signInWithPopup(provider);
    } catch (error) {
      console.error(error.message);
    }
  },
  async doLogout() {
    try {
      await auth.signOut();
    } catch (error) {
      console.error(error.message);
    }
  }
}
  • Al ponerlo en práctica verás como el usuario se ha creado en la consola Auth de Firebase. Podemos crear un saludo personalizado utilizando la propiedad displayName.
  • Por supuesto hay mucho más que hacer, como por ejemplo utilizar algún tipo de persistencia ya que al refrescar el navegador perdemos el estado de autentificación. Sin embargo el objetivo de esta lección era mostrarte en esencia cómo funciona Firebase Auth.
  • En la siguiente lección empezaremos a implementar un sistema de autentifcación completo basado en usuario y contraseña y centralizado en su própio módulo de Vuex.
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 📬