A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Firebase para Web 2019

Curso de Firebase para Web 2019

Juan Guillermo G贸mez Torres

Juan Guillermo G贸mez Torres

Gestionando el estado del usuario

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 10

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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.

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?

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鈥ontinuamos鈥

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

驴C贸mo ser铆a para paginas que no se manejan sobre una sola pagina, es decir donde ya no hay navegaci贸n?

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