Google Authentication with React

Implement google OAuth2 using React

If we need to interact with any google services or just to authenticate a user using google we have to implement the authentication mechanism with google. Some use cases can be

  • Uploading files to google drive using ReactJS
  • Interacting with Youtube API from ReactJS
  • Interaction with Google sheets from ReactJS

To implement this there is already a nice library called login with google for us. Let's see how we can use that

First install the dependency

yarn add react-google-login

Pre-requisites

You will need to have a account on Google cloud. If you don't already have that first create a free account and then continue.

You will also need a google cloud project and get the CLIENT_ID from the credentials dashboard. I am assuming you already have that.

Use the google login

Then import the GoogleLogin and use it inside the code.

import React from "react";
import { GoogleLogin } from "react-google-login";

const CLIENT_ID = "YOUR_CLIENT_ID_HERE";

function Login() {
  const responseGoogle = (response: any) => {
    console.log(response.accessToken);
  };
  return (
    <div className="App">
      <GoogleLogin
        clientId={CLIENT_ID}
        buttonText="Login"
        onSuccess={responseGoogle}
        onFailure={responseGoogle}
        cookiePolicy={"single_host_origin"}
      />
    </div>
  );
}

export default Login;

If login is successful you will get an accessToken and a tokenId inside the response object. Save that token inside a state variable or something. You can use this accessToken to make further calls to other services.

Logout

We can also implement the logout functionality using this same library.

import { GoogleLogout } from "react-google-login";

function Logout() {
  const logoutHandler = () => {
    console.log('successfully logged out!);
  };
  return (
    <GoogleLogout
      clientId={CLIENT_ID}
      buttonText="Logout"
      onLogoutSuccess={logoutHandler}
    />
  );
}

export default Logout;

In real life applications we want to use both of this features based on the authentication state. We can combine these 2 features to track the signed in state and show the appropriate component.

The final code will look something like this.

import { useState } from "react";
import GoogleLogin, { GoogleLogout, GoogleLoginResponse, GoogleLoginResponseOffline } from "react-google-login";

const CLIENT_ID = "453936919472-efu89ef221p6icp18ivtro5lnui0hv9d.apps.googleusercontent.com";

const SCOPE = "https://www.googleapis.com/auth/drive";

export const GoogleAuthentication = () => {
  const [isSignedIn, setIsSignedIn] = useState(false);

  const signOutHandler = () => {
    console.log("logged out!");
    setIsSignedIn(false);
  };

  const signInHandler = (response: GoogleLoginResponse | GoogleLoginResponseOffline) => {
    console.log(response);
    setIsSignedIn(true);
  };

  return (
    <>
      {isSignedIn ? (
        <GoogleLogout clientId={CLIENT_ID} buttonText="Logout" onLogoutSuccess={signOutHandler} />
      ) : (
        <GoogleLogin
          clientId={CLIENT_ID}
          buttonText="Login"
          onSuccess={signInHandler}
          onFailure={signInHandler}
          cookiePolicy={"single_host_origin"}
          isSignedIn={true}
          scope={SCOPE}
        />
      )}
    </>
  );
};

You will notice that we have introduced a new variable named scope here. In order to make calls to services like Youtube API or Google Drive API we have to define the scopes here.

You can get the scopes from OAuth2 playground

Example

GOOGLE_DRIVE_SCOPE = "https://www.googleapis.com/auth/drive";
YOUTUBE_DATA_API_V3 = "https://www.googleapis.com/auth/youtube";

That's it today! Hope you learned something new today!

Github repo

https://github.com/Mohammad-Faisal/react-google-authentication-demo

Profile Image

Who I am

Hi, I amMohammad Faisal, A full-stack software engineer @Cruise , working remotely from a small but beautiful country named Bangladesh.

I am most experienced inReactJS,NodeJS andAWS

Buy Me a Coffee Widget