How to add Google Login to a React app

Hi, in this tutorial I will show you how to implement Google account login functionality into your React application.

Introduction

When building applications there are instances where you may want to let your users login to your application in order to use it, however, this may mean you need to build a big piece of functionality that will involve email and password submission which can be time-consuming and cumbersome. Luckily, companies like Facebook, Twitter and Google have built packages that enable us (very clever) developers to allow users to login to our applications using their already existing social media accounts, saving us the time of building additional code and saving the user from having to create yet ANOTHER account to use a website. For this tutorial, I will be going through how to login to your Google account using a react package named the below.

@react-oauth/google

Which is Googles Identity Services SDK.

Google Cloud Console

However, before we build our React application we need to navigate to Google Cloud console and build a project as well as create a client ID that will be used with the package.

Firslty, navigate to the url below.