El Siguiente Nivel de UX: Autenticación sin Fricción

La autenticación moderna ya no se trata solo de formularios. Hoy en día, ofrecer una experiencia de entrada fluida mediante Google One Tap y el nuevo SDK de Google Identity Services (GSI) es fundamental. En este artículo, detallo cómo logré integrar ambos sistemas en mi portafolio, superando los retos técnicos de la nueva API FedCM.

🛠️ El Desafío: El Conflicto de "Momentum"

Uno de los problemas más complejos al mezclar el botón manual y el One Tap es el bloqueo por "fatiga de usuario". Google detecta si el usuario ya interactuó con un método y oculta el otro.

Para solucionar esto, implementé una estrategia de Override:

  • Limpieza Proactiva: Eliminación de la cookie g_state milisegundos antes del llamado al prompt para asegurar que la ventana florezca siempre en la página de administración.
  • Unificación de Librerías: Jubilé los antiguos popups de Firebase para usar exclusivamente GSI, evitando el error Cross-Origin-Opener-Policy.

🛡️ Cumplimiento con FedCM (Estándar 2026)

Con la migración obligatoria a FedCM (Federated Credential Management), el navegador toma el control de la UI por privacidad.

  1. Activación Nativa: Implementé use_fedcm_for_prompt: true para silenciar advertencias de consola y garantizar compatibilidad con Chrome.
  2. Silencio Técnico: Optimicé la función prompt() eliminando callbacks de estado obsoletos, logrando una consola 100% limpia y profesional.

🚀 UX Premium y Feedback Visual

La "invisibilidad" del proceso no debe significar falta de información. El sistema ahora cuenta con:

  • Toasts Informativos: Mensajes sincronizados que notifican: "Iniciando flujo de Google..." o "¡Bienvenido de nuevo, Andrés!".
  • Persistencia Inteligente: Un flujo de logout que resetea los estados de identidad, permitiendo que el One Tap esté alerta en cada nuevo intento de acceso.
Conclusión: La ingeniería de software de alto nivel reside en los detalles. Al sincronizar estas tecnologías, logramos un login que no solo es seguro, sino que se siente como magia para el usuario.