How to setup Google Cloud Console for Google Calendar Sync?

This guide provides step-by-step instructions to set up their Google Developer Console, enable the Google Calendar API, configure the OAuth Consent Screen, and generate the credentials required for the Google Calendar integration in their application.

Prerequisites

A Google/Gmail account.
A live website with an HTTPS connection (Google OAuth does not permit http:// for redirect URIs in production).

Step 1: Create a Project in Google Cloud Console

1. Open the Google Cloud Console.

2. Log in with your Google account.

3. In the top-left menu (next to the logo), click the project dropdown and click New Project.

4. Enter a Project Name (e.g., Salon Booking Calendar).

5. Choose your Billing Account and Organization (optional, you can leave it as “No organization”).

6. Click Create.

7. Once created, make sure the new project is selected from the project dropdown at the top.

Step 2: Enable the Google Calendar API

1. In the search bar at the top, search for Google Calendar API.

2. Click on Google Calendar API from the search results.

3. Click the Enable button.

4. (Optional) If you also need Google Login, search for Google People API and enable it too.

Before generating credentials, you must configure how the consent screen looks to your users.

1. In the left-hand navigation sidebar, click on APIs & Services > OAuth consent screen.

2. Select the User Type:

Choose External (this allows any Google account holder to authenticate).
Click Create.

3. App Information:

App name: Enter your business/app name (e.g., Frezka Salon Sync).
User support email: Select your email address.
App logo: (Optional) Upload your business logo.

4. App Domain:

Application home page: https://your-domain.com
Application privacy policy link: https://your-domain.com/privacy
Application terms of service link: https://your-domain.com/terms
Authorized domains: Enter your root domain (e.g., your-domain.com). Do not include https:// or www..

5. Developer contact information:

Enter your email address and click Save and Continue.

Add Scopes

1. On the Scopes page, click Add or Remove Scopes.

2. In the panel that opens, search for and select the following scopes:

.../auth/calendar (Google Calendar API – View and edit calendars)
.../auth/userinfo.email (OAuth2 API – View your email address)

3. Click Update at the bottom of the panel.

4. Verify both scopes are listed in your selected scopes table, then click Save and Continue.

Add Test Users (Crucial for Testing)

Because your app is not yet verified by Google, only added test users can link their calendars.

1. On the Test users page, click Add Users.

2. Enter the Gmail addresses of the users (e.g., your admin email, test staff, test customers) that you want to use for testing.

3. Click Save and Continue.

4. Review your configuration summary and click Back to Dashboard.

Step 4: Create OAuth 2.0 Credentials

1. In the left navigation bar, click on APIs & Services > Credentials.

2. Click the + Create Credentials button at the top and select OAuth client ID.

3. Select the Application type as Web application.

4. Enter a Name for the client (e.g., Frezka Web App).

5. Scroll down to Authorized JavaScript origins:

Click + Add URI.
Enter your base website URL (e.g., https://your-domain.com).

6. Scroll down to Authorized redirect URIs:

Click + Add URI.
Enter the exact callback URL of your application:
- For Google Calendar Sync: https://your-domain.com/calendar/callback
- For Google Login (if applicable): https://your-domain.com/auth/google/callback Note: Replace your-domain.com with your actual domain.

7. Click Create.

8. A popup will appear showing your Client ID and Client Secret. Copy these values immediately; you will need them in the next step.

Step 5: Configure the Environment Settings

Option A: Via the `.env` File

Add or update the following keys with the copied credentials:

GOOGLE_CALENDAR_CLIENT_ID=your_copied_client_id
GOOGLE_CALENDAR_CLIENT_SECRET=your_copied_client_secret
GOOGLE_CALENDAR_REDIRECT_URI=https://your-domain.com/calendar/callback
GOOGLE_CALENDAR_ID=primary

Note: Ensure GOOGLE_CALENDAR_REDIRECT_URI matches exactly what you entered in the Google Cloud Console redirect URIs list.

Option B: Via the Admin Panel

1. Log in as an Admin to your application dashboard.

2. Navigate to Settings > Integrations / Google Settings.

3. Enter the Google Calendar Client ID and Google Calendar Client Secret.

4. Enable Google Calendar Auto Sync.

5. Save the settings.

Step 6: Move to Production (Publish App)

To remove the “Google hasn’t verified this app” warning page when users connect their calendars:

1. Go back to the OAuth consent screen tab in the Google Cloud Console.

2. Under Publishing status, click Publish App.

3. Confirm the push to production.

Note: Google might ask you to submit for verification if you use restricted scopes. However, you can still use the app in “production” mode without verification if you only have a few users (there is a limit of 100 logins before verification is enforced). Users will simply click “Advanced” and “Go to your-domain (unsafe)” during authorization.