Build a React.js Google OAuth2 User Login & Logout System in Browser Using Javascript

uh hello guys welcome to this video so in this video we will be looking at how to integrate the Google login

functionality inside uh react CHS application so this is actually the demo

right here that you can see on your screen we are running this application on Local Host 3000 we have a login with

Google button so as I click this button I will be redirected to the consent screen where you can actually select

your Google account just grant the permission to this project and then it will show the all the details such as

the profile details user user ID user display name email

address and the profile picture these three details it will show like this so

I'll be showing you how to implement this you can do this for

any account so this is really important if you want to register

user show login with Google button and after when they do it we will not be

using any third party package we will I will show you from scratch how I did

this by going to Google API then I get the access token programmatically and

get all this information so you will be getting to understand how this authorization flow works so this is

everything coded right here if you need the source code the link is given with

full documentation and support so if you are interested the link is given you can directly purchase it from proot

store.com after you purchase it you will be redirected to Google Drive where you will actually get the zip file

automatically downloaded from Google Drive so the link is given so let's

start the tutorial step by step and uh what I will do I will simply navigate

to the projects directory and right here I will simply make a new project which

is npx create VAB and then you will say the name of

the project which is uh react login

project and then we need to specify the template here which is react so here we

are using v as a development environment npx create V app followed by the project

name and then the template is react simply enter it and now it will scaffold

a simple react CH project inside this directory react login project or or

to so now you can CD into this project react doin

project so open it inside vs code so this would be the directory structure we

have a v config file as well which is a available this is the index. HTML this

is a source directory we have a jsx file right here if I just stop this previous

project and start this project npm brand Dev this is the command right

here so sorry we need to install all the modules simply mpmi so this will install

all the packages is right here so we forgot to do that so it will install all

these packages and create a node modules folder inside the root

directory so just wait for in the installation to finish it's really quick

as compared to the create react app that's why I use the

vat development engine so it makes the process way more

easier so just wait it is installing you will see it has created the node modules

folder so now it's finished so now we can run the project npm runev it will

start the development server Local Host

3000 so now it it is listening on Local Host

3000 you will see that this is actually the basic react project in v and uh we

can edit this page uh remove everything from here then

just single hello Vol

message so right here guys first of all we need

to write inside here we need to declare some State variables first one we will

be declaring for Access token we need to get the access token so access token set

access token we'll be using the UST State hook the initial value will be

null and then we'll using the use effect hook so this use effect hook will

automatically execute whenever your component is loading for the very

first time and here you need to pass a dependency which is empty array so this

will only execute this means that it will only execute only once so right here we need to make a

function and call this handle redirect so right here we just need to

make this function

so this will be a Asing

function so right

here we will be first of all be so here inside this function guys

first of all we will be exchanging

the authorization code that we will get with access token this function is

solely responsible for that but before that we just need to get this authorization code so how we can do that

it's very easy so we will simply have a condition

right in the jsx uh but before that we just need to

include the CDN for Tailwind

CSS so we have this CDN right here so just include this full

CDM go to the index.html and just after the title paste the

CDM so after you do this we can use these Tailwind classes container MX Auto

e-4 so right here you'll have a condition that if the access token is not present in that case we need to show

the login button to the user so we'll say Google o

text 3

Xcel so if you just refresh now there you will actually see this heading right

here because this condition evaluates to true the access token is not present it comes out to be false so that's why it

is executing it and now after this we will be

actually be showing the Google login button so for this we just need to create a simple

components

folder right inside this we will Define Google login button

jsx and also the profile component as

well it's a simple functional component

now we can simply include this Google login button so you can see it has vs code is

automatically imported it for me so you will see Google login button

is showing right here

so so now in the next section guys we will be actually be writing the Google login button component and then we will

proceed from here so now in this guys we will be writing this Google login button component that we defined so inside this

component we just need to declare some things first is the client

ID and also the redirect URI so redirect URI will be the same

homepage urri Local Host 3000 after you grant access it will be redirected to this homepage and here as

I already told you you need to go to Google Cloud

console we need to get this information from just have o or client

ID in order to get or client ID you just need to select we

application and in both these fields you just need to paste the homepage which is

Local Host 3,000

click on Create and it will actually give you both the client ID and the client secret so don't copy this my

information so it will be different for you paste it this is actually the client

ID and uh in the jsx we will simply have a

button we will give it a class to it BG blue

500 py2 PX4 rounded

and here we will be also be attaching a on click listener to it so when we click

it this uh login with

the we will be executing this function which is handle login so the label will be

simply saying login with Google just Define this function right

here

so if you just refresh you will have a simple login with Google button so right when we click this

button what should happen you will actually be constructing this authorization URL it will actually go to

this URL https //g google.com/ o/

O2 slash version 2

SL this is all constant version 2/ or and then we

need to here provide the client ID just make sure you write backtick

symbol right here so that we can directly embed variables so client ID is equal to and

here we embed the variables client ID and redirect

URI is equal

to and here we just need to say the Response Code response

type is equal to code you need to get the authorization code first of all so that's why response type is

code and the scope the scope here will be multiple scope so e email and then we

will simply say percentage sign 20 for the

spacing profile again percentage

20 sorry email profile and the last value will be prompt is equal to consent

so it will be a consent screen shown to the user so you can see it's a very long

URL where we provide the client ID redirect

URI then we have the response type which is authorization code we need and then

the scope information email percentage 20 which is for space

encoding and prompt variable is consent and here we just need to

redirect the user to this URL so we can directly do this by window.location do

HF is equal to Au URL so if you just see click this

button it is saying to us that the URL is not found let me

check let me copy

this okay that needs to be o not P sorry I made a mistake M this needs to be

o so just change it so you it is saying that missing

required parameter which is redirect

urri just check guys if you I made a mistake

here so this needs to be redirect underscore URI redirect underscore URI

so it is saying missing parameter client ID sorry this needs to be centore

ID so in coding guys sometimes you can make mistakes so just refresh again

again so you will see it will now show you this consent screen you need to select

your account Grant the permission and then it will navigate to this call back

URL and it will you'll see in the URL we get this authorization code this value

so that's exactly what we want this authorization code now do we can use

this for exess token you will Ex exchange this authorization code for Access

token now after getting this we can this function will get executed

automatically so how to exchange this with access token it's very

easy so right here in this function we will get this access sorry

authorization code from the params URL search params and window.location do

search and then we will search for this param pam.get code we will actually get this

authorization code and now the if the authorization code is available and then in that

case we say a client ID we need we need the client secret as well in this case

to get access token and then the redirect URI as

well which is simply HTTP Local Host

3000 and then inside this try catch

block so right here we will basically make a simple XO score it's a wait XO

store post so xos is available directly in the browser so don't need to install

it Google aps.com toen we'll make a simple post

request I think yeah you do need to include xos you need to import this from

xos and we haven't installed it so npmi XO so install this package

so it's a client HTTP client for making request inside your react Chas application just install this and start

your development server so you'll make this post request after

we here we need to provide the second argument as the information which is the client

ID is equal to the client ID client _ secret is equal to client

Secret code here we need to pass the code which will get authorization code and here the

grantor type here will be authorization

code and then here we need to lastly provide the redirect

urri to redirect UR

now we will actually get the access

token inside your our response do data field we'll basically

set the access token by using the hook function response. data dot this will be

a property contained access token so if you just refresh now what

you it will

happen if you check the

console it is saying to us that uh HTTP over to Google aps token was

from origin was blocked by course policy

okay sorry this needs to be https sorry this needs to be https I made a

mistake

Local Host

3,000 I think I made a typo mistake somewhere because this URL must exist

o or2 xos

dopost okay sorry we haven't replaced our client ID client secret that was of issue guys which was there we do need to

include the client ID and the client secret as well so that was the issue

simply copy you can't directly call it you need to

pass your information as well so client ID and the client secret this will be different for you so don't copy this

information

so again if I try to you will see the code will be there

right here and if you check in the console access token will be there in

the response so this is actually the information access token it expires in

3600 seconds which is essentially a 1 hour this is ID token this is the scoping information all that stuff beer

token this is this is now we are getting this access token and uh after you get

access token you can call any Google API with it so now after this we can

actually also make sure we redirect the user back to the homepage so window

history replace date right inside

this document. title and uh window.location

this will essentially redirect user back to the homepage so you will not see this authorization code in the

URL so if you do this uh you will be redirected back to the homepage if you see

so you will not see that authorization code still in the URL so this is really

useful this code so after you do this guys now we can

directly write the profile page as well so we can have a condition right here

like this if the access token is present in that case we just need to show

the profile page we will basically pass the access token

as an prop to this component so right in the profile

component we will be getting this access token

passed we will see that so now to show this profile information guys it's very

simple using this access token now we can get this profile information about

the user

so first of all we will be having a state

variable profile data set profile

data use State null so by default it will be null you'll be using the use

effect which will essentially run when this components

loads again we will be wrri writing a function which will actually fetch the

profile of the users so fetch profile

data so it will be asyn

function so just format the document right here so right this have a try catch

block so here we'll again be making uh a

simple xos call and this will be a get call and it will be making to this route

www. googleapis.com

O2 SL version 2/ uh user info and right here we now need

to provide our access token as a header so now in the second

argument in the header section we now need to provide our

authorization which will be a simple beer followed by your access

token which is passed to this component

as a prop you can see we have received this prop as an access token after you

do this we can set the profile info set

profile data to be the profile response coming do

data that's all so now we can display this profile information in the

jsx so right here we can have

uh profile

page and then here you'll be comparing if profile data exist in that case we

just need to show this information

first is the

name so inside Co brackets profile data do

name this is the email address if you just refresh now

uh if you now Grant permission and

uh so it is saying the profile is not defined so just make sure that you include this component right

here profile so now it is included

automatically you will see that the display name is showing email address is showing and uh in the similar way you

can also show your profile picture as well so

you can see that the profile picture is now also showing so in the next step guys you can even extend this

application to save this information in such a in some form of a session so that whenever you L lose information you can

don't need to again and again Grant access to this you can store this information in a database mongod DB

MySQL or you can store it in a session as well so that so in this basic way

guys you can interact with Google o and integrate this login so we haven't used any third party package we just do it

from scratch everything I showed you in this video If you still have doubt you want to want to purchase it the link is given

you can directly purchase it the full source code from my website thank you very much for watching this video and I

will be seeing you in the next one