Add Google Login to Any Website with Supabase

Existing Supabase Authentication

This guide adds Google as a sign-in option to a website that already has Supabase Authentication working — sign-up, login and sessions. If yours does not have that yet, complete it first, then come back here.

Add User Authentication to Any Website with Supabase

Builds sign-up, login, sessions, and protected areas with Supabase.

/video/add-user-authentication-supabase

Copy the Supabase Callback URL

Open Supabase

https://supabase.com/dashboard

Supabase Your project Authentication Sign In / Providers Google

Copy the Callback URL (for OAuth). It goes into Google Cloud, not into your website code.

Set Up Google Auth Platform

Open Google Cloud Console

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

Google Cloud Your project Google Auth Platform

Add your app information on Branding — choose External as the Audience Publish the app on Audience — or keep it in Testing and add yourself as a test user Confirm the basic scopes on Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

Create the OAuth Client

Google Auth Platform Clients Create client

Choose Web application Add your website under Authorized JavaScript origins Paste the Supabase Callback URL under Authorized redirect URIs Click Create Copy the Client ID and Client Secret — Google shows the secret only once

Site URL → Authorized JavaScript origins

Supabase Callback URL → Authorized redirect URIs

Add the Google Client to Supabase

Back in Supabase's Google provider — the same tab from Step 1.

Supabase Your project Authentication Sign In / Providers Google

Turn Google on

Paste the Client ID from Google

Paste the Client Secret from Google

Save

Keep the Client Secret private

The Client Secret belongs only in Supabase. Never expose it in frontend code or a public environment variable.

Add the Google Sign-In Button

Your AI adds Google to the sign-in you already have, without rebuilding it.

Add Continue with Google

Adds Google sign-in to your existing Supabase auth while keeping your current login flow intact, then reports the Redirect URLs you need in 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>

Add the Return URLs

Add only the redirect URLs your AI listed above.

Supabase Your project Authentication URL Configuration Redirect URLs

These are not the Callback URL from Step 1 — that one belongs only in Google Cloud.

Google Sign-In Works

Open your website, click Continue with Google, and choose a Google account. Confirm you return to the site signed in.

Optionally, confirm the account in:

Supabase Your project Authentication Users

Returning Sign-In Works

Sign out, then sign in with Google again. Confirm Supabase reuses your existing account instead of creating a duplicate.

Existing Authentication Still Works

Confirm adding Google didn't change anything that already worked.

You stay signed in after refreshing the page

Protected pages still require sign-in

Email and password sign-in still works, if your app has it

Each user still sees only their own private data

Google Login Works

The final step verifies your app name and logo so users recognize your brand. Replacing a visible supabase.co auth address is separate and requires a Supabase Custom Domain.

Recommended for Production

Google Login already works. This step shows your verified app name and logo when users sign in.

Complete Your Google App Branding

Open 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, if you have one

Authorized domain

Developer contact information

Add Privacy Policy & Terms Pages to Any AI-Built Website

No privacy policy or terms page yet? Create them first.

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

Verify Your Domain and Branding

Open Google Search Console

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

Verify your domain in Google Search Console, if you haven't already Return to the Branding page in Google Auth Platform Click Verify Branding

Google may approve automatically or require review.

Publish and Re-Test

When Google shows Ready to publish, click Publish branding Open your website in a private browser window Click Continue with Google Confirm your app name and logo appear

Optional: Use a Custom Auth Domain

Paid Supabase feature — not required for Google Login. Use it for a branded auth URL, or if Google verification needs an auth domain you control.

Brand verification changes the app name and logo Google shows. A Supabase Custom Domain replaces the default project-ref.supabase.co auth address with your own, like auth.example.com.

After activating it, add its callback URL (https://auth.example.com/auth/v1/callback) to your Google client's Authorized redirect URIs.

Supabase Custom Domains

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