How to Get Google Access Credentials for OAuth Authentication

[00:00 - 00:15] 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.

[00:16 - 00:28] 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.

[00:29 - 00:47] 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.

[00:48 - 01:24] 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.

[01:25 - 01:47] 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.

[01:48 - 02:06] 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.

[02:07 - 02:21] 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.

[02:22 - 02:37] 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.

[02:38 - 02:53] 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.

[02:54 - 03:04] 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.

[03:05 - 03:12] We'll need to update these for a new set of credentials for our deployed app later. Perfect.

[03:13 - 03:33] 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.

[03:34 - 03:46] 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.

[03:47 - 04:16] 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.

[04:17 - 04:32] 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.

[04:33 - 04:46] 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.