Autenticación con Google usando Firebase en aplicaciones web

Impulsa una experiencia de inicio de sesión fluida con Firebase y Google. Verás cómo crear el proveedor, usar pop up con una promesa, actualizar el avatar del usuario con photoURL, mostrar su displayName y manejar errores, manteniendo una UX clara y directa.

¿Cómo autenticar con Google en Firebase con pop up?

Para habilitar el método de inicio de sesión con Google desde tu código, se trabaja en la clase de autenticación con una función llamada outCuentaGoogle. La idea central: definir el proveedor de autenticación, invocar signInWithPopup, y procesar el resultado.

¿Cómo definir el proveedor de autenticación?

• Crear una constante para el proveedor de Google.
• Mantener una única fuente de configuración del proveedor.

// Clase de autenticación
class Autenticacion {
  outCuentaGoogle() {
    const proveedor = new firebase.auth.GoogleAuthProvider();
    // ...
  }
}

¿Cómo iniciar sesión con signInWithPopup?

• Usar firebase.auth().signInWithPopup(proveedor) para abrir una ventana emergente.
• Evitar sacar al usuario de la app para conservar una mejor experiencia.
• Recordar que regresa una promesa.

outCuentaGoogle() {
  const proveedor = new firebase.auth.GoogleAuthProvider();

  firebase.auth().signInWithPopup(proveedor)
    .then((result) => {
      const user = result.user;

      // Actualizar avatar con la foto de su cuenta de Google.
      const avatarUrl = user.photoURL;
      actualizarAvatar(avatarUrl);

      // Cerrar el modal y mostrar mensaje de bienvenida con su nombre.
      cerrarModal();
      mostrarMensaje(`Bienvenido ${user.displayName}`);
    })
    .catch((error) => {
      console.error(error);
      mostrarMensaje('Error al autenticarse con Google.');
    });
}

• pop up: ventana emergente para ingresar credenciales.
• Proveedor de autenticación: GoogleAuthProvider define el servicio a usar.
• Promesa: éxito con then, error con catch.

¿Qué datos del usuario usar para personalizar la experiencia?

Tras autenticarse, el resultado entrega el user con datos clave. Google valida la cuenta y gestiona las credenciales, lo que simplifica el flujo y reduce responsabilidad de manejo de contraseñas.

• photoURL: URL de la imagen de perfil para actualizar el avatar.
• displayName: nombre visible para el mensaje de bienvenida.
• Beneficio UX: ingresar es rápido y familiar para el usuario.

¿Cómo manejar errores de autenticación con Google?

• Registrar detalles técnicos con console.error para los developers.
• Notificar al usuario con un mensaje claro.

firebase.auth().signInWithPopup(proveedor)
  .then(/* éxito */)
  .catch((error) => {
    console.error('Error al autenticarse con Google:', error);
    mostrarMensaje('Error al autenticarse con Google.');
  });

¿Cómo conectar el controlador y el evento clic del ícono de Google?

En el controlador, crea la instancia de la clase de autenticación y escucha el clic en el ícono de Google. Al hacer clic, se invoca outCuentaGoogle. Luego, prueba el flujo: abrir pop up, elegir la cuenta, ver el saludo y el avatar actualizado.

// Controlador
const authObj = new Autenticacion();

// Botón o ícono de Google en la interfaz
const iconoGoogle = document.getElementById('icono-google');

iconoGoogle.addEventListener('click', () => {
  authObj.outCuentaGoogle();
});

• Instancia de la clase: authObj para centralizar la lógica.
• Evento clic: dispara el inicio de sesión con Google.
• Resultado esperado: saludo con displayName y avatar con photoURL.

¿Tienes dudas sobre el flujo o quieres compartir tu implementación? Escribe en los comentarios y conversemos sobre mejoras de UX y manejo de estado tras autenticación.