How to Implement Login with Google in Nest JS

npm i -g @nestjs/cli

cd desktop && nest new google-login && cd google-login

npm install --save @nestjs/passport passport passport-google-oauth20 dotenv
npm install -D @types/passport-google-oauth20

Now open up your browser and type the localhost URL on which Nest is running **‘localhost:3000/’** you should get **Hello world** just as shown below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/an1wvy071ct9rgbscgi3.png)

Now we are good to go 🚀

### Create the Google Application

To use google OAuth we have to create an application on google developer console hence the need for the Gmail account. Visit [https://console.developers.google.com/](https://console.developers.google.com/) and create an application which we will use to set up the authentication in Nest JS. So when you visit the google developer console URL you should see something similar to the screen below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gfwevy9t1tmjuzug40gw.png)


Click on **“NEW PROJECT”** and fill in your desired name and then click the Create button.

**Set Project Consent Screen**

The project consent screen is what is displayed to the user whenever they want to use our google application to login to our system. To set the consent screen 
click “OAuth consent screen” menu at the sidebar

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yoi62c37kbw01gnx2mmf.png)

Select External so the application can be used by any google account and then click **CREATE**.

On the consent screen, make sure you only fill the “Application Name” and nothing else since this is just for testing purposes. If we are creating a live application then other fields can be filled which will then need to go through the approval process. Click save when you are done.

**Get App credentials**

To get our app credentials which will be used to authenticate the app with google API click on “Credentials” menu at the sidebar.
* Click Create credentials and select OAuth Client ID
* Select Web applications on the next screen then fill the Authorized JavaScript origins and the redirect URI.

The Authorized JavaScript origins refers to where our request will be coming from which in this case is localhost, so enter **http://localhost:3000** and for the Authorized redirect URIs enter **http://localhost:3000/google/redirect**.

Kindly note that the redirect URI simply refers to the particular endpoint in our app where google will return the response after authenticating a user.
Click save when you’re done. You should get your app credentials from the screen below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wsndg61fgc97gmq2ltvx.png)

Copy the credentials and save it somewhere because we are going to use it in our app.

### Setup Google Login (OAuth)
The first thing to do is to setup the google strategy which is the core of our google login implementation. Create a file named google.strategy.ts in the src folder and add the following code into the file.


  


In the code above, we loaded in all needed dependencies and then created a GoogleStrategy class as a sub-class of the PassportStrategy class. Every individual class that we define which uses passport must extend the PassportStrategy class which is a dedicated module from the ‘@nestjs/passport’.

We then pass in all the required parameters for the google strategy.

CLIENT_ID and CLIENT SECRET are the application ID and SECRET we got from google when we created the application which was loaded in through the environment variable.

CallbackURL is the particular endpoint in our app which google will return control to after authenticating a user. Remember we defined this also on google while creating our application.

Scope refers to the set of user information that we require from google needed in our app. In this case, basic user information captured in the profile and the user email.

The validate method refers to the verify callback function that will be executed after google returns to us the requested user information. This is where we decide what we want to do with the user information, in this case, we are just extracting and formatting the information we need from the returned user profile and adding it to the user object which will be available on the global request object. This is done by calling done and passing into it null (which means no error) and the user object.

Don’t forget to add the environment variables just as shown below in a .env file at the root of the project:



Note:

We could easily do all we want to do with the user information in the strategy file but Nest JS is very big on Single Responsibility Principle and since ordinarily in a live application, we will most likely want to save the user information in the database, such kind of actions is dedicated to something called services in Nest JS.

Setup the Controller, Route, and Service

For us to be able to login with google, we must setup the appropriate endpoint in our application and this is the job of controllers in Nest JS. To do this, open up the app.controller.ts file in the src folder and replace the content with the following code.


  


In Nest JS, routes can be setup at the controller level and/or at the request method level so in the code above we setup the google login route at the controller decorator level which means that every request in the controller will go through the google endpoint. You can read more on routing in Nest JS here

The first Get request is the endpoint that activates the google authentication through a special Guard from the “@nestjs/passport” module placed on the endpoint called “AuthGaurd”. We pass in ‘google’ as the argument to this AuthGuard to signify that we want to use the google strategy from the passport module to authenticate the request on this endpoint.

The second Get request refers to the second endpoint where google will redirect to (redirec URL) after authenticating a user. This endpoint also uses the special AuthGuard. After the done function in the validate method from the google strategy file is called, control is returned back to the googleLogin function on this controller. Let’s create the googleLogin function.

Open the app.service.ts file in the src folder and add the following code


  


Here we are just returning back the user information from google which was added to the request object from the validate method in the google strategy file.

Bringing it all together

As of now, our application still doesn’t know of the google strategy that was setup, so we need to make it available in the app module before we can use it.

Open the app.module.ts file and add the google strategy as a service in the provider array. Your app module file should look like the one below


  


  
  
  Testing Our App


Start the app by running ```npm

run start:dev