Creating the project in Google Console
Tags: webdev, googlecloud, javascript, tutorial
Published: 2023-09-07 11:15:52

In the [first article](https://dev.to/noblica/setup-your-nextjs-app-35io) of the series, we have set up our frontend project, created some basic components, and added some base styling.

If we want that **Sign In With Google** button to actually do **something**, we have to connect it to Google services. This means we need to tell Google some details about our project, like the project name, who's going to be using it and what information from the Google profile we want to use.

So we have to set up a project in Google Console, and this is what we'll be doing in this article!

First, we need to create and setup the project. To do that, we simply go to https://console.cloud.google.com/ click the **Select Project** dropdown at the top of the screen, and create a new project. For the **Project Name** we will pick **Next Google Auth**, and in the **Organization** field pick **No Organization***.

![Creating the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i9o3c7typetkzrgfaa3.png)

After the project is created, we need to configure it, starting with the OAuth Consent Screen.

## Setting up the OAuth Consent Screen

After your project is created, select it, and navigate to the **APIs & Services -> OAuth Consent Screen**. 

![Navigate to the OAuth consent screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bk2zyzc1trh61vd6twg.png)

We need to define certain OAuth consent parameters, like if the app will be for internal or external use, what the app name will be, etc.

We will select certain options for the purposes of this demo, but feel free to change your selection to however you see fit depending on your needs.

**A note on Google Cloud project configuration**: Initially, when the Google Cloud project is created, it is put in **TESTING** mode, and you can change the settings as much as you want until you decide to publish your project. However, please note that after you **PUBLISH** the project, you will need to submit your app for verification, before you can change the project settings again!

In the **OAuth consent screen** step we just need to provide some basic info about the app, and who is going to support it. So choose the following:
- Our **User Type** will be **External**.
- Our **App name** will be **Next Google Auth**.
- Our **User support email** and **Developer contact information email** will be the same (you can use your own google email address here).


![Configuring the OAuth consent screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1wtd6b06t0vvtjfdwah.png)

![Configuring the OAuth consent screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nclkz1ytv9emdrs0vflr.png)


In the next step **Scopes**, we define what user info we want to grab from google services. There's a lot of info we can get, but we are only interested in the users email and some profile info for this specific app, so:
- Select **ADD OR REMOVE SCOPES**
- Select `../auth/userinfo.email` and `../auth/userinfo.profile`.
- Hit **UPDATE** and continue to the next step.


![Initial add/remove scopes screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rstu1dno6ww9xky6ewc.png)

![Dialog to add scopes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi2illedrcqs7oom53ap.png)

![Final screen with scopes added](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qciggjb5a1q6v7qwejo.png)


Finally, go ahead and add your email as a **Test Users** for now.


![Adding a test user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sucinko2vcchulfjleg2.png)


That's it! We've finished with the consent screen configuration. The final screen is just an overview of the things we selected/entered, so make sure everything is correct.


After we're done with our consent screen configuration, we can continue and create our **Credentials**.


## Setting up our OAuth Credentials:
We need to setup our OAuth Client ID and Client Secret, so we can connect our frontend app with our newly created Google Cloud Project.
To create these credentials, go to **Credentials** -> **CREATE CREDENTIALS** -> **OAuth client ID** 
- Under **Application Type** make sure you select **Web Application**.
- Make sure to define an entry under **Authorised redirect URIs** as `http://localhost:3000/api/auth/callback/google`.
- Click **Create**.


![Create credentials selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvzowsezi4uek047wdo1.png)


![Credentials configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yoktsizxw6jffu0h0i0.png)


### Why do we have to specify a redirect URI?
After Google has verified that the user signing into your app is in fact a Google user, it needs to know where it can safely send the information we requested in the **Selected Scopes** (in our case we only requested the user email and profile information). 
This token can contain **sensitive** data, so we have to make sure that we are redirecting to a safe URI.

We now have our **Client ID** and **Client Secret**! With these 2 strings, we can finally connect our frontend app with our freshly created Google Cloud Project, and put those Sign in/Sign out buttons to good use!