Bienvenida e Introducción

1

Firebase para Web: Autenticación y Base de Datos

2

Firebase: Plataforma Integral para Desarrollar Aplicaciones Web y Móviles

3

Creación y gestión de un videoblog con Firebase

Consola Web de Administración

4

Configuración de Firebase en Proyectos Web y Móviles

5

Configuración de Firebase en Proyecto Web con JavaScript

Autenticación de Usuarios

6

Autenticación y Creación de Usuarios con Firebase

7

Autenticación con Firebase: Email y Google paso a paso

8

Autenticación de Usuarios con Firebase: Registro y Verificación de Email

9

Autenticación con Google usando Firebase en aplicaciones web

10

Implementación de Autenticación con Facebook en Firebase

11

Gestión de Autenticación de Usuarios con Firebase

12

Gestión de Usuarios en Firebase: Creación, Inhabilitación y Plantillas

13

Exportar e Importar Usuarios en Firebase Auth

Gestión de la Base de Datos

14

Firestore: Gestión y Estructura de Datos en Firebase

15

Comparación entre Realtime Database y Firestore de Firebase

16

Configuración de Firestore en un Proyecto Firebase

17

Inserción de documentos en Firestore con JavaScript

18

Consultas en Tiempo Real con Firestore para Aplicaciones Web

19

Consultas y Operaciones de Datos en Firestore

20

Reglas de Seguridad en Bases de Datos con Firestore

21

Creación y gestión de índices en Firestore para optimizar consultas

Almacenamiento de archivos

22

Almacenamiento de Archivos en Firebase: Gestión y Seguridad

23

Subir Imágenes a Firebase Storage desde un Blog

24

Reglas de Seguridad en Firebase Storage para Blogs

Hosting

25

Características y beneficios del hosting de Firebase

26

Despliegue de Aplicaciones con Firebase Hosting

27

Configuración Personalizada de Hosting con Firebase

Notificaciones Push

28

Notificaciones Push con Firebase Cloud Messaging

29

Implementación de Notificaciones en Blog con Firebase

30

Implementación de Notificaciones Push con Firebase y Firestore

31

Implementación de Notificaciones Push con Firebase en Blogs

Conclusiones

32

Integración de Firebase en Aplicaciones Web

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Firebase 5 para Web

Curso de Firebase 5 para Web

Juan Guillermo Gómez Torres

Juan Guillermo Gómez Torres

Gestión de Autenticación de Usuarios con Firebase

11/32
Recursos

Firebase nos permite controlar nuestra aplicación dependiendo de los cambios en la autenticación de los usuarios con el método onAuthStateChanged(), nuestro trabajo es añadir el código necesario para cambiar los textos de nuestra aplicación dependiendo de si el usuario esta autenticado o no.

Aportes 11

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Cuando utilizamos Firebase con React.js utilizamos el método onAuthStateChanged() de Firebase en el método componentDidMount de React, así aceleramos el render inicial de la aplicación y evitamos problemas de Server Side Rendering 😉.

Tengo una duda no se si estoy ingresando mal a crear la App en twitter,pero creo esta cambio sus políticas y tarda mas tiempo para dar acceso a crear una nueva app.

He aqui mi commit de esta clase con mi practica con nextjs

https://github.com/jlbousing/nextjs-firebase-practica/commit/112253a89fa36df1f0b4e4fdb61a37bdab50e592

los que siguieron mis pasos, notaran que guardar la informacion del usuario ya lo hemos manejado con el contexto de Nextjs. Sin embargo, en este commit hice algunas mejoras. Maquete y defini un layout, e hice lo mismo que el profe hice con la imagen del usuario, si esta logeado, me traigo con la informacion del contexto el photoURL del usuario accedido. Hice algunos truquitos para trabajar el auth con google y facebook desde el login y register para poder cambiar de ruta con useRouter de Nextjs. Espero que te guste…continuamos…

como se hace para saber que un usuario esta haciendo signing in por primera vez cuando la autenticación es con email y contraseña?

Lo bueno de esto es que podemos hacer muchas cosas en ese listener, no solo cambiar foto y perfil, de hecho incluso podríamos redireccionar a su perfil en caso de que manejáramos perfiles

Crear Escuchador en Firebase

¿Cómo sería para paginas que no se manejan sobre una sola pagina, es decir donde ya no hay navegación?

Es muy util esto de iniciar sesion con redes sociales, porque crear un sistema de login es bastante tedioso

general.js

$(() => {
  $('.tooltipped').tooltip({ delay: 50 })
  $('.modal').modal()

  // TODO: Adicionar el service worker

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  // firebase.analytics();

  // TODO: Registrar LLave publica de messaging

  // TODO: Solicitar permisos para las notificaciones

  // TODO: Recibir las notificaciones cuando el usuario esta foreground

  // TODO: Recibir las notificaciones cuando el usuario esta background

  // TODO: Listening real time

  // TODO: Firebase observador del cambio de estado
  //$('#btnInicioSesion').text('Salir')
  //$('#avatar').attr('src', user.photoURL)
  //$('#avatar').attr('src', 'imagenes/usuario_auth.png')
  //$('#btnInicioSesion').text('Iniciar Sesión')
  //$('#avatar').attr('src', 'imagenes/usuario.png')

  // TODO: Evento boton inicio sesion
  $('#btnInicioSesion').click(() => {
    iniciarSesion();
  })

  $('#avatar').click(() => {
    const user = firebase.auth().currentUser;

    if (user) {
      firebase.auth().signOut()
        .then(() => {
          $('#avatar').attr('src', 'imagenes/usuario.png');
          Materialize.toast(`SignOut correcto`, 4000);
        })
        .cath(error => {
          console.error(error);
          Materialize.toast(`Error al realizar SignOut ${error}`, 4000);
        });
    } else {
      iniciarSesion();
    }
  })

  $('#btnTodoPost').click(() => {
    $('#tituloPost').text('Posts de la Comunidad')
  })

  $('#btnMisPost').click(() => {
    //$('#tituloPost').text('Mis Posts')
    //Materialize.toast(`Debes estar autenticado para ver tus posts`, 4000)    
  })

  function iniciarSesion() {
    const user = firebase.auth().currentUser;

    if (user) {
      return firebase.auth().signOut()
        .then(() => {
          $('#btnInicioSesion').text('Iniciar Sesión');
          $('#avatar').attr('src', 'imagenes/usuario.png');
          Materialize.toast(`SignOut correcto`, 4000);
        })
        .cath(error => {
          console.error(error);
          Materialize.toast(`Error al realizar SignOut ${error}`, 4000);
        });
    }

    $('#emailSesion').val('');
    $('#passwordSesion').val('');
    $('#modalSesion').modal('open');
  }
})

autenticacion.js

class Autenticacion {
  autEmailPass(email, password) {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(result => {
        if (result.user.emailVerified) {
          $('#btnInicioSesion').text('Salir');
          $('#avatar').attr('src', 'imagenes/usuario_auth.png');
          Materialize.toast(`Bienvenido ${result.user.displayName}`, 5000);
        } else {
          firebase.auth().signOut();
          Materialize.toast(`Por favor realiza la verificacion de la cuenta ${result.user.displayName}`, 5000);
        }
      })
      .catch(error => {
        console.error(error);
        Materialize.toast(error.message, 4000)
      });
    $('.modal').modal('close')
  }

  crearCuentaEmailPass(email, password, nombres) {
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(result => {
        result.user.updateProfile({
          displayName: nombres
        });

        const configuracion = {
          url: 'http://localhost:3000/'
        };

        result.user.sendEmailVerification(configuracion);

        firebase.auth().signOut();

        Materialize.toast(
          `Bienvenido ${nombres}, debes realizar el proceso de verificación`,
          4000
        );

        $('.modal').modal('close');
      })
      .catch(error => {
        console.error(error);
        Materialize.toast(error.message, 4000);
      });
  }

  authCuentaGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider();

    firebase.auth().signInWithPopup(provider)
      .then(result => {
        $('#btnInicioSesion').text('Salir');
        $('#avatar').attr('src', result.user.photoURL);
        $('.modal').modal('close');
        Materialize.toast(`Bienvenido ${result.user.displayName} !! `, 4000);
      })
      .catch(error => {
        console.error(error);
        Materialize.toast(`Error al autenticarse con google: ${error.message}`, 4000);
      });
  }

  authCuentaFacebook() {
    const provider = new firebase.auth.FacebookAuthProvider();

    firebase.auth().signInWithPopup(provider)
      .then(result => {
        $('#btnInicioSesion').text('Salir');
        $('#avatar').attr('src', result.user.photoURL);
        $('.modal').modal('close');
        Materialize.toast(`Bienvenido ${result.user.displayName} !! `, 4000);
      })
      .catch(error => {
        console.error(error);
        Materialize.toast(`Error al autenticarse con facebook: ${error.message}`, 4000);
      });
  }

  authCuentaTwitter() {
    const provider = new firebase.auth.TwitterAuthProvider();

    firebase.auth().signInWithPopup(provider)
      .then(result => {
        $('#btnInicioSesion').text('Salir');
        $('#avatar').attr('src', result.user.photoURL);
        $('.modal').modal('close');
        Materialize.toast(`Bienvenido ${result.user.displayName} !! `, 4000);
      })
      .catch(error => {
        console.error(error);
        Materialize.toast(`Error al autenticarse con twitter: ${error.message}`, 4000);
      });
  }
}

Al registrar una cuenta nueva sin el user haber confirma el correo, el boton cambia a salir de todas maneras, para arreglar eso solo tiene que agregar user.emailVerified/

firebase.auth().onAuthStateChanged((user) => {
    console.log(user);
    if (user.emailVerified) {
      $("#btnInicioSesion").text("Salir");
    }
  });