Add Google sign-in to your Next.js and Supabase app with Cursor or Claude
Set up Google sign-in for your Supabase project in the Google and Supabase dashboards, then ask Cursor, Claude Code or Codex to add a working Continue with Google button to your Next.js app.
What you'll learn
- How to set up Google as a sign-in option for your Supabase project, step by step in the Google and Supabase dashboards
- How to ask Cursor, Claude Code or Codex to add a working Continue with Google button to your Next.js app
What you need
- A Next.js app already connected to a Supabase project (a login page helps but is not required)
- A Google account you can use to open Google Cloud Console
- Cursor, Claude Code or Codex open in your project
- About 20 minutes
The idea
Three parts work together, and each has one job:
- Supabase handles the login. It creates the user, keeps them signed in and stores them in your project.
- Google proves who the person is. It shows the familiar "Choose an account" screen and tells Supabase the result.
- Your coding agent wires up the button in your app and the page the user comes back to afterwards.
You only do the access setup. The agent writes the app changes.
A few words you will see:
- OAuth: the standard way one service (Google) vouches for a person to another service (Supabase) without sharing their password.
- Client ID: a public name that tells Google which app is asking. Think of it as your app's username with Google.
- Client secret: the matching private password for that client ID. Keep it private and never paste it into chat or your code.
- Consent screen: the Google page people see when they sign in, showing your app's name and what it can access.
- Redirect URL: the address a person is sent back to after signing in. Google and Supabase both refuse to send people anywhere that is not on an approved list.
Steps
1. Copy your Supabase callback URL
In your Supabase project dashboard, open Authentication, then the sign-in providers page (Sign In / Providers), and choose Google. Switch it on. On that page you will see a Callback URL. Copy it; you need it in step 3.
Leave this tab open.
2. Set up Google Auth Platform
Open Google Cloud Console and create a new project (or pick an existing one). Go to Google Auth Platform. If it is your first time, Google asks you to register your app: give it a name, a support email and choose External as the audience so any Google account can try it.
In the Data Access section, check the basic profile and email scopes are there, and add openid if it is missing. These let Supabase read the person's name and email. Avoid adding anything else for now, because extra scopes can trigger a long Google review.
3. Create the OAuth client
Still in Google Auth Platform, open Clients and click Create client.
- Application type: Web application
- Authorised JavaScript origins: add your local address (for example http://localhost:3000) and your live site address (for example https://yourapp.com)
- Authorised redirect URIs: paste the Supabase Callback URL from step 1
Click Create. Google shows your client ID and client secret. Copy both straight away: Google only shows the full secret once.
4. Paste the keys into Supabase
Back on the Supabase Google provider page, paste the client ID and client secret into their boxes and click Save.
5. Tell Supabase where your app lives
In Supabase, open Authentication, then URL Configuration.
- Site URL: your live site address, for example https://yourapp.com
- Redirect URLs: add both your local address and your live address, each followed by the callback page your agent will create (for example http://localhost:3000/auth/callback and https://yourapp.com/auth/callback)
Save. Access setup is done.
6. Ask your agent to build it
Open Cursor, Claude Code or Codex in your project and send a plain-English prompt like this:
"Add a Continue with Google button to the login page using Supabase Auth. Google is already enabled as a provider in my Supabase project. Handle the callback page so the user comes back signed in, then show the signed-in user's name and a sign-out button. Follow the official Supabase guide for Google sign-in with Next.js, and tell me which redirect URL you used so I can check it matches my Supabase URL configuration."
Let the agent work, read its summary, and check the redirect URL it mentions is in your Supabase list from step 5.
7. Test it
- Start your app locally (ask the agent to do it if you are unsure) and open the login page.
- Click Continue with Google, pick your Google account and accept.
- You should land back in your app, signed in, with your name showing.
- In Supabase, open Authentication, then Users. Your Google account should appear in the list with Google as the provider.
Once it works locally, deploy and repeat the test on your live site.
Common mistakes
- Redirect URL mismatch. Google shows a redirect mismatch error when the Supabase Callback URL in your Google client does not match exactly. Copy it again from Supabase, paste it with no extra spaces or slashes, and allow a few minutes for Google to update.
- Forgetting the production URL. Sign-in works on your computer but fails or bounces to localhost when live. Add your live address to the Google client origins and to the Supabase Site URL and Redirect URLs.
- Consent screen still in testing. While your app's publishing status is Testing, only the test users you add in the Audience section can sign in. Either add your testers there or publish the app (see below).
- Sharing the client secret. Never paste it into a prompt, a chat or your code. It only belongs in the Supabase dashboard.
Going further
- Publish your consent screen. In Google Auth Platform, open Audience and publish the app so anyone with a Google account can sign in. Add your logo and app name under Branding so the consent screen looks trustworthy (Google may take a few days to verify).
- Add Apple or GitHub sign-in. The pattern is the same: create credentials with the provider, paste them into the matching Supabase provider page, then ask your agent to add the button.
- Protect pages for signed-in users only. Ask your agent: "Make the dashboard page only visible to signed-in users and send everyone else to the login page."
- Keep an eye on your project. Once real users sign in, see Hire a Supabase monitoring agent. Ready to charge them? Try Ship a Stripe Checkout with Cursor or Claude.