Añade inicio de sesión con Google a cualquier sitio web con Supabase

Autenticación de Supabase existente

Esta guía añade Google como opción de inicio de sesión a un sitio web que ya tiene la autenticación de Supabase funcionando — registro, inicio de sesión y sesiones. Si el tuyo todavía no la tiene, complétala primero y luego vuelve aquí.

Añade autenticación de usuarios a cualquier sitio web con Supabase

Crea el registro, el inicio de sesión, las sesiones y las áreas protegidas con Supabase.

/video/add-user-authentication-supabase

Copia la Callback URL de Supabase

Abrir Supabase

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

Copia la Callback URL (for OAuth). Va en Google Cloud, no en el código de tu sitio web.

Configura Google Auth Platform

Abrir Google Cloud Console

https://console.cloud.google.com/auth/branding

Your project Google Auth Platform

Añade la información de tu app en Branding — elige "External" como Audience Publica la app en Audience — o déjala en "Testing" y añádete como usuario de prueba Confirma los scopes básicos en Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

Crea el cliente OAuth

Google Auth Platform Clients Create client

Elige "Web application" Añade tu sitio web en Authorized JavaScript origins Pega la Callback URL de Supabase en Authorized redirect URIs Haz clic en "Create" Copia el Client ID y el Client Secret — Google muestra el secreto solo una vez

URL de tu sitio → Authorized JavaScript origins

Callback URL de Supabase → Authorized redirect URIs

Añade el cliente de Google a Supabase

De vuelta en el proveedor de Google de Supabase — la misma pestaña del Paso 1.

Your project Authentication Sign In / Providers Google

Activa Google

Pega el Client ID de Google

Pega el Client Secret de Google

Guarda

Mantén el Client Secret en privado

El Client Secret solo debe estar en Supabase. Nunca lo expongas en el código frontend ni en una variable de entorno pública.

Añade el botón de inicio de sesión con Google

Tu IA añade Google al inicio de sesión que ya tienes, sin reconstruirlo.

Añade "Continue with Google"

Añade el inicio de sesión con Google a tu autenticación de Supabase existente sin alterar tu flujo de inicio de sesión actual y luego indica las Redirect URLs que necesitas en Supabase.

Add "Continue with Google" to this project's existing Supabase Authentication. Google is already enabled as a provider in my Supabase project, and the Google Client ID and Client Secret are already saved there. Nothing about Google needs to be configured in code. Before changing anything, inspect the current project: - the existing Supabase client(s) and how they are configured - the sign-in page, and the sign-up page if there is one - any existing auth callback route - how protected pages are guarded - how the session is read, kept in sync, and signed out - whether a profile row is created for new users - whether any signed-in user has private data of their own (for example rows protected by Row Level Security) Preserve this project's existing authentication architecture. Make the smallest focused change that adds Google — do not refactor, rename or restyle unrelated code. WHAT TO DO - Add one "Continue with Google" button to the existing sign-in page, and to the sign-up page if there is one. Match the existing design and components. - Start sign-in with the project's existing Supabase client: supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo } }). - Follow this project's own architecture instead of forcing one: - Browser-only app: make sure the page the user returns to picks up the new session through the existing session handling. - PKCE or server-rendered auth (for example @supabase/ssr or Next.js): return through a callback route that exchanges the code for a session with the existing server-side client. Reuse an existing callback route; add one only if none exists, following the project's routing conventions. - redirectTo is a page on THIS website. Build it at runtime from the current site origin, or from the project's existing site URL setting. Never hard-code localhost or a domain. - Never use the Supabase Callback URL (the one ending in /auth/v1/callback) as redirectTo — that URL belongs only in Google Cloud, not in this project's code. - After sign-in, send the user where email/password sign-in already sends them, and keep any existing "return to the page I came from" behavior. - Show a loading state while sign-in starts, and prevent repeated clicks. - If sign-in fails or is cancelled, show an error in the existing style and keep the page usable. - Returning users: the same Google account must reuse the same Supabase user, never create a duplicate. Make any profile creation safe to run more than once. - If a profile row is created for new users, make sure it works for Google users too — they have no password and no sign-up form fields; Google provides their name and picture in the user metadata. - If any signed-in user has private data of their own, preserve the existing data isolation exactly as it is (Row Level Security, policies, user id ownership, server-side checks) for a Google user too. Do not loosen, bypass or duplicate it. - Do not build custom account linking — Supabase already links a Google sign-in to an existing user with the same verified email. KEEP AS IT IS - the existing authentication UI and architecture - email/password sign-in and sign-up, if the project has them - protected routes and their guards - session handling and sign-out - Row Level Security and database policies - environment variables and the existing Supabase client configuration - unrelated pages and design NEVER - rebuild or replace the existing authentication - create a second Supabase client or a second authentication system - add a Google sign-in library or call Google APIs directly - put the Google Client Secret, a Supabase secret key or a service-role key in frontend code - deploy anything Run the production build and fix any errors you introduced. Finish with exactly this summary: GOOGLE LOGIN ADDED - Files changed: <each file, with what changed> - Sign-in flow: <browser / callback route at path> - Return URL: <the exact redirectTo path this code uses> - Supabase Redirect URLs to allow: <each full URL this code uses, one per line — the live site and local development; if the live domain is unknown, the path to add after it> - Private user data: <preserved / not applicable> - Still to do: <nothing, or a short list>

Añade las URLs de retorno

Añade solo las Redirect URLs que tu IA indicó arriba.

Your project Authentication URL Configuration Redirect URLs

No son la Callback URL del Paso 1 — esa solo va en Google Cloud.

El inicio de sesión con Google funciona

Abre tu sitio web, haz clic en "Continue with Google" y elige una cuenta de Google. Confirma que vuelves al sitio con la sesión iniciada.

Si quieres, confirma la cuenta en:

Your project Authentication Users

Volver a iniciar sesión funciona

Cierra sesión y vuelve a iniciar sesión con Google. Confirma que Supabase reutiliza tu cuenta existente en lugar de crear una duplicada.

La autenticación existente sigue funcionando

Confirma que añadir Google no cambió nada de lo que ya funcionaba.

Sigues con la sesión iniciada después de recargar la página

Las páginas protegidas siguen requiriendo iniciar sesión

El inicio de sesión con email y contraseña sigue funcionando, si tu app lo tiene

Cada usuario sigue viendo solo sus propios datos privados

El inicio de sesión con Google ya funciona

El último paso verifica el nombre y el logo de tu app para que los usuarios reconozcan tu marca. Reemplazar una dirección de autenticación supabase.co visible es algo aparte y requiere un dominio personalizado de Supabase.

Recomendado para producción

El inicio de sesión con Google ya funciona. Este paso muestra el nombre y el logo verificados de tu app cuando los usuarios inician sesión.

Completa la imagen de marca de tu app de Google

Abrir Google Auth Platform

https://console.cloud.google.com/auth/branding

Google Auth Platform Branding

App name

App logo

Application home page

Application privacy policy link

Application terms of service link, si tienes uno

Authorized domain

Developer contact information

Añade páginas de política de privacidad y términos a cualquier sitio web creado con IA

¿Aún no tienes política de privacidad ni página de términos? Créalas primero.

/video/add-privacy-policy-and-terms-pages-to-any-ai-built-website

Verifica tu dominio y tu imagen de marca

Abre Google Search Console

https://search.google.com/search-console

Verifica tu dominio en Google Search Console, si aún no lo has hecho Vuelve a la página Branding en Google Auth Platform Haz clic en "Verify Branding"

Google puede aprobarlo automáticamente o pedir una revisión.

Publica y vuelve a probar

Cuando Google muestre "Ready to publish", haz clic en "Publish branding" Abre tu sitio web en una ventana privada del navegador Haz clic en "Continue with Google" Confirma que aparecen el nombre y el logo de tu app

Opcional: usa un dominio de autenticación personalizado

Función de pago de Supabase — no es necesaria para el inicio de sesión con Google. Úsala para tener una URL de autenticación con tu marca, o si la verificación de Google necesita un dominio de autenticación que controles.

La verificación de marca cambia el nombre y el logo que muestra Google. Un dominio personalizado de Supabase reemplaza la dirección de autenticación predeterminada project-ref.supabase.co por la tuya, como auth.example.com.

Después de activarlo, añade su callback URL (https://auth.example.com/auth/v1/callback) a los Authorized redirect URIs de tu cliente de Google.

Dominios personalizados de Supabase

https://supabase.com/docs/guides/platform/custom-domains