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,
      });
    },
  },