¿Alguna vez has abandonado una aplicación porque el proceso de registro era eterno? En 2026, la fricción es el enemigo número uno de la retención de usuarios. Si estás construyendo una app moderna, no puedes permitirte ignorar el Social Login.
Implementar un sistema de autenticación robusto solía tomar semanas de desarrollo. Hoy, la combinación de Supabase y Google Cloud Platform nos permite desplegar una solución de grado empresarial en cuestión de minutos, garantizando seguridad y escalabilidad.
En esta guía profesional, te enseñaré exactamente cómo conectar estos dos gigantes. He configurado este flujo en decenas de proyectos de producción y aquí tienes el método definitivo, optimizado para las últimas APIs de OAuth 2.0.
Requisitos y Preparación de Supabase
Antes de tocar una sola línea de código, necesitamos que nuestro entorno en Supabase esté listo para recibir tokens externos.
En mi experiencia, el error más común es no verificar la configuración de las Site URLs. Si este parámetro es incorrecto, el flujo de redirección fallará silenciosamente.
Pasos iniciales en el Dashboard
- Accede a tu proyecto en Supabase y ve a la sección Authentication.
- Entra en Providers y busca la opción Google.
- Verifica que el interruptor Enable Google Provider esté visible (aunque aún no lo activaremos).
- Copia la Callback URL que te proporciona Supabase; la necesitaremos en el siguiente paso.
- Asegúrate de tener un proyecto activo en el Tier Pro o Free de Supabase.
- Ten a mano el dominio donde alojarás tu aplicación (ej: localhost:3000 o tu dominio de producción).
Configuración en Google Cloud Console
Aquí es donde sucede la magia técnica. Debemos registrar nuestra aplicación en el ecosistema de Google Cloud para obtener las llaves de acceso.
Muchos desarrolladores se pierden en la inmensidad de la consola de Google. La clave está en centrarse exclusivamente en las APIs & Services.
Creación del proyecto y Consent Screen
- Crea un nuevo proyecto en Google Cloud Console.
- Configura la OAuth Consent Screen. Elige External si tu app es para el público general.
- Define los Scopes. Para un login básico, solo necesitas openid, https://www.googleapis.com/auth/userinfo.email y profile.
- Añade tu correo como Test User (fundamental mientras la app esté en modo Testing).
Vinculación de Credenciales y Redirect URLs
Una vez configurada la pantalla de consentimiento, necesitamos generar el Client ID y el Client Secret.
Este paso es crítico para la seguridad. Nunca, bajo ninguna circunstancia, compartas tu Client Secret en el código del frontend.
Generando las llaves de acceso
- Ve a Credentials > Create Credentials > OAuth client ID.
- Selecciona Web Application como tipo de aplicación.
- En Authorized JavaScript origins, añade la URL de tu app (ej: https://myapp.com).
- En Authorized redirect URIs, pega la Callback URL que copiaste de Supabase en la Sección 1.
| Parámetro | Valor Sugerido | Propósito |
|---|---|---|
| Client ID | Generado por Google | Identificador público de tu app |
| Client Secret | Generado por Google | Llave privada de comunicación |
| Redirect URI | URL de Supabase | Hacia dónde vuelve el usuario tras loguearse |
Tras obtener estos datos, vuelve al panel de Supabase, activa el proveedor de Google, pega ambos valores y guarda los cambios.
Implementación del Frontend y Manejo de Sesiones
Con la configuración lista, es hora de escribir el código. Utilizaremos la librería `@supabase/supabase-js`, que en su versión más reciente de 2026 ha simplificado enormemente los métodos de autenticación.
El flujo recomendado es el PKCE (Proof Key for Code Exchange), que es más seguro para aplicaciones del lado del cliente.
Código de ejemplo (React/Next.js)
- Instala la SDK: `npm install @supabase/supabase-js`.
- Crea la función de login:
async function signInWithGoogle() { const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google', options: { queryParams: { access_type: 'offline', prompt: 'consent', }, }, }) } - Maneja el estado de la sesión con el hook `onAuthStateChange` para detectar cuándo el usuario entra o sale.
- Persistencia: Supabase guarda automáticamente el token en localStorage o cookies.
- Seguridad: Implementa RLS (Row Level Security) en tus tablas de base de datos para que solo el usuario autenticado pueda leer su propia información.
- Refresh Tokens: La SDK gestiona la renovación del token de forma transparente cada hora.
Ventajas y Desventajas
✅ Ventajas
- Registro en un solo clic (mayor conversión).
- Seguridad delegada en la infraestructura de Google.
- Sincronización automática de perfiles (avatar, nombre).
- Escalabilidad infinita sin gestionar contraseñas.
❌ Desventajas
- Dependencia total de un tercero (Google).
- Proceso de verificación de Google puede ser lento.
- Privacidad: algunos usuarios evitan el tracking de Google.
Preguntas Frecuentes
¿Es necesario pagar por usar Google Auth en Supabase?
No, el uso de Google OAuth es gratuito tanto en el nivel free de Supabase como en Google Cloud, siempre que no superes cuotas masivas de millones de peticiones.
¿Qué pasa si el usuario ya se registró con email?
Supabase intentará vincular las cuentas automáticamente si el email es el mismo, siempre que tengas activada la opción «Link accounts with same email» en los ajustes de Auth.
¿Cómo obtengo la foto de perfil del usuario?
La URL de la imagen viene dentro del objeto `user_metadata` que devuelve Supabase tras el login exitoso.
Conclusión
- La configuración requiere pasos precisos tanto en Supabase como en Google Cloud Console.
- El uso de Redirect URIs correctas es el punto donde más fallos se producen.
- La seguridad RLS en la base de datos es el complemento obligatorio para este sistema.
Configurar este sistema no solo profesionaliza tu aplicación, sino que elimina la barrera de entrada para tus futuros usuarios. ¿Has tenido algún problema con las redirecciones de Google? Cuéntanos tu experiencia en los comentarios y te ayudaremos.
