Gestión de Autenticación de Usuarios con Firebase

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