Vovy creates a Google OAuth client, connects it to Supabase, and adds a working Continue with Google button, including the redirect URI that trips everyone up.
Add a Continue with Google button to my app
How it works
- Set up the Google consent screen: Vovy opens Google Auth Platform in Google Cloud Console and fills in your app name, support email and logo. This is the screen users see when choosing their Google account.
- Create a web OAuth client: It creates a Web application client and pastes your Supabase callback URL, which ends in /auth/v1/callback, as the Authorized redirect URI. A mismatch here causes "redirect_uri_mismatch".
- Paste the keys into Supabase: Vovy copies the Client ID and Client Secret into Authentication, Sign In / Providers, Google, and saves. The secret never touches your frontend code.
- Add the button to your app: In Cursor it adds a Continue with Google button that calls signInWithOAuth with a redirectTo back to your app.
- Test the full round trip: Vovy clicks the button in Chrome and pauses so you pick your own Google account. It confirms you land back logged in and shows the new user in Supabase.
What you provide
- A Google account
- A Supabase project
- Your app's live or local URL
What you get
- A working Continue with Google button
- Correct redirect URIs in both dashboards
- A card mapping the OAuth round trip
FAQ
Why does Google say "This app isn't verified"?
Basic sign-in scopes like email and profile usually don't need Google's review, but you must publish the app from Testing to In production in Google Auth Platform, or only listed test users can sign in.
Does this cost anything?
No. Google OAuth is free, and Supabase counts Google users against the same monthly active user limit as email users.
Can I show my own domain instead of supabase.co on the Google screen?
Yes, with Supabase's custom domain add-on on a paid plan. Otherwise users briefly see your project's supabase.co address.
Related tasks
All tasks