Implementing Google Login Using React/Node/Express/Mongodb

Our system will be designed like below

First, we need to create a google cloud project and configure the outh2 details there. Next, for the sake of simplicity we will use create-react-app to scaffold our application.

Install the following dependencies for front end.

• react-google-login — we will use this library for implementing google login in UI
• lodash — just an utility library
• axios — we will call our own APIs using this

npm i --s react-google-login lodash axios

Install the following dependencies for backend

• google-auth-library — we will use this to verify the google id token
• jsonwebtoken — to implement jwt, so that our subsequent requests after login are authenticated
• mongoose — For database interaction
• express
• cors
• cookie-parser
• nodemon

npm i --s google-auth-library jsonwebtoken mongoose express cors cookie-parser nodemon

Implementing the Front-end in React

The code above is fairly simple. The library react-google-login expects a valid google client id. The library returns a callback on success and failure of google login from client side. In our case, responseGoogle function takes care of the callback.

Inside responseGoogle function we check if google login from UI was successful, incase there are no errors we call an api /login/user which we will create at the later part of this article. Intention of creating /login/user endpoint is to make sure that incase of valid google login, an entry is made into our database if it is a valid user or update the latest data from google if it is an existing user. This endpoint also creates a valid login cookie, which will be passed with every subsequent API request from UI, incase we want to create a protected endpoint with authentication.

There are two other API endpoints named /user/authenticated/getAll and /logout/user , they are for demonstrating a protected endpoint and logout functionality respectively.

Setting Up the Backend

Creating Login Service

First, lets talk about the endpoint /login/user , we call this endpoint after successful google account login from UI. we send the google Id token in request body as authId and then using google-auth-library we check for the validity of the token in backend. If the token is valid then we extract meta datas like email, name, profile image etc. from the id token and save it in our database.

Next step is to create a login cookie with a secure id token, which will be used to determine if the user is still logged In and authenticated to use the restricted services.

To create a valid login token we are using the jsonwebtoken library. We use email of the user and sign it with our secret key to generate an unique identification string.

If all these above process is successful then we set a cookie named login with an expiry of 36000ms from the time of creation and send a response to the client with status code 200.

Creating a Restricted Endpoint

Now let’s talk about our second endpoint which needs user authorisation before sending the results. If not an authorised user, this api will return 401 error.

Notice that we pass one middleware authenticateUser in this endpoint.

This middleware checks for the cookies in request and if login cookie is available in request then it extracts the value from it, decodes using jwt secret key and checks if user is valid, else it will return 401 error.

NB: we are using same domain for backend and UI here and using axios to make our api calls. axios by default sends cookies in each request from the same domain.

Logging Out

Lastly we will create an endpoint which will delete the login cookie and in return logout the user. /logout/user endpoint takes care of the same.

Our system to login using google sign in is ready. However, this is a very basic application and lot more improvements can be done to make it more scalable and secure. Nexts steps for this application is to upgrade the system in a way that user can login in multiple devices and also can delete all the login sessions from one place(logout from all devices).

Full Repository Link: https://github.com/shouvikbhuiyan1990/react-google-signin-express

Happy coding !