Configuracion Inicial para trabajar con Firebase Authentication

Clase 26 de 34 • Curso Avanzado de Vue.js 2 y Firebase por Bedu

Resumen

Firebase nos proporciona una configuración muy sencilla para manejar la creación de usuarios, inicio de sesión y logout de la aplicación con email y password o con redes sociales (Google Accounts, Facebook, Twitter, Github o incluso nuestros proveedores personalizados).

También tenemos acceso y control muy personalizado de toda esta información gracias a la sección de autenticación de usuarios en la Consola de Firebase; nos permite controlar todas nuestras cuentas de forma muy sencilla, podemos inhabilitar y eliminar usuarios, enviar correos electrónicos para cambiar contraseñas y crear plantillas para configurar el envío de emails de nuestra aplicación.

El equipo de Google ha creado algunos SDKs (Software Development Kits) para facilitar la programación y configuración de estas funcionalidades en los lenguajes y plataformas más comunes. En caso de no encontrar estas librerías oficiales, podemos buscar diferentes herramientas creadas por la comunidad.

Carlos Eduardo Gomez García

teacher•

Vale, esto ya lo tenía hecho desde el reto jaja, es más simple y sencillo pasar el parámetro del modal que quieres cerrar a la función closeModal, así te evitas crear tantas funciones

P G

student•

Otra forma de resolver el cierre de la Modal seria pasando el nombre de la modal como parametro al metodo closeModal

template

<modal :show="modals.login" @close-modal="closeModal('login')">login form</modal>
<modal :show="modals.register" @close-modal="closeModal('register')">register form</modal>

methods

  methods: {
    closeModal(name) {
      this.$store.dispatch('TOGGLE_MODAL_STATE', {
        name,
        value: false,
      });
    },
    registerHandlerSubmit() {
      this.$store.dispatch('CREATE_USER', this.formRegister)
        .then(() => {
          this.closeModal('register');
        });
    },
  },

Heyner Javier Marmol Verbel

student•

otra forma de cerrar el modal es en el componente modal pasar como props en nombre y devolverlo en el emit:

name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      require: true,
    },
  },
  methods: {
    onClose() {
      this.$emit('close-modal', this.name);
    },
  },

y en el Default layout llamarlo de esta manera:

<modal :show="modals.login" name="login" @close-modal="(name) => closeModal(name)">
	slot
</modal>

y en el metodo de layout así:


  methods: {
    closeModal(name) {
      this.$store.dispatch('TOGGLE_MODAL_STATE', {
        name,
        value: false,
      });
    },
  },

Configuracion Inicial para trabajar con Firebase Authentication

Bienvenida e Introducción

Bienvenida y Presentación del proyecto: PlatziRooms

Creación y configuración inicial del proyecto utilizando VUE CLI 3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

¿Que son las Render Functions y JSX?

Preparando nuestro entorno para un prototipo

Creación de un componente con createElement

Utilizando JSX para la creación de un componente

Utilizando Slots con Render Functions y JSX

Creando un Modal de Login para PlatziRooms

Creando la lógica general de nuestros modales con Vuex

Creando el contenido de nuestro modal

Componentes controlados y uso de librerías externas

Componentes Controlados y Variables Personalizadas

Construcción del componente de Recordar Contraseña

Creación de un componente Slider utilizando la librería tiny-slider

High Order Functions

¿Qué son las High Order Functions? - Crea tu primera HOF

Vuex

Obtener datos usando Vuex

Crea un getter dinámico en Vuex utilizando HOF

Creación de la vista para creación de publicaciones

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

Instalación y Configuracion de Firebase Realtime Database

Obteniendo los datos desde Firebase Realtime Database

Agregando la consulta de usuarios

Almacenando nuevas publicaciones en Firebase Realtime Database

Perfeccionando el flujo de navegación de nuestra App

Autenticación con Firebase

Configuracion Inicial para trabajar con Firebase Authentication

Agregando nuevos usuarios en firebase autentication

Inicio de sesión de usuario

Cierre de sesión de usuario

Protegiendo páginas utilizando Navigation Guards

Scoped Slots

¿Qué son los Scoped Slots? Dónde utilizarlos y por qué

Integración de Scoped Slots en Platzi Rooms

Deploy

Creando y desplegando nuestra app en Heroku

Conclusiones y Despedida