Google Authentication With nodejs, express, typescript, pug and Google API

Google APIs use OAuth 2.0 protocol for authentication and authorization. Google supports common OAuth 2.0 scenarios such as those for web server, installed, and client-side applications.

To begin, our nodejs is the client and Google authorization server is our server which extracts token from server and send the response to Google API that you want to access.

So, here the flow of how OAuth2.0 works.

1. Obtain OAuth 2.0 credentials from the Google API Console.
2. Obtain an access token from the Google Authorization Server.
3. Send the access token to an API
4. Refresh the access token, if necessary

You can find an explanation of these steps in link below
https://developers.google.com/identity/protocols/OAuth2

OAuth2.0 workflow

Get credentials from Google API console

1. Sign in using your gmail id in google developer console from here https://console.developers.google.com/
2. Either select an existing project or create a new project

3. Once, you select or create a project, navigate in Credentials Section

4. It will give you the list of project

5. Select your desired project there you will see the Client Id and Client Secret in the right hand side. You can also download JSON file.

Now let’s set up a project and require dependencies :)

1. Setup a nodejs project
2. Install express and googleapis (client side javascript library for google authentication and authorization)

express

googleapis

3. Setup express server and view engine in nodejs

Let visualize the process

1. Suppose, our application runs in http://localhost:8080
2. We need a sign in button

Simple Sign in button

3. When we click into Sign in button our app will redirect to Sign in page google

Google accounts list

4. Google will ask for your permission

Permission for accessing

5. Click on allow button and it will redirect to your nodejs app

Final output

From the above process, our question will be

1. How does Sign in button know the url of gmail accounts?
2. How our application is retrieving our chosen email address from gmail accounts?

It’s simple and we just need a few lines of code but in order to get working you should not miss to setup these things in google developer console

1. Authorized JavaScript origins

Our application url since we are running in localhost our application url will be http://localhost:8080

2. Authorized redirect URIs

Our application url in which we will get token information from Google authorization server using googleapis js library http://localhost:8080/auth/google/callback

Google developer console to setup JavaScript origins and redirect URIs

Now, let’s get coding :)

1. Import the required dependencies and setup view engine

2. Setup oauth2Client with Client Id, Client Secret and redirection uri

In the above code, replace Client Id and Client Secret with your Client Id and Client Secret.

Note: redirectUri should be the same as you set in authorize redirect URIs of google developer console.

3. Generate redirectUrl and this redirectUrl is the key which redirect our app to gmail accounts.

In the above code, notice the scope array. This contains only the list of API scopet that our application required. It is recommended to add the scope incrementally when required as our accces_token will generate on basics of the scope too which means we are not allowed to access google API that is beyond the scope despite having access_token.

You can find the list of API scope here and make sure to use only and when required.

https://developers.google.com/identity/protocols/googlescopes

4. Get to the app login page

5. Get the google access_token and refresh_token then set to oauth2Client

Get the details of code here

https://gist.github.com/nischalshakya95/38959cb5e5633db306ea6aaa4ad31152

That’s it Happy Coding :)

References

1. OAuth

Real life example of how OAuth works in application

What is OAuth? Definition and How it Works

Using OAuth 2.0 to Access Google APIs | Google Identity Platform

2. Google OAuth playground

OAuth playground to know about API endpoints and their response

https://developers.google.com/oauthplayground

3. Googleapis nodejs client

googleapis

googleapis/google-api-nodejs-client

4. Reference example

https://dev.to/uddeshjain/authentication-with-google-in-nodejs-1op

5.Google API scope

OAuth 2.0 Scopes for Google APIs | Google Identity Platform

6. Stackoverflow solution

How to get email and profile information from OAuth2 Google API?

Issues

1. Redirection url (Due to invalid Authorized JavaScript origins and Authorized redirect URIs in google developer console)
2. 403 unauthorized (Due to google API scope)