80  80. Step 6: setup authentication (Google OAuth)

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

Resize Screenshots

Hotkeys
bigger – ctrl/cmd + shift + B
smaller – ctrl/cmd + shift + S
max – ctrl/cmd + shift + M
reset – ctrl/cmd + shift + 0
Alternative: Click on a screenshot to make it full screen.
Note

Resize the screenshots on this page with the buttons at the top right of this screen.

This step connects your Supabase project with Google’s OAuth 2.0 service so users can log in using their Google accounts.

OAuth stands for “Open Authentication”. It is a standard that website owners can use to integrate with 3rd party services, such as Google, Github, etc, so that the users of the website can use their Google/Github/etc password to login.

From the perspective of our website, task-app, the code to do all this is run on the Supabase Servers. Therefore we will have to configure the Supabase Servers with the info necessary to make this happen.

In addition will will need to setup a Google Cloud Project here: https://console.cloud.google.com/. This is where you will need to setup Google to recognize your app and allow your users to login using their google accounts.

See this page for more information about setting up Google’s OAuth 2.0 service. https://developers.google.com/identity/protocols/oauth2/

80.1 Create a Google Cloud Project

  1. Go to https://console.cloud.google.com/ and login with your google userid and password.

    The rectangle in the upper left corner shows the project you are working on. If you’ve never used google cloud the box will say “Select a project” (as it does in the screenshot.) Click on the rectangle to select the project you want. See next step to create a new project.

  2. To create a new project, click Create Project and give it a clear name

  3. Enter a name for your project and click the create button.

  4. Navigate to APIs & Services → Credentials.

  5. Click Create Credentials → OAuth client ID to start generating keys.

80.3 Add your basic app info:

Whether this is the first time you are configuring Google OAuth, you should see one of the screens similar to those shown below.NOTE that if you have already started to configure Google OAuth before, you may need to click on the Branding option in the left hand menu (2nd choice from the top- see the blue oval in the picture).

If you don’t see the info mentioned below, click on the different menu choices on the left hand side to search for where to enter the info below. Google often updates their website and the exact location for the info may have mooved by the time you read this.

The information that you fill out on this screen will affect what the users see when they try to “login with google”

You may see this

You may see this

or may see this

or may see this

80.3.1 App name

A name for your app (users will see this)

80.3.2 User support email

email for users to contact you with questions

80.3.3 Authorized domains

Under Authorized domains, add the domain used by your Supabase project. For example: bysrsyzsihcpsomfkyja.supabase.co You can get this from your Supabase dashboard. If you have been following this tutorial in order this info should also be in the .env.local file if you have in your top level folder for your project.

80.3.4 Audience

Under “Audience” choose External

This will allow you app to be viewed from anywhere in the world. However, your app must undergo review by Google before being allowed to use Google OAuth2 externally. Until then you can setup “test users” with google accounts. Only the specified “test users” will be allowed to “sign in with google” until your app has been reviewed by Google.

You will setup the test users later.

NOTE: You can only choose “Internal” if you’ve setup an organization with Google.

80.3.5 Developer Contact Information

Type an email address for Google to contact you for technical issues.

80.3.6 Click “Save”

Save and continue through the remaining steps.

80.4 Get Your OAuth Credentials

  1. Return to APIs & Services → Credentials.

    Click as below to create an OAuth 2.0 Client ID.

  2. Choose Web application as the application type.

    You need to give a name to the application (Web client 1” in the screenshot below). This name is only used internal to the Google Cloud environment to refer to the application that you are setting up. This name will not appear anywhere to your users.

    You then need to setup the URIs (i.e. URLs) that the Supabase servers will be contacted with from Google to indicate that the login was successful. You need to get this info from your Supabase configuration. This info was also saved in your .env.local file

  3. Add your Supabase callback URL under Authorized redirect URIs: https://[your-project-ref].supabase.co/auth/v1/callback

    You can get your-project-ref by doing one of the following:

    • logging into your Supabase account and getting this info from the Supabase settings.

    • You also can retreive it from the .env.local file that you had setup earlier. That file contained a line such as :

      NEXT_PUBLIC_SUPABASE_URL=“https://dfdqbazsihcpsomfkyja.supabase.co”

      In this example dfdqbazsihcpsomfkyja is your-project-ref. Therefore the Authorize redirect URI for this example is:

      https://dfdqbazsihcpsomfkyja.supabase.co/auth/v1/callback

      Obviously you will have a different project-ref and therefore a slightly different URL.

  4. Click “Create button”

    After creation, copy your Client ID and Client Secret. You WILL NOT BE ABLE TO GET THESE CODES AGAIN FROM GOOGLE. Store these codes in a safe place. DO NOT store these code in any files that will be committed to git.

80.5 Configure Google Auth in Supabase

  1. Open your Supabase dashboard.
  2. Navigate to Authentication → Providers.
  3. Select Google.
  4. Paste your Client ID and Client Secret.
  5. Click Save to enable Google login for your project.

With this configuration complete, Supabase can now handle secure login flows using Google OAuth.

Practice Questions

Easy

Question 1 · Short answer

In plain English, what does setting up Google OAuth let the users of task-app do?

It lets them sign in to task-app with the Google account they already have (“Sign in with Google”), instead of creating a new username and password just for your app.

Question 2 · Multiple choice

On which website do you register your app with Google and create its OAuth credentials?

  1. The Supabase dashboard (supabase.com)
  2. The Google Cloud console (console.cloud.google.com)
  3. The OpenAI platform (platform.openai.com)
  4. The Stripe dashboard (stripe.com)

b. You create a Google Cloud project in the Google Cloud console and set up OAuth there. The Supabase dashboard (a) is where you paste the credentials afterwards. OpenAI (c) and Stripe (d) have nothing to do with Google sign-in.

Question 3 · Multiple choice

When you create the OAuth client ID, which application type do you choose?

  1. Web application
  2. Desktop app
  3. Android
  4. iOS

a. task-app is a website that runs in the browser, so you choose Web application. The other types are for programs installed on a computer (b) or on a phone (c, d).

Question 4 · True or false

The name you give your OAuth client (for example “Web client 1”) is shown to your users when they sign in with Google.

False. That name is only used inside Google Cloud to identify the client. What users see comes from the consent screen information, such as the App name.

Question 5 · Matching

Match each consent-screen setting with its purpose.

Setting Purpose
1. App name A. Your Supabase project’s domain, such as <project-ref>.supabase.co
2. User support email B. Who the app is for: External (people with any Google account) or Internal (only your own organization)
3. Authorized domains C. The name users see when they sign in with Google
4. Audience D. An address Google uses to contact you about technical issues
5. Developer contact information E. An address your users can write to with questions

1 → C, 2 → E, 3 → A, 4 → B, 5 → D.

Medium

Question 6 · Write the URL

Maria’s .env.local contains:

NEXT_PUBLIC_SUPABASE_URL="https://mqhzrtlkdbvcpweoaxsn.supabase.co"

What exactly should she enter under Authorized redirect URIs?

https://mqhzrtlkdbvcpweoaxsn.supabase.co/auth/v1/callback

Her project ref is mqhzrtlkdbvcpweoaxsn. The redirect URI is her Supabase project URL followed by /auth/v1/callback.

Question 7 · Multiple choice

After Google creates your OAuth client, where do you paste the Client ID and Client Secret?

  1. Into .env.local, as NEXT_PUBLIC_... variables
  2. Into the Google provider settings in your Supabase dashboard (in the Authentication section)
  3. Into supabase/config.toml
  4. Into the project’s README file, so teammates can find them

b. Supabase runs the sign-in code, so Supabase needs the credentials: select the Google provider, paste both values and save. Option a would put the secret into code that is sent to every visitor’s browser. supabase/config.toml (c) holds settings for a local Supabase server and is committed to Git, and so is the README (d), so both would publish your secret.

Question 8 · Short answer

Why are the Google credentials given to Supabase rather than written into the Next.js code of task-app?

The code that handles “Sign in with Google” runs on Supabase’s servers: Supabase talks to Google, receives the result and then logs the user in to task-app. So Supabase is the one that needs the Client ID and Client Secret. This also keeps the secret on a server instead of in code that runs in the user’s browser.

Question 9 · Ordering

Put these steps in the right order.

  1. Paste the Client ID and Client Secret into the Google provider settings in Supabase and save
  2. Create a Google Cloud project
  3. Create an OAuth client ID (type: Web application) with your Supabase callback URL as an authorized redirect URI
  4. Fill in the consent screen information (app name, support email, authorized domain, audience, contact email)
  5. Copy the Client ID and Client Secret right away and store them in a safe place

b → d → c → e → a.

You need a Google Cloud project first. Google wants the consent screen set up before it lets you create the client. The secret must be copied the moment the client is created, and the values go into Supabase last.

Question 10 · Short answer

In one or two sentences, what is the redirect URI for?

It is the address Google sends the user back to after a successful sign-in: here, your Supabase project’s callback address (.../auth/v1/callback), so that Supabase can finish logging the user in. Google only sends users to addresses on this approved list.

Question 11 · Multiple choice

Under Audience, the page tells you to choose External. Why not Internal?

  1. Internal is only available if you have set up an organization with Google
  2. Internal apps only work on Android phones
  3. Internal apps cannot be used with Supabase
  4. Internal hides the app name from users

a. Internal limits sign-in to members of your own Google organization, and you can only choose it if you have one. A class project has no such organization and is meant for ordinary Google users, so External is the right choice. Options b, c and d are not true.

Hard

Question 12 · Scenario

Your Audience is External and your app is still in the testing stage. You added your own Google account as a test user, and you can sign in. Your friend tries to sign in, and Google blocks them. Why, and how can you let your friend test the app?

While the app is in this testing stage, only the Google accounts listed as test users may sign in, and your friend isn’t on the list. Add your friend’s Google account (email address) as a test user in your app’s OAuth settings in Google Cloud (look for Test users), then have them try again.

Question 13 · Find the bug

Sam’s sign-in fails with Google’s error redirect_uri_mismatch. The authorized redirect URI he entered is:

https://bvcxzlkjhgfdsapoiuyt.supabase.co/auth/callback

What is wrong, and how does he fix it?

The address is missing /v1. It must be exactly:

https://bvcxzlkjhgfdsapoiuyt.supabase.co/auth/v1/callback

Google compares the address that Supabase sends with your list character by character, so any difference (a missing part, a wrong project ref, http instead of https) causes this error. Sam should correct the URI in his OAuth client’s settings in Google Cloud and save.

Question 14 · Scenario

You created the OAuth client, but you closed the window without copying the Client Secret. What now?

As the page warns, you can’t get the secret again from Google: it is shown in full only once, when it is created. Create a new client secret for the client (or a new OAuth client) in Google Cloud, store it in a safe place, and paste it into the Google provider settings in Supabase. Next time, copy it the moment it appears.

Question 15 · True or false

When a user signs in with Google, task-app receives the user’s Google password and checks it.

False. The user types their password only on Google’s own sign-in page. Google then sends the user back to the redirect URI (your Supabase project) with proof that the sign-in succeeded. Neither task-app nor Supabase ever sees the Google password; that is one of the main benefits of OAuth.

Question 16 · Short answer

The page says never to store the Client ID and Client Secret in a file that will be committed to Git. Why does that matter, and where should you keep them instead?

Git repositories are often shared (or even public on GitHub), and anything you commit stays in the project’s history. Someone with your Client Secret could pretend to be your app when talking to Google. Keep the values in a safe, private place (for example, your private notes for this tutorial or a password manager) and in the Supabase dashboard, which is where they are actually used.

© 2025-2026 Y. Rosenthal. All rights reserved.