Classes 10–12 (D): Sign in with Google

← (C) Supabase project and the front end · All steps · (E) OpenAI API key, with a $5 limit →

Part of the task-app setup for Classes 10–12. Work through the parts in order, doing every step yourself; Start here has the worksheet, the screenshot log, how to ask Claude when you’re stuck, and the list of all parts.

Time: about 15–25 minutes.

As of Oct 22, 2026 · Official docs: Google: OAuth 2.0 · Google Cloud: Manage OAuth clients · Supabase: Login with Google

“Sign in with Google” works through OAuth, a standard way for one website to let you sign in with your account at another (here, Google) without ever seeing your password. Google and Supabase use the word in many of the labels below (“OAuth client”, “Callback URL (for OAuth)”). If it’s new, read OAuth: “Log in with Google” first; it takes two minutes.

Follow Step 6: setup authentication (Google OAuth), with these corrections, since Google’s screens have changed:

At console.cloud.google.com, create a project with the same name as your Supabase project (for example task-app-2026-maria). Click the project button at the top (next to “Google Cloud”), then New project. A yellow box may tell you how many more projects you can create; ignore it. Under the name, Google shows a Project ID; if it adds numbers to it, that’s fine. Leave Parent resource as No organization and click Create. Google takes you back to the page you were on, still in your old project (if you had one). To switch, click the bell icon (Notifications) at the top right and, under “Create Project: …”, click Select Project. Check that the project button now shows your new project’s name. Write the name in the worksheet.

Why? The project name and the Project ID

Google Cloud can hold many projects, and the console opens on whichever one you used last. A name with the year and your name tells this one apart from any project you made before. The Project ID is Google’s own name for the project, and no two projects in the world can have the same one, so Google adds numbers if yours is taken. The app never uses the name or the ID.

Screenshots: creating the project and switching to it

The New Project form

After Create: still in the old project; the bell shows Select Project

The worksheet so far: the Google rows

The instructor’s worksheet after this step, with the email blurred. The Client ID and secret come in Step D5.

The Google rows of the worksheet’s My Info sheet
Open Google Auth Platform, the part of Google Cloud that handles “Sign in with Google”. There are three ways to get there. Try the menu once: it’s how you learn where things are.
Click ☰ at the top left. Point at APIs & Services and, in the list that opens next to it, click OAuth consent screen. That’s the old name of the page; it opens Google Auth Platform.

Click ☰, point at Solutions and click All products. Google Auth Platform is in the first category, Management.

In the search box at the top, type Google Auth Platform and click the result with that name (“OAuth configuration and credentials”). Not Identity Platform: that’s a different product.
A new project shows “Google Auth Platform not configured yet”.
Getting around Google Cloud
Google Cloud has hundreds of products, so its website (the console) has more menus than Supabase’s. The parts you use:
- The project button, next to “Google Cloud” at the top left, shows which project you’re in. Everything you see and change belongs to that project. Check it whenever a page looks wrong.
- ☰ opens the main menu. A row with > opens a second list when you point at it; move the mouse straight across to that list. Recently visited lists the pages you opened last. The ☆ next to a product adds it to Favorite products at the top of the menu.
- The search box finds products, pages and documentation by name.
- The bell (Notifications) lists what Google finished doing for you, such as creating a project.
- Inside a product, a menu on the left lists its pages, and the line above the page title (for example “Google Auth Platform / Overview”) shows where you are.
The console opens on the page and project you used last, so it may look different each time you come back.
Screenshots: three ways to Google Auth Platform

☰ > APIs & Services > OAuth consent screen

☰ > Solutions > All products

All products: Google Auth Platform is under Management

Searching for Google Auth Platform

Google Auth Platform in a new project
Click Get started. The form Project configuration has four parts, which you fill in one after the other with Next. Don’t click Create at the bottom until all four are done.
- App Information: App name Task App 2026 - followed by your first name and last initial, for example Task App 2026 - Maria L. Google may show it to people who sign in. User support email: open the list and choose your Google address.
- Audience: choose External. Internal is only for companies and schools whose Google accounts belong to an organization.
- Contact Information: enter your email address. Google uses these addresses only to tell you about changes to your project. To enter more than one, type a space after each address: it turns into a separate box. (These are not the people who may sign in to the app. You list those in the next step.)
- Finish: tick I agree to the Google API Services: User Data Policy and click Continue.
Then click Create.
Create the OAuth client, the entry that lets your app use “Sign in with Google”. Open the form Create OAuth client ID in one of two ways:
- From the Overview page
- From the Clients menu
Right after the last step you’re on the Overview page. It says “You haven’t configured any OAuth clients for this project yet.” Click Create OAuth client next to it.

In the menu on the left, click Clients, then + Create client at the top of the page.
Fill in the form:
- Application type: choose Web application.
- Name: replace Web client 1 with task-app-2026- followed by your first name and last initial, and web client, for example task-app-2026-maria-l web client. Only you (and your instructor, if you share the project) see this name, in the console, but a name that says whose client it is and what it’s for helps once there are several.
- Authorized JavaScript origins: click + Add URI and type http://localhost:3000.
- Authorized redirect URIs: click + Add URI and paste your Google callback URL from the worksheet (https://YOUR-PROJECT-REF.supabase.co/auth/v1/callback).
- Leave Use this client for an AI-powered agent unticked.
Then click Create.
Why? The other application types
Each kind of program that signs people in with Google gets its own kind of client:
- Web application: a website, like this app.
- Android and iOS: apps for Android phones, and for iPhones and iPads.
- Chrome Extension: an add-on for the Chrome browser.
- TVs and Limited Input devices: smart TVs, game consoles and other devices without a keyboard. You sign in on your phone instead.
- Desktop app: a program installed on a computer.
An app that runs in several places, such as a website plus a phone app, needs one client for each.
Why? What happens when someone signs in with Google
Signing in with Google is a trip with several stops. Each address you enter in this form is one of them:
1. On your app (http://localhost:3000) the user clicks Sign in with Google.
2. The app sends the browser to Supabase, which sends it on to Google’s sign-in page. Supabase tells Google two things: your Client ID (which app is asking) and the redirect URI (where Google should send the answer).
3. The user signs in at Google and agrees to share their name and email.
4. Google checks that the redirect URI is on this client’s list, and only then sends the browser there, with a one-time code.
5. The redirect URI is Supabase’s callback page. Supabase gives Google the code plus your Client secret (which proves the request really comes from your app), and gets the user’s name and email in return. Then Supabase creates or updates the user and sends the browser back to your app, to an address on the redirect-URL list you made in Step C6 (http://localhost:3000/**).
That’s why Supabase needs the Client ID and secret (Step D7), and why the redirect URI points to Supabase, not to your app.
Why? JavaScript origins, redirect URIs, and URI vs URL
- URI or URL? A URL (Uniform Resource Locator) is a web address, such as https://supabase.com/docs. A URI (Uniform Resource Identifier) is the wider term: every URL is a URI, but a URI can also be just a name that isn’t an address. Every URI in this form is a web address, so here URI and URL mean the same thing.
- Authorized JavaScript origins lists the websites that may start a Google sign-in from code running in the browser, for example Google’s own “Sign in with Google” button. An origin is just the start of an address: scheme, host and port, with no path (http://localhost:3000, not http://localhost:3000/dashboard). If these words are new, read Anatomy of a URL and Origins, and URI vs URL. In this app, sign-in goes through Supabase, so what Google checks is mainly the redirect URI. You list your app’s origin anyway, as Supabase’s setup guide says, and in Step K you add its Vercel address too.
- Authorized redirect URIs lists where Google may send the user after they sign in. Google refuses any address that isn’t on the list, so that nobody can trick Google into sending a signed-in user’s code to their own website.
- Google adds the domains of these addresses (for example supabase.co) to your app’s authorized domains for you; that’s what the blue box in the form says.
Why? Where the callback URL comes from
You don’t choose the callback URL: Supabase decides it, and builds it from your project’s ID (the project ref, Step C3):

https:// YOUR-PROJECT-REF .supabase.co /auth/v1/callback
- YOUR-PROJECT-REF.supabase.co is your Supabase project’s own address. Every project has a different one.
- /auth/v1 is Supabase’s sign-in service (Auth), version 1.
- /callback is the page in that service that receives Google’s answer.
The worksheet builds it for you from the project ref. Supabase also shows it on its Google settings page (Step D7), as Callback URL (for OAuth), with a copy button.

On your own computer it’s different. Supabase can also run on your computer, in Docker (see “Deeper dive: Docker, and running Supabase on your own computer” in (L) Optional: automated tests, and Docker). That copy has the address http://127.0.0.1:54321 (127.0.0.1 means “this computer”, like localhost; see localhost and 127.0.0.1), so its callback URL is http://127.0.0.1:54321/auth/v1/callback, and its Google settings go in the file supabase/config.toml instead of the dashboard. This course uses only the online (hosted) Supabase. A Google client can list both callback URLs if you ever use both.
What is this? The “AI-powered agent” box

This app uses AI (OpenAI labels each task), but that has nothing to do with this box. The box is for clients used by AI agents that work with a person’s Google account on their behalf, for example an assistant that reads someone’s Gmail or calendar through Google’s tools for AI agents (MCP servers). Here, the Google client only lets people sign in; the AI part talks to OpenAI, not to Google. So leave it unticked. Google plans to make this setting impossible to change on existing clients, so tick it only for a client that really is for an agent.

Screenshots: creating the OAuth client

The Overview page after the last step

The Clients page

The application types

The form for a web application, before filling it in
Save the Client ID and secret. After Create, a window OAuth client created shows your Client ID and Client secret. Read its yellow box: once you close this window, you can never see or download the secret again. Before you click OK:
- First, take a screenshot of the window and paste it into your screenshot log. If anything goes wrong later, it’s your only copy of what the window showed.
- Then copy the Client ID and the Client secret into the worksheet. Use the copy icon next to each one; don’t retype them. In many fonts l (small L) and I (capital i), or 0 (zero) and O, look the same, and one wrong character makes sign-in fail.
- Click Download JSON. Your browser saves a file whose name starts with client_secret_ in your Downloads folder. Move it to your full-stack-demo-app folder, next to the worksheet (not inside task-app). It holds the secret too, so it’s a backup copy of everything in this window.
Then click OK. The blue box in the window, “OAuth access is restricted to the test users …”, is the next step.

Screenshot: the OAuth client created window

The window after Create. In this picture the ID and secret are blurred.

The worksheet so far: the Google rows

The instructor’s worksheet after this step, with the email, Client ID and secret blurred. Yours shows your real values.

The Google rows of the worksheet’s My Info sheet, all four filled in
How to read the JSON file
JSON (JavaScript Object Notation) is a way to write data as plain text that both people and programs can read. You met it in APIs: programs talking to programs.

To look at the file, drag it into a browser window. Firefox shows it neatly laid out; in Chrome, tick Pretty-print at the top. Don’t open it in VS Code while Claude Code’s panel is open there: Claude Code is told which file you have open, and this one holds a secret.

Google saves it as one long line. Laid out, it looks like this (these values are fake):
{ "web": { "client_id": "123456789012-abc123def456.apps.googleusercontent.com", "project_id": "task-app-2026-maria", "auth_uri": "https://accounts.google.com/o/oauth2/auth", "token_uri": "https://oauth2.googleapis.com/token", "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", "client_secret": "GOCSPX-AbCdEf123...", "redirect_uris": ["https://abcdefghijklmnopqrst.supabase.co/auth/v1/callback"], "javascript_origins": ["http://localhost:3000"] } }
How to read it:
- { } (curly braces) hold an object: a list of name: value pairs, separated by commas. The names are in double quotes.
- A value can be text in double quotes, a list in square brackets [ ], or another object. Here the whole file is one object with one name, "web" (the application type you chose), whose value is another object with the details.
- client_id and client_secret are the two values you copied. project_id is your Google Cloud Project ID (Step D1).
- redirect_uris and javascript_origins are lists, because you can enter several of each. They hold exactly what you typed in the form.
- auth_uri and token_uri are Google’s own addresses: the sign-in page users are sent to, and the address where Supabase trades the one-time code for the user’s details (stops 2 and 5 in “What happens when someone signs in with Google” above). auth_provider_x509_cert_url is where programs get Google’s certificates, to check that an answer really comes from Google. Supabase knows all three already; you don’t enter them anywhere.
The file is a good place to check your settings: if sign-in fails, compare its redirect_uris with the callback URL in your worksheet.
Add the test users. In the menu on the left, click Audience. The page shows:
- Publishing status: Testing. While the app is in testing, only the people on its list of test users can sign in with Google. (The Publish app button is greyed out until the Branding page is complete; this course doesn’t need it.)
- User type: External, as you chose in Step D3.
- OAuth user cap: at most 100 test users, counted over the app’s whole life (removing someone doesn’t free their place).
- Test users, with + Add users and the list, empty for now.
Click + Add users. A panel opens on the right, with the same warning about the 100-user cap, one box, and a counter (0 / 100). Type the Google address you’ll sign in to the app with, plus any other Google account you’ll test with. Type a space after each address: it turns into a separate box, and the counter goes up. Check each address before you save: a typo means that account can’t sign in. Then click Save. The addresses appear under Test users (in small letters; that doesn’t matter, because email addresses don’t care about capitals).

Screenshots: Audience and Add users

The Audience page of a new app, before adding test users

The Add users panel

Forget this step and Google blocks the sign-in

Anyone who isn’t on the list gets an error from Google, and the app never hears from them. If a classmate or your instructor should try your app, add their Google address here first.
Turn on Google in Supabase. Go back to your Supabase project (see “Getting back to your Supabase project” in Step C2). In the icon menu, click Authentication; in the second menu, under CONFIGURATION, click Sign In / Providers. Scroll down to Auth Providers: the list is in alphabetical order, so Google is near the bottom. Click it. A panel opens on the right:
- Enable Sign in with Google: turn it on.
- Client IDs: paste your Client ID from the worksheet. The box takes a comma-separated list because an app can have several Google clients (web, Android, and so on); you have one.
- Client Secret (for OAuth): paste your Client secret from the worksheet.
- Leave Skip nonce checks and Allow users without an email off.
- Callback URL (for OAuth) is the address you gave Google as the redirect URI in step 4. Check that the two match.
Then click Save. Back in the list, Google now shows ENABLED. (Tip: to see a long page at once, zoom out with Ctrl and -, on a Mac Cmd and -; Ctrl+0 or Cmd+0 goes back to normal size.)

Your browser may fill in these two boxes with the wrong values

If your browser has saved passwords, it may fill in Client IDs and Client Secret on its own when the panel opens (the boxes turn light blue). The browser treats them like a user name and password and puts in something it saved for supabase.com, which is never your Google client. Before you paste, select everything in each box and delete it. If the browser offers to save a password when you click Save, say no.
Why? The two switches you leave off
- Skip nonce checks: a nonce is a one-time random number that makes each sign-in unique, so that nobody can replay an old one. Only some phone apps need this check turned off.
- Allow users without an email: Google always sends the user’s email, and this app uses it, so there’s no reason to allow sign-ins without one.
Screenshots: the Google panel in Supabase, and the result

The panel before any changes. In this picture the browser had already filled in the two boxes (light blue), and the project ref in the callback URL is blurred.

After Save: Google is ENABLED in the list of providers

Your Google app stays in Testing status: only the test users you listed in step 6 can sign in with Google. Google says changes can take from a few minutes to a few hours to take effect, so if Google sign-in fails right away, try again later.