¿Te has preguntado alguna vez cuántos usuarios pierdes porque tu formulario de registro es demasiado largo? En pleno 2026, la fricción es el enemigo número uno de la conversión. Obligar a alguien a verificar un correo electrónico es, para muchos, una invitación a cerrar la pestaña.
La autenticación social (OAuth) ya no es un lujo, es un estándar de usabilidad. Con el ecosistema de Supabase consolidado como la alternativa de código abierto más robusta a Firebase, implementar estos flujos se ha vuelto una tarea de minutos, no de días.
En esta guía, basada en mi experiencia desplegando aplicaciones a gran escala este año, te mostraré cómo configurar Facebook y Twitter (X) como proveedores de identidad. Vamos a saltarnos la teoría innecesaria y a ensuciarnos las manos con la consola de desarrolladores y el código.
Preparación del entorno en Supabase Cloud
Antes de tocar una sola línea de código, necesitamos que nuestro proyecto de Supabase esté listo para recibir los Callback URLs. Este es el punto donde la mayoría de los desarrolladores cometen el primer error.
Configuración de la URL del sitio
- Accede a tu panel de Supabase y selecciona tu proyecto activo.
- Dirígete a Authentication > URL Configuration.
- En Site URL, coloca la dirección de tu app (ej.
https://tu-app-2026.vercel.app). - En Redirect URLs, añade
https://[tu-id-proyecto].supabase.co/auth/v1/callback.
http://localhost:3000 a la lista de permitidos, pero nunca lo dejes como URL principal en producción.Configuración de Facebook Login (Meta for Developers)
Meta ha endurecido sus políticas en 2026. Ahora es obligatorio especificar el uso de datos bajo la normativa GDPR/LGPD incluso en entornos de prueba. Para conectar Facebook, necesitaremos el App ID y el App Secret.
Pasos en el portal de Meta
- Crea una nueva aplicación en Meta for Developers seleccionando «Permitir que las personas inicien sesión».
- En el menú lateral, ve a Configuración del caso de uso > Autenticación de Facebook.
- Copia la URI de redireccionamiento de OAuth válida que te proporciona Supabase en su panel de Auth.
- Obtén tus credenciales en Configuración de la aplicación > Básica.
Integración con Twitter API v2 y X Developer Portal
Twitter (ahora X) utiliza OAuth 2.0, lo cual es una mejora sustancial respecto al antiguo método 1.0a. Para 2026, el Free Tier de la API es suficiente para el login, pero tiene límites de solicitudes por mes que debes vigilar.
Configuración en X Developer Portal
- Crea un Project y una App dentro del portal de desarrolladores de X.
- En User authentication settings, activa OAuth 2.0.
- Tipo de aplicación: Selecciona Web App.
- En Callback URI / Redirect URL, pega la URL de callback de tu proyecto de Supabase.
- Guarda el Client ID y el Client Secret (este último solo se muestra una vez).
| Proveedor | Tipo de ID | Requisito 2026 |
|---|---|---|
| App ID | Business Verification (opcional) | |
| Twitter (X) | Client ID (OAuth 2.0) | App Setup v2 |
Implementación del Frontend con Supabase Auth Helpers
Una vez configurados los proveedores en el dashboard de Supabase (pegando los IDs y Secrets), el código es sorprendentemente sencillo. Utilizaremos el cliente de JavaScript de Supabase.
Código para el Login
Para disparar el inicio de sesión, solo necesitamos llamar a signInWithOAuth. Aquí tienes un ejemplo funcional:
async function loginConFacebook() {
const { error } = await supabase.auth.signInWithOAuth({
provider: 'facebook',
options: {
redirectTo: window.location.origin,
},
})
if (error) console.log("Error:", error.message)
}
Manejo de la sesión
- Usa el hook
onAuthStateChangepara detectar cuando el usuario ha vuelto del redireccionamiento. - Supabase gestiona automáticamente el JWT en las cookies o localStorage.
- Los datos del perfil (nombre, avatar) se guardan en la tabla
auth.usersdentro del campo raw_user_meta_data.
Ventajas y Desventajas
✅ Ventajas
- Implementación ultra rápida con Supabase Auth.
- Sincronización automática de perfiles sociales.
- Seguridad de nivel empresarial sin gestionar servidores.
❌ Desventajas
- Dependencia de las políticas de Meta y X.
- El proceso de revisión de Meta puede ser tedioso.
Preguntas Frecuentes
¿Es gratis usar estos proveedores en Supabase?
Supabase no cobra extra por el número de proveedores, pero X (Twitter) puede aplicar costes si excedes los límites de su API Tier, aunque para login básico suele entrar en el nivel gratuito.
¿Qué pasa si el usuario ya tiene una cuenta con el mismo email?
Por defecto, Supabase vincula las cuentas si el email es el mismo, pero puedes configurar esto en Authentication > Settings para mayor seguridad.
¿Puedo obtener la foto de perfil automáticamente?
Sí, Supabase extrae el avatar_url de los metadatos del proveedor y lo inserta en el objeto del usuario al iniciar sesión.
Conclusión
- Configura primero los Callbacks en Supabase antes de ir a las plataformas de devs.
- Usa OAuth 2.0 siempre que esté disponible (especialmente en X).
- Gestiona los metadatos para personalizar la experiencia del usuario desde el primer segundo.
Implementar un sistema de login social ya no es el dolor de cabeza que solía ser. ¿Has tenido problemas con las nuevas políticas de Meta este año? Cuéntanos tu experiencia en los comentarios y hablemos de código.
