hero banner how to setup your first google api project

How to setup your first Google API project

6 min read

The blog post has been updated to work with Nylas API V3.

Intro

In this post, let’s take a look at creating your first Google API Project to use with Nylas. This is useful when building applications requiring access to a user’s communication data. In this scenario, we’ll be allowing Google users to connect their accounts so we can access their email, calendar, and contacts. This post will walk the reader through how to create a Google Project. Also, check out our video that walks you through setting up your first Google API project:

Prerequisites

  • Sign up here if you need to create a Nylas account for free!
  • Create a new App in the Nylas dashboard
  • We’ll be using the Google Cloud Platform (GCP) console to create a Google Project, so make sure you signup for a GCP account!

Environment

No local environment setup is required, we’ll be using the Nylas and Google dashboards to set everything up.

Understanding Google API project scopes

When connecting to a user’s Google account to access certain communication data, we need to specify the type of data we are accessing. These are known as scopes, our application needs to specify the scopes we are requesting access from the user. Think of it as different permissions the user needs to grant before we can access and build off their communication data.

The Nylas docs contain a list of different Google scopes we can set up when building with Nylas. Keep in mind that we have a few Google scopes that will be required (userinfo.email, userinfo.profile, openid) when creating a Google application. For now, let’s consider the flow where we are just accessing the user’s calendar data, so that will requires us to include the calendar.readonly Google scope.

Now we have gone over what scopes are and the initial scopes we are going to use to set up a Google API Project.

Setup your first Google API project

A few items we need to consider upfront are authentication flow and type of application (internal or external application)

The two different authentication flows are: hosted and native authentication. Hosted authentication flow is a no-code approach to connecting users. The differences between hosted and native authentication are discussed in our docs.

Most applications will be an external public-facing applications. This requires additional checks before publishing and you are initially limited on the total number of test accounts. For the purposes of this tutorial, we can consider creating an internal application where we can test out the flow of connecting a user account using your personal email.

Let’s jump into GCP and create our google project. This involves a few steps, so we’ll go through them one by one.

Create a Google API project

Let’s head over to GCP and create a new project:

Now we’ve created a Google Project that we can start to configure the APIs we want to use.

Enable Google APIs

The APIs that we enable will allow us to access specific user communication data: profile data, contacts, emails, calendars, and available resources (i.e. room availability). For now lets’ consider connecting the Google Calendar API so that we can receive calendar events.

Before enabling an API, make sure you are in the correct Google Project, you can see the current project listed in the top right corner of the GCP Dashboard:

Let’s enable the Google Calendar API:

Now we’ve enabled the Google Calendar API to receive a user’s calendar data such as upcoming events.

Configure OAuth

We need to configure OAuth on GCP so that when we connect a user, we can receive an access token to request user data from the Google Calendar API.

One thing to keep in mind before setting up the OAuth screen is you will be provided an Authorized domain. These will be domains that Google will only allow to request user permission. Authorized domains is an added layer of security to ensure that only specific domains can request access to user data. Since we are building using hosted authentication, we are going to provide nylas.com as an authorized domain.

Let’s setup the OAuth screen on GCP:

When setting up OAuth, we will need to specify the scopes we discussed earlier. These scopes will be displayed to the user before they grant our application permission.

Here is an example of what the user will see before granting permission to your application:

Let’s setup scopes for our project:

Now we’ve setup scopes to display request user permission for the communication data we want to access.

Create credentials

Next we need to create API credentials, so Nylas can communicate with Google API and similar service providers to retrieve the user data for us. This purpose of doing this is so our application can receive a consistent structure of communication data across all providers as we build out our application.

Let’s setup the Google API credentials:

Take note of the credentials provided at the end, these will be needed in the upcoming section:

Note: Ensure to securely store the Client ID and Client Secret, this should not be publicly available.

Now we’ve set up OAuth credentials so we can start communicating with the Google API to access user communication data like upcoming calendar events.

Update Nylas Dashboard

Let’s add the Google OAuth credentials to the Nylas dashboard:

Now we’ve added the credentials to the Nylas dashboard to allow us to connect to a user’s Google accounts.

Connecting accounts with Nylas

Let’s test out the integration by connecting a Google account using the Nylas Dashboard (this is equivalent to using Nylas’ Hosted Authentication):

Now we’ve successfully tested connecting to Google account using the Nylas Dashboard.

Build time!

Consider checking out other blog posts, like this one on managing calendar events, to try

Continue building with Nylas and learn more by visiting the documentation. Sign up here if you need to create a Nylas account for free!

Related resources

How to create an appointment scheduler in your React app

Learn how to create an appointment scheduler in your React app using Nylas Scheduler. Streamline bookings and UX with step-by-step guidance.

Beyond APIs: Designing elegant, smart Web Components

Dive into the world of smart Web Components for advanced API integration solutions. Design elegant, customizable elements to elevate user experiences.

How to integrate a React calendar component to streamline scheduling

Elevate your app’s scheduling with a React calendar component and seamlessly integrate with Nylas for efficient calendar management.