Supabase OAuth Setup
Connect your Google Client ID and Secret to Supabase so your app can use 'Sign in with Google'.
What this page does
You now have a Google Client ID and Client Secret from Google Cloud Console. Before "Sign in with Google" works in your app, Supabase needs to know about these credentials. Supabase acts as the middleman:
- Your app tells Supabase: "The user wants to log in with Google."
- Supabase uses your Client ID to send the user to Google's login page.
- Google authenticates the user and sends them back to Supabase's callback URL.
- Supabase uses your Client Secret to verify the user's identity with Google.
- Supabase creates a session and returns it to your app.
Supabase handles all the complexity of the OAuth exchange. Your app only needs two lines of code. But first, Supabase needs the credentials.
Before this page: Make sure you have completed the OAuth Credentials page and have your Client ID and Client Secret ready. You'll need both in the steps below.
Enable Google in Supabase Auth Providers
Open your Supabase project
Go to supabase.com and log in. Click on the project for the app you're building.
Navigate to Authentication Providers
In the left sidebar, click "Authentication". This opens the authentication section.
In the sub-navigation, click "Providers" (sometimes labeled "Sign In / Up" depending on your Supabase dashboard version).
You'll see a long list of authentication providers — Email, Google, Apple, GitHub, and many others.
Find Google and enable it
Scroll down the list to find "Google". Click on it to expand the settings panel.
You'll see a toggle at the top of the panel. It will say "Enabled" or "Disabled". Toggle it to "Enabled".
More fields appear below the toggle.
Paste your Client ID
In the "Client ID" field, paste your Google Client ID. It looks like:
Paste your Client Secret
In the "Client Secret" field, paste your Google Client Secret. It looks like:
Leave Authorized Client IDs blank
There is a third field called "Authorized Client IDs". Leave this blank. This field is for native mobile apps (Android/iOS apps using Google Sign-In directly). For web apps using Supabase, you don't need it.
Copy the Callback URL
Before saving, look for the field labeled "Callback URL" or "Redirect URL". It shows a URL that looks like:
Copy this URL. You need to add it to Google Cloud Console in the next step.
Save the provider settings
Click Save at the bottom of the Google provider panel.
Add the Supabase Callback URL to Google Cloud
This is the step most developers forget the first time, leading to the redirect_uri_mismatch error.
Google only redirects users back to URLs you have explicitly pre-approved. Supabase's callback URL was not on your list when you created the credential — you add it now.
Go back to Google Cloud Console
Open console.cloud.google.com in a new tab. Make sure you're in the correct project (check the project selector in the top navigation bar).
Open your OAuth credential
Navigate to "APIs & Services" → "Credentials".
Under "OAuth 2.0 Client IDs", click the pencil (edit) icon on the credential you created in the previous page.
Add the Supabase Callback URL
Scroll down to "Authorized redirect URIs". Click "+ ADD URI".
Paste the Supabase callback URL you copied:
If you're also running Supabase locally (using Supabase CLI), add the local callback URL too:
Save
Click SAVE at the bottom of the page.
A success message appears at the top: "OAuth 2.0 client updated."
Wait 5 minutes after saving. Google Cloud changes take a few minutes to propagate across Google's systems. If you test Google login immediately after saving and see a redirect_uri_mismatch error, wait 5 minutes and try again before concluding something is wrong.
Test the Google Login in Your App
Once the Supabase credentials are saved and the Google Cloud redirect URI is updated, you can test the full login flow.
The code you need in your app:
When this function runs:
- The browser is redirected to Google's login page
- The user selects their Google account
- Google redirects back to Supabase's callback URL (which you registered)
- Supabase creates the user session
- Supabase redirects to
/auth/callbackin your app - Your app handles the session
Your app also needs an auth callback page at /auth/callback. This page's job is to tell Supabase to finalize the session from the URL parameters Google returns. In React with Supabase, this is usually handled automatically by @supabase/auth-helpers or by calling supabase.auth.exchangeCodeForSession() on that page. Claude Code will help you implement this when you build the auth flow.
What success looks like
When the setup is working correctly:
- You click a "Sign in with Google" button in your app
- The browser navigates to a Google URL — the address bar shows
accounts.google.com/... - A Google account selection screen appears with your app name and logo (from the consent screen)
- You click your Google account
- Google shows what permissions your app is requesting (
emailandprofile) - You click "Continue" or "Allow"
- The browser navigates back to your app (via Supabase's callback URL)
- You're now logged in — Supabase created a session
What the error messages mean
| What you see | Likely cause | Fix |
|---|---|---|
redirect_uri_mismatch | The Supabase callback URL is not in your "Authorized redirect URIs" list | Add it in Google Cloud → Credentials → your OAuth client |
| Google login screen never appears — browser shows your app's error page | signInWithOAuth call failed — check browser console for the error | Usually a missing or wrong Client ID in Supabase |
| Google shows a scary "This app is not verified" warning | Normal during development — your app is in testing mode | Click "Advanced" → "Go to [app name] (unsafe)" to proceed in development. This goes away once Google verifies your app for production. |
access_blocked: Authorization Error | Your Google account is not in the test users list | Add your Gmail to the OAuth consent screen's test users list in Google Cloud |
| Login succeeds on Google but app shows an error | The auth callback page is missing or has a bug | Check your /auth/callback page implementation |
The "This app is not verified" screen
During development and testing, Google shows a warning screen:
"Google hasn't verified this app. The app is requesting access to sensitive information in your Google Account."
This is completely normal. It appears for all apps that haven't gone through Google's OAuth verification process. For a training project or an app in development, you can safely click "Advanced" at the bottom of the screen, then "Go to [your app name] (unsafe)".
For a production app serving real users, you'll eventually submit for Google verification. This involves Google reviewing your app's privacy policy and confirming that you only request the scopes you actually use. Claude Code will guide you through this when you're ready for production launch.
Adding production domains when you go live
When you deploy your app to production (Vercel), you need to update both Supabase and Google Cloud:
In Supabase:
- Authentication → URL Configuration → add your production URL to "Site URL" and "Redirect URLs"
In Google Cloud:
- Credentials → your OAuth client → add production domain to "Authorized JavaScript origins"
- Credentials → your OAuth client → add
https://yourdomain.com/auth/callbackto "Authorized redirect URIs" (if you're using a custom redirect, not just the Supabase callback) - OAuth consent screen → Authorized domains → add your production domain
This is easy to forget at deploy time. The Verification Checklist at the end of this section includes a reminder.
You're connected
Supabase is now configured to use Google as an authentication provider. When your app calls signInWithOAuth({ provider: 'google' }), Supabase handles the entire login flow using your credentials.
The next page covers enabling APIs for services like Maps and Places — a different use case from OAuth, but a similar pattern of enabling access in Google Cloud Console.