Add Google sign-in to Supabase, step by step

"Continue with Google" is the sign-in most users reach for. With Supabase Auth it takes about fifteen minutes: a client in Google Cloud, two values pasted into Supabase, and one function call in your frontend.

What you need

• A Google account with access to Google Cloud Console
• Your Supabase project
• Your app's URL (for example https://example.com) and, for development, http://localhost:5173

1. Create a Google Cloud project

In Google Cloud Console, pick a project from the selector at the top or create a new one, for example "Example Auth". Keep one project per product, so the consent screen shows the right name.

2. Set up the consent screen

Open Google Auth Platform (search for "OAuth consent screen" if you can't find it). Fill in:

• Branding: your app name, support email, logo and your homepage, privacy policy and terms links. Users see this when they sign in.
• Audience: External , so any Google account can sign in. While the app is in Testing , only test users you list can sign in; click Publish app when you go live.
• Data Access (Scopes): add openid. The .../auth/userinfo.email and .../auth/userinfo.profile scopes are the defaults. Avoid sensitive scopes: they trigger Google's verification review.

Google may review your branding before your logo shows, which can take a few business days. Sign-in works meanwhile.

3. Create the OAuth client

Go to Clients → Create client and choose Web application.

• Authorized JavaScript origins: your app's origin, with no path: https://example.com. Add http://localhost:5173 for development, and remove it before launch.
• Authorized redirect URIs: Supabase's callback, not your app's URL. Copy it from the Supabase dashboard ( Authentication → Providers → Google , "Callback URL"). It looks like:

https://<project-ref>.supabase.co/auth/v1/callback

Click Create and copy the Client ID and Client secret.

4. Enable Google in Supabase

In Supabase, open Authentication → Providers → Google , turn it on, paste the client ID and secret, and save.

Then open Authentication → URL Configuration :

• Site URL: https://example.com
• Redirect URLs: https://example.com/ ** and http://localhost:5173/**

Supabase only sends users back to URLs on this list.

5. Add the button

With supabase-js in a React app:

await supabase.auth.signInWithOAuth({
  provider: "google",
  options: { redirectTo: `${window.location.origin}/dashboard` },
})

The browser goes to Google, then to Supabase's callback, then back to redirectTo with a session. Your FastAPI backend receives the same kind of access token as for any other sign-in, so nothing changes there. How to verify it.

Common errors

Error	Fix
redirect_uri_mismatch	The redirect URI in Google must be Supabase's callback URL exactly, including https and /auth/v1/callback.
Back on the Site URL instead of your page	Add the redirectTo URL to Supabase's Redirect URLs list.
"Access blocked: app is in testing"	Add the account as a test user, or publish the app.
Users see <project-ref>.supabase.co on Google's screen	Expected on the default domain. A Supabase custom domain (such as auth.example.com) shows your own domain instead.

Using it with FastAPI Supabase Starter

Do steps 1 to 4, then list the buttons to show in .env and rebuild the frontend:

OAUTH_PROVIDERS=google

Add more providers the same way (OAUTH_PROVIDERS=google,github) after enabling each in Supabase. See Sign-in methods for email codes, SMS, WhatsApp and CAPTCHA.