ReactJS + NodeJS Google Auth Login Implementation on Webapps
Tags: react, node, webdev, tutorial
Published: 2022-01-03 10:07:17

With the building of web-applications, there comes a need to have a OAuth Login implementation in any project. There are a number of providers through which we can login to applications such as Google, Facebook, Twitter, Github and many more.


![Google Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yrlfifbznvbdstri55e.png)

Thus an implementation for the web developers is important on how to achieve the login functionality in their web-apps using these providers.

WE went through the same journey and would guide you through the process on how to achieve the Google Login functionality on your web-application.

**Pre-requisite**
We expect you to have background in the NodeJS and ReactJS development and how to serve a complete web-app using both.

**React Setup**
We would be using the standard npm library for performing the Google Login on Frontend.

`react-google-login`

>_Steps to install_
1. For `npm`, `npm install react-google-login`
2. For `yarn`, `yarn add react-google-login`

Once installed, you are ready to create your login screen.
Use the snippet below for your Login screen.

```
import React from 'react'
import { GoogleLogin } from 'react-google-login';
import { makeStyles } from '@material-ui/core/styles';
import { useHistory } from 'react-router-dom';

const useStyles = makeStyles((theme) => ({
	button: {
		margin: theme.spacing(1),
	},
}));

export default function Login() {

	const classes = useStyles();
	const history = useHistory()

	const onGoogleSuccess = (response) => {
		const access_token = response.tokenId;
		fetch(
			'/googleLogin', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({ tokenId: access_token })
		}
		).then((res) => {
			if (res.status === 200) {
				history.push('/')
			} else {
				history.push('login')
			}
		}).catch((err) => {
			throw new Error(err);
		})
	}

	const onGoogleFailure = (err) => {
		console.log(err)
	};

	return (
		<div
			style={{
				width: "100%",
				height: "100vh",
				display: "flex",
				flexDirection: "column",
				justifyContent: "center",
				alignItems: "center",
				backgroundColor: "#151a30",
				color: "white",
			}}
		>
			<h1>Google Oauth Sign In</h1>
			<GoogleLogin
				clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
				buttonText="Sign in with Google"
				onSuccess={onGoogleSuccess}
				onFailure={onGoogleFailure}
				className="google-login-button"
				cookiePolicy={'single_host_origin'}
			/>
		</div>
	);
}
```

The npm library `google-auth-library` comes with a two functions, `onSuccess` and `onFailure`.

To know more about the library and it's various implementations: [NPM react-google-login](https://www.npmjs.com/package/react-google-login)

Once the successful login is approved by the Google Servers, we get a response containing the tokenId, we use the tokenId and send it to our server where our server will connect to google servers to fetch the profile info of the logged-in user.

**Node Setup**
We create a standard server with a route exposed at `/googleLogin` as shown in the React `onSuccess fetch` call.

That will route the call to a controller we will create below.

We would be using Google's standard library to perform the OAuth from server side, `google-auth-library`.

>_To know more about the library, please refer to the links below_
1. [NPM Docs](https://www.npmjs.com/package/google-auth-library)
2. [Google Docs](https://cloud.google.com/nodejs/getting-started/authenticate-users)

Server controller snippet

```
const { OAuth2Client } = require('google-auth-library');
const controller = require('./controller');

const client = new OAuth2Client(process.env.GOOGLE_DEFAULT_CLIENT_ID);

const clientId = process.env.GOOGLE_DEFAULT_CLIENT_ID;

exports.googleLogin = (req, res) => {
	var inputJSON = JSON.stringify(req.body);
	var parsedJSON = JSON.parse(inputJSON);
	const { tokenId } = parsedJSON;
	var verifyObject = {};
	verifyObject.idToken = tokenId;
	verifyObject.audience = clientId;
	client.verifyIdToken(verifyObject)
		.then(response => {
			const { email_verified } = response.payload;
			if (email_verified) {
				controller.addUser(req, res, response.payload);
			} else {
				res.json({ status: 403, message: 'Email Not Verified, use another method to login!' });
			}
		});
};
```

The controller uses a `verifyIdToken` function which checks for the token sent from React UI and in case of a successful checks returns an object which contains profile data of the user.

>_Common Fields we get in response_
1. name
2. issuer
3. profile_picture
4. email
5. verified_email: True|False and so on....

Once we have that info, we can use that info as per our use case, in our case we proceeded to add the data to our backend database.

This was a small writeup on how to perform the full Integration of Google Auth Login using ReactJS and NodeJS.