Add Google Sign-In and Sign-Out to your React App and get the AccessToken

This article will explain how to add Google Sign-In and Sign-Out button to your React App and get the AccessToken.

If you are not familiar with the React App and AccessToken mentioned above, a good idea is to check the following things first:
1.React — Getting Started
2. Using OAuth 2.0 to Access Google APIs

The Github Repository for the code below can be found at : https://github.com/ZoeLiao/React-Google-SignIn-SignOut-Demo

demo

1. Create a React App

Ok, let’s start. First use npm to install create-react-app package then we can create a new React App simply.

npm install -g create-react-app

After installed it, we can use the following command to create a new React App, which is named app , and move into the directory.

create-react-app app
cd app

Use npm start to start the app and visit http://localhost:3000, you will find your React App is running.:)

React App

2. Create a Google Client ID

Before you integrate Google Sign-In into your website, you should create a client ID, which you need to call the sign-in API. So we should visit https://developers.google.com/identity/sign-in/web/sign-in and create our project and copy the Client ID.

Create project

Add authorized JS Origin

Copy your Client ID

3. Add Google Sign-In and Sign-Out Button and Get the AccessToken

There is a great React package react-google-login can help us to integrate Google Sign-In and Sign-Out button to our React App easily. Let’s install it.

npm install react-google-login

cd srcand add a new file named GoogleBtn.js, add the following code and your Google Client ID:

Import your GoogleBtn into App.js

import GoogleBtn from './GoogleBtn';
...
function App() {
  return (
    <div>
      ...
      <GoogleBtn/>
    </div>
  );
}

Congratulation! You can log in and log out by your Google account and get the AccessToken.

What’s more, if you want to modify the settings of Google Client ID, you can visit https://console.developers.google.com/ .

I hope you found this piece helpful. Thanks for reading!

Integrating Google Sign-In into your web app

react-google-login

Using OAuth 2.0 to Access Google APIs | Google Identity Platform

Google Cloud Platform