Adicione login com Google a qualquer site com Supabase

Autenticação do Supabase existente

Este guia adiciona o Google como opção de login a um site que já tem a autenticação do Supabase funcionando — cadastro, login e sessões. Se o seu ainda não tem, conclua isso primeiro e depois volte aqui.

Adicione autenticação de usuários a qualquer site com Supabase

Cria cadastro, login, sessões e áreas protegidas com o Supabase.

/video/add-user-authentication-supabase

Copie a Callback URL do Supabase

Abrir o Supabase

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

Copie a Callback URL (for OAuth). Ela vai no Google Cloud, não no código do seu site.

Configure o Google Auth Platform

Abrir o Google Cloud Console

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

Your project Google Auth Platform

Adicione as informações do seu app em Branding — escolha "External" como Audience Publique o app em Audience — ou mantenha-o em "Testing" e adicione você mesmo como usuário de teste Confirme os escopos básicos em Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

Crie o cliente OAuth

Google Auth Platform Clients Create client

Escolha "Web application" Adicione seu site em Authorized JavaScript origins Cole a Callback URL do Supabase em Authorized redirect URIs Clique em "Create" Copie o Client ID e o Client Secret — o Google mostra o segredo só uma vez

URL do seu site → Authorized JavaScript origins

Callback URL do Supabase → Authorized redirect URIs

Adicione o cliente do Google ao Supabase

De volta ao provedor do Google no Supabase — a mesma aba da Etapa 1.

Your project Authentication Sign In / Providers Google

Ative o Google

Cole o Client ID do Google

Cole o Client Secret do Google

Salve

Mantenha o Client Secret privado

O Client Secret deve ficar apenas no Supabase. Nunca o exponha no código do frontend nem em uma variável de ambiente pública.

Adicione o botão de login com Google

Sua IA adiciona o Google ao login que você já tem, sem reconstruí-lo.

Adicione "Continue with Google"

Adiciona login com Google à sua autenticação do Supabase existente mantendo seu fluxo de login atual intacto e depois informa as Redirect URLs de que você precisa no 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>

Adicione as URLs de retorno

Adicione apenas as Redirect URLs que sua IA listou acima.

Your project Authentication URL Configuration Redirect URLs

Estas não são a Callback URL da Etapa 1 — aquela vai apenas no Google Cloud.

O login com Google funciona

Abra seu site, clique em "Continue with Google" e escolha uma conta do Google. Confirme que você volta ao site conectado.

Se quiser, confirme a conta em:

Your project Authentication Users

Entrar de novo funciona

Saia e depois entre com o Google novamente. Confirme que o Supabase reutiliza sua conta existente em vez de criar uma duplicada.

A autenticação existente continua funcionando

Confirme que adicionar o Google não mudou nada do que já funcionava.

Você continua conectado depois de atualizar a página

As páginas protegidas continuam exigindo login

O login com e-mail e senha continua funcionando, se o seu app tiver

Cada usuário continua vendo apenas os próprios dados privados

O login com Google já funciona

A etapa final verifica o nome e o logo do seu app para que os usuários reconheçam sua marca. Substituir um endereço de autenticação supabase.co visível é outra coisa e exige um domínio personalizado do Supabase.

Recomendado para produção

O login com Google já funciona. Esta etapa mostra o nome e o logo verificados do seu app quando os usuários fazem login.

Complete a identidade visual do seu app no Google

Abrir o 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, se você tiver um

Authorized domain

Developer contact information

Adicione páginas de política de privacidade e termos a qualquer site feito com IA

Ainda não tem política de privacidade nem página de termos? Crie-as primeiro.

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

Verifique seu domínio e sua marca

Abra o Google Search Console

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

Verifique seu domínio no Google Search Console, se ainda não fez isso Volte à página Branding no Google Auth Platform Clique em "Verify Branding"

O Google pode aprovar automaticamente ou exigir uma revisão.

Publique e teste de novo

Quando o Google mostrar "Ready to publish", clique em "Publish branding" Abra seu site em uma janela anônima do navegador Clique em "Continue with Google" Confirme que o nome e o logo do seu app aparecem

Opcional: use um domínio de autenticação personalizado

Recurso pago do Supabase — não é necessário para o login com Google. Use-o para ter uma URL de autenticação com a sua marca ou se a verificação do Google exigir um domínio de autenticação que você controla.

A verificação da marca muda o nome e o logo que o Google mostra. Um domínio personalizado do Supabase substitui o endereço de autenticação padrão project-ref.supabase.co pelo seu, como auth.example.com.

Depois de ativá-lo, adicione a callback URL dele (https://auth.example.com/auth/v1/callback) às Authorized redirect URIs do seu cliente do Google.

Domínios personalizados do Supabase

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