Gestión de Autenticación de Usuarios con Firebase

Clase 11 de 32 • Curso de Firebase 5 para Web

Resumen

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.

Juan Castro

teacher•

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

Juan Castro

teacher•

si utilizamos componentes funcionales con los Hooks, pues, utilizamos los Hooks, ya esta 😬… 😄

Fernando Robles

student•

Estaría genial un curso de firebase + react

Guillermo Antonio Ochoa Torres

student•

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.

Eric Andrés Jardón Chao

student•

El frontend que tienes está buenísimo. ¿En qué curso podemos ver como hacer una interfaz similar?

Sebastián Buitrago

student•

Porque cuando me registro con email y password, y cierro sesion, no me deja iniciar sesion despues con facebook

Carlos Eduardo Gomez García

teacher•

Porque solo puedes tener un modo de inicio de sesión en Firebase, cuando usas registro por email y contraseña el usuario va directamente a la base de datos de Firebase, por lo que debes iniciar sesión con ella, no puedes usar otros servicios para iniciar sesión en un usuario de Firebase 👀

Jorge Bou-saad

student•

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

juan david jaramillo zuñiga

student•

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?

Andrés Enrique Sanabria Flores

student•

Bueno, en teoría el primer sign-in sería siempre creando una cuenta. Podrías utilizarlo para activar una bandera en tu código y así saber que es su primera autenticación ya sea con credenciales, google o facebook

Seba Cardoso

student•

const provider = new fb.auth.GoogleAuthProvider()
fb.auth().signInWithPopup(provider)
    .then((res) => {
      console.log(res)
}

La respuesta es un objeto que tiene una propiedad aditionalUserInfo con otra prop adentro llamada newUser: Boolean

Carlos Eduardo Gomez García

teacher•

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

den velez

student•

al refrescar la pagina se va la autenticación, hay manera que siga autenticado?

JuanFe Peralta

Team Platzi•

¡Hola, @den! ⚡

En la documentación oficial de Firebase se habla al respecto, aquí te dejo el enlace directo a la sección de "persistencia del estado de autenticación".

Juan Castro

teacher•

Además de la documentación que te recomendó @vistoporjuan, también puedes tomar este tutorial para añadir autenticación a tu aplicación y que no se "dañe" cuando recargas la página: https://platzi.com/blog/autenticacion-con-firebase-en-5-minutos/. :wink:

LEONARD CUENCA

student•

Crear Escuchador en Firebase

Jaime Ramos

student•

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

Diego Forero

Team Platzi•

Hola. Eso es conocido como SPA (Single Page Application) en una SPA si existe navegación lo que no ha realmente es un refresh del navegador, pero los llamados a una API se hacen igual, consultas los datos una vez los recibes actualizas la información en la parte de tu pagina que espera esos datos.

Erick Alejandro Graterol Barico

student•

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

Luis Abdel Rangel Castro

student•

general.js

$(() =&gt; {
  $('.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(() =&gt; {
    iniciarSesion();
  })

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

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

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

  $('#btnMisPost').click(() =&gt; {
    //$('#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(() =&gt; {
          $('#btnInicioSesion').text('Iniciar Sesión');
          $('#avatar').attr('src', 'imagenes/usuario.png');
          Materialize.toast(`SignOut correcto`, 4000);
        })
        .cath(error =&gt; {
          console.error(error);
          Materialize.toast(`Error al realizar SignOut ${error}`, 4000);
        });
    }

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

Luis Abdel Rangel Castro

student•

autenticacion.js

class Autenticacion {
  autEmailPass(email, password) {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(result =&gt; {
        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 =&gt; {
        console.error(error);
        Materialize.toast(error.message, 4000)
      });
    $('.modal').modal('close')
  }

  crearCuentaEmailPass(email, password, nombres) {
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(result =&gt; {
        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 =&gt; {
        console.error(error);
        Materialize.toast(error.message, 4000);
      });
  }

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

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

andrés eduardo betancourt bescanza

student•

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

Gestión de Autenticación de Usuarios con Firebase

Bienvenida e Introducción

Firebase para Web: Autenticación y Base de Datos

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

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

Consola Web de Administración

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

Configuración de Firebase en Proyecto Web con JavaScript

Autenticación de Usuarios

Autenticación y Creación de Usuarios con Firebase

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

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

Autenticación con Google usando Firebase en aplicaciones web

Implementación de Autenticación con Facebook en Firebase

Gestión de Autenticación de Usuarios con Firebase

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

Exportar e Importar Usuarios en Firebase Auth

Gestión de la Base de Datos

Firestore: Gestión y Estructura de Datos en Firebase

Comparación entre Realtime Database y Firestore de Firebase

Configuración de Firestore en un Proyecto Firebase

Inserción de documentos en Firestore con JavaScript

Consultas en Tiempo Real con Firestore para Aplicaciones Web

Consultas y Operaciones de Datos en Firestore

Reglas de Seguridad en Bases de Datos con Firestore

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

Almacenamiento de archivos

Almacenamiento de Archivos en Firebase: Gestión y Seguridad

Subir Imágenes a Firebase Storage desde un Blog

Reglas de Seguridad en Firebase Storage para Blogs

Hosting

Características y beneficios del hosting de Firebase

Despliegue de Aplicaciones con Firebase Hosting

Configuración Personalizada de Hosting con Firebase

Notificaciones Push

Notificaciones Push con Firebase Cloud Messaging

Implementación de Notificaciones en Blog con Firebase

Implementación de Notificaciones Push con Firebase y Firestore

Implementación de Notificaciones Push con Firebase en Blogs

Conclusiones

Integración de Firebase en Aplicaciones Web