Setting up Google Calendar authentication in Supabase requires registering your app with Google Cloud, obtaining OAuth credentials, and configuring them in Supabase's authentication settings.

The process involves three main steps: creating a Google Cloud project, generating OAuth 2.0 credentials, and adding those credentials to your Supabase project. Once configured, users can sign in to your app using their Google account and grant permission to access their calendar data. The whole setup typically takes 15 to 20 minutes if you follow the steps in order.

This guide walks through each step so you can authenticate users via Google and read or write to their Google Calendar from a Supabase-powered application.

Key Takeaways

  • You must create a Google Cloud project and enable the Google Calendar API before you can authenticate users through Google.
  • OAuth 2.0 credentials consist of a Client ID and Client Secret that you generate in Google Cloud Console and paste into Supabase.
  • The redirect URI in Google Cloud must match exactly what Supabase provides — usually something like https://your-project.supabase.co/auth/v1/callback.
  • After adding credentials to Supabase, users will see a "Sign in with Google" button that prompts them to authorize calendar access.

Create a Google Cloud project and enable the Calendar API

Start by going to Google Cloud Console at console.cloud.google.com. Sign in with a Google account that has permission to create projects. Click the project dropdown at the top of the page and select "New Project". Give it a name related to your app — for example, "My Calendar App" — and click Create. Google takes a few seconds to set up the project.

Once the project is created, you need to enable the Google Calendar API. In the left sidebar, click "APIs & Services" and then "Library". Search for "Google Calendar API" in the search box. Click on it and press the blue "Enable" button. This tells Google Cloud that your project is allowed to access calendar data.

Generate OAuth 2.0 credentials in Google Cloud

With the Calendar API enabled, you now need to create credentials. In the left sidebar, click "APIs & Services" and then "Credentials". Click the blue "Create Credentials" button at the top and select "OAuth 2.0 Client ID" from the dropdown.

Google will ask you to configure the OAuth consent screen first. Click "Configure Consent Screen" and select "External" as the user type. Fill in the app name, user support email, and developer contact email — these are required fields. You can leave the other fields blank for now. Scroll to the bottom and click "Save and Continue".

On the next screen, you do not need to add any scopes manually — Supabase handles that. Click "Save and Continue" again. On the final screen, click "Back to Dashboard".

Add the redirect URI and download credentials

Go back to "Credentials" in the left sidebar. Click "Create Credentials" again and select "OAuth 2.0 Client ID". This time, choose "Web application" as the application type. Give it a name like "Supabase OAuth".

Under "Authorized redirect URIs", click "Add URI" and paste your Supabase redirect URL. To find this URL, log into your Supabase project, go to "Authentication" in the left sidebar, click "Providers", and find Google in the list. Copy the redirect URL shown there — it looks like https://your-project-name.supabase.co/auth/v1/callback. Paste it into the Google Cloud form and click Create.

Google will show you a popup with your Client ID and Client Secret. Copy both of these — you will need them in the next step. Do not share the Client Secret with anyone or commit it to version control.

Add Google credentials to Supabase

Log into your Supabase project and go to "Authentication" in the left sidebar. Click "Providers" and find Google in the list. Toggle it on. Paste your Client ID and Client Secret into the fields provided. Make sure the redirect URI shown matches what you entered in Google Cloud — if it does not match exactly, authentication will fail.

Click "Save" at the bottom of the form. Supabase will confirm that the credentials are saved. Your Google Calendar authentication is now active.

Test the Google sign-in flow

To verify everything works, open your app and look for a "Sign in with Google" button or link. Click it. You should be redirected to Google's login page. Sign in with your Google account and you will see a permission screen asking if you want to allow your app to access your calendar. Click "Allow".

After you grant permission, you should be redirected back to your app and logged in. If you see an error instead, double-check that your Client ID, Client Secret, and redirect URI all match what you entered in Google Cloud. A single character difference will cause the authentication to fail.

Access Google Calendar data from your app

Once a user is authenticated, you can use the Google Calendar API to read or write calendar events. You will need to use the access token that Supabase provides after authentication. In your app code, retrieve the session from Supabase and extract the access token. Then make requests to the Google Calendar API endpoints using that token.

For example, to list a user's calendar events, you would send a GET request to https://www.googleapis.com/calendar/v3/calendars/primary/events with the access token in the Authorization header. The Google Calendar API documentation has examples for all the operations you might need — creating events, updating them, deleting them, and more.

Frequently Asked Questions

What is the difference between Client ID and Client Secret?

The Client ID is a public identifier that tells Google which app is requesting access. The Client Secret is a password that proves your app is legitimate — never share it or put it in client-side code. Always keep it on your server or in a secure environment like Supabase.

Why does my redirect URI keep failing?

The redirect URI must match exactly in both Google Cloud and Supabase, including the protocol (https), domain, and path. A trailing slash, different capitalization, or any other difference will cause authentication to fail. Copy and paste the URL from Supabase into Google Cloud rather than typing it by hand.

Can I use the same Google Cloud project for multiple apps?

Yes. Create a separate OAuth 2.0 credential for each app, each with its own redirect URI. All credentials can live in the same Google Cloud project. This keeps your setup organized and makes it easier to manage credentials across multiple applications.

What permissions does the user grant when they sign in?

The user sees a consent screen that lists which data your app can access. By default, Google Calendar authentication grants access to read and write calendar events. You can restrict this in your app code by requesting specific scopes, but the user will always see what permissions you are asking for before they sign in.

Do I need to refresh the access token?

Yes, access tokens expire after a set time — usually one hour. Supabase handles refresh tokens automatically in most cases, but if you are making direct API calls, you may need to refresh the token if it expires. Supabase provides a method to refresh the session when needed.