SignIn with Google using ReactJs

4 min readFeb 4, 2020

Now a day, users don’t want to fill all details for signup, really this is the time taking and boring process. Google Sign-In is a secure authentication system that reduces the burden of login for your users, by enabling them to sign in with their Google Account — the same account they already using with Gmail and other Google services.

Setting up a basic react project:-

Step1:- Start basic react js project via CODESANDBOX

CodeSandbox is an online editor that’s built for web application development. Web application development is a growing field, and with all new configuration options, it becomes harder and harder to focus on writing code. Codesandbox make this easier by doing most configuration for you.

Step2:- Create Client Id from Google Developers Console

For this purpose, you need Google APIs. Google Developers Console is a site that is used by the developers for managing and viewing traffic data, authentication and billing information for Google APIs. To access the Google APIs our project must be registered on Google Developers Console with your Gmail.

Open Google Developers Console. It will look like this.

Go to the Credentials in the nav menu and create credentials.

After clicking create credentials select OAuth client ID from drop dropdown.

After selecting the OAuth client ID, It will ask for the Application type. Since we are making for Web application so we will select Web application.

After Selecting Web application, it will ask your domain then fill codesandbox’s domain like https://vw4bk.csb.app and create.

After creation you will get Client Id and Client Secret.

Step 3:- Install and Import npm "react-google-login"

Install npm i react-google-login in the project if you are not using codesandbox or if you are using then you can install via Add Dependency button.

Step 4:- Modify index.js file with “react-google-login” dependency.

Now, we will create a small page for login and render the page on google login. For this work, we need client id, which we have already created via google developer console.

import React, { useState } from "react";import "./styles.css";import GoogleLogin from "react-google-login";
export default function App() {const [name, setName] = useState("");const [email, setEmail] = useState("");const [url, setUrl] = useState("");const responseGoogle = response => {console.log(response);setName(response.profileObj.name);setEmail(response.profileObj.email);setUrl(response.profileObj.imageUrl);};return (<div className="App"><h1>Login with Google</h1><h2>Welcome: {name}</h2><h2>Email: {email}</h2><img src={url} alt={name} /><GoogleLoginclientId="607921044452-261g3g9obeecchrsjuvajvvj4c4vtfku.apps.googleusercontent.com"buttonText="Login"onSuccess={responseGoogle}onFailure={responseGoogle}cookiePolicy={"single_host_origin"}/></div>);}