How to Get Google Access Credentials for OAuth Authentication

In this lesson, we'll create the necessary OAuth credentials from the Google API Console that we'll need to use to set-up Google OAuth in our application.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

Any application that uses Google OAuth to access Google APIs must have credentials that identify the application to Google's server. To achieve this, we'll need to log in to Google's API console at console. developer.google.com here we're already logged in. And when logged in, we can create a new project by clicking the Project drop- down menu and selecting New Project. We'll provide a project name of Tiny House and we'll create this project. With the project created, we're now in the dashboard of the created project. Next, we'll click Credentials on the left hand pane and we'll want to create a new credential, so we'll click the Create Credentials button and select the OAuth client ID option, which is the credential that can allow us to request user consent so our app can access user data. We're told to create an OAuth client ID, we must set a product name on the consent screen, so we'll click the Configure Consent Screen button available here to configure the consent screen we'll want to display to the user. Since we have an application within an organization, we'll state that this app is public for any Google account, we'll list the application name as Tiny House, the Support email is going to be the email address of this account. Scopes is where we can state the access we want from our application with the user account. We're going to leave this as is since we're only interested in the email and profile information of the user, no other details of the user account. And though we can fill the other information, for now we should be able to proceed. With the title established in our consent configuration, we can create an OAuth client ID. We'll set application type to Web Application since we're creating a Web App. We'll name our credential the Tiny House Web Client and we'll now need to specify authorized origins and redirect URIs. Origin refers to the URI of the client application and can't contain a wildcard or a path. Our development will list our local development origin, HTTP local host 3000. Redirect URIs refers to the path in our application that users are redirected to after they've authenticated with Google. We'll state that the user should be redirected to a /log-in path within local host 3000. Note that these are our development credentials. We'll need to update these for a new set of credentials for our deployed app later. Perfect. Now our applications can use the OAuth client ID credential to access the Google APIs on behalf of a user. Note that OAuth is limited to 100 logins until the consent screen is published, which may require a verification process that can take several days. For now, we don't picture more than 100 logins in our development setting, so we'll continue. Google returns a client ID and client secret to us and will save these values. Since these are configuration values that should be kept secret, we'll look to place these values in our server applications.env file. We'll head to the .env file in our server project and introduce two new environment variables, G client ID and G client secret to reference the client ID and client secrets of the OAuth client ID we've just created. In addition, we'll introduce another environment variable to reference the origin of our client application, local host 3000, in development. With which we'll need to use shortly as we set up the functionality to sign in users. We'll call this environment variable public URL. With the API keys saved, in the next lesson, we'll begin creating our GraphQL endpoints that will help us set up Google OAuth in our application. [BLANK_AUDIO]