Up next in 10
React.js Project to Build Google Identity Services OAuth2 JWT Login & Logout System in Browser
Dec 10, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/react-js-project-to-build-google-identity-services-oauth2-jwt-login-logout-system-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello friends today in this tutorial
0:02
I will be showing you that how basically
0:04
you can implement a O2 login and logout
0:08
system which is commonly known as
0:10
identity services login system guys. So
0:13
basically this is a next generation uh
0:15
Google login system that we will be
0:18
implementing inside our reactjs
0:19
application. So you will see that as you
0:22
load your application it will basically
0:24
prompt you uh with their already sign in
0:27
accounts here. You have seen these uh uh
0:29
login functionality in the modern
0:31
application of Google. So you can see
0:33
that I have already logged in with my
0:35
three accounts here. So Google is
0:38
automatically prompting me that uh you
0:41
can basically log in with these accounts
0:43
here. So with one tap you can see with
0:45
one tap I can individually click on that
0:48
and Google will automatically verify
0:50
this information and it will redirect me
0:52
to the profile page. So here guys we are
0:55
showing the sign out sign out button. We
0:57
have the display name and the profile
0:59
picture. As I click that sign out button
1:02
guys, you will see I will be prompted
1:04
back to the login page. So I am
1:06
successfully log out. So once again I
1:08
need to click this automatically the
1:10
list of accounts will be shown to me. So
1:12
I can select my account and you can see
1:14
that and guys uh inside this you will
1:17
see basically JWT token is returned to
1:20
you. So once I let let me sign in once
1:23
again. So if you see guys basically
1:25
whenever you select the account here
1:28
this JWT token this is JSON web token is
1:31
returned to you in the console JSON web
1:33
token if you don't know guys JSON web
1:35
token contains a lot of information that
1:38
Google will send you and this
1:40
information that you see is we are
1:43
basically decoding the JSON web token
1:45
with a dependency called as JWT decode.
1:48
If you go to npmjs.com, we are basically
1:50
using a package in order to decode this
1:54
JSON web token. So this package is
1:56
called as JWT decode. So we are
1:59
basically using this package guys which
2:01
automatically extracts all the
2:03
information which Google returns to us
2:05
in the form of this JWT token. So we are
2:08
basically displaying this information
2:10
which is a display name and the profile
2:12
picture. So we will be basically be
2:15
implementing this functionality guys.
2:16
this Google log login and logout system
2:19
inside of a ReactJS application. This is
2:21
commonly known as identity uh services
2:24
guys. So if you just write identity
2:27
login
2:29
O2 so basically this is the uh Google O2
2:34
uh identity login system. So this is
2:36
basically you can see that
2:41
identity login system. So let's start
2:43
building this application guys.
2:44
Basically you will get this screen out
2:46
there. Automatically with one tap you
2:49
will be automatically Google will verify
2:51
your account. That's all. So now guys
2:53
what I will do is that I will stop my
2:55
application here. I will start a new
2:58
project here. So here I will basically
3:00
create a new directory. So let me close
3:03
this and start from scratch. So here
3:07
guys, I will have my directory and I
3:10
will go to my directory and uh I will
3:13
create a new project guys. So make
3:15
directory. Uh let me just create a a new
3:19
project here. And for this dependency
3:21
guys we uh project we will use wheat.
3:24
Vit basically if you don't know guys
3:26
it's a alternative to webpack. It
3:28
automatically loads up the development
3:32
process for uh developing your any sort
3:34
of application. So we will just use this
3:37
command npm create vit
3:41
the rate and then followed by your
3:42
project name. Let's suppose oath
3:44
project. So all the source code guys I
3:47
have given in the description of the
3:48
video. So if you want the full source
3:50
code you can go to the description of
3:52
this video to get all the source code.
3:54
So now guys you will see it will ask me
3:56
which project we are developing. So I
3:57
will select here React application and
3:59
then JavaScript and now I will go into
4:02
the directory guys O2 project and then I
4:05
will install all the dependencies which
4:08
are there.
4:10
I think we named it O2 project npmi. So
4:15
basically guys with the help of V it
4:18
automatically speeds up the process. If
4:20
you use the conventional command called
4:22
as npx create react app this is very
4:25
much slow but this v makes it very much
4:27
easy it will increase the develop you
4:29
can see how fast is it is in order to
4:32
develop a brand new react chase
4:34
application and now we can run this
4:36
application npm rundev this will start
4:39
my development server at localhost 5173
4:43
so now if I start my localhost 573 you
4:46
will see we just need to go to this
4:49
localhost
4:50
5173
4:52
this is the port number. You can see our
4:54
application has been started. So now the
4:57
very first thing guys we need to do is
4:58
that we need to go to our index html and
5:01
here you need to basically after the
5:03
title you need to add the script tag. So
5:06
this script tag guys this will be equal
5:08
to https
5:10
accounts.g google.com
5:13
accounts.google.com/gsi google.com/gsi
5:18
gsi/client
5:21
that's all and we will be async differ
5:25
you need to add these two attributes
5:27
guys which is async and defer this will
5:29
load this script automatically inside
5:32
your head tag so you need need to write
5:34
this line guys if you don't write this
5:36
this application will not work simply
5:39
write this and one other dependency guys
5:42
we need to install guys uh as I already
5:44
told you which is npmi jwt-ash
5:48
decode. This is basically used to decode
5:51
the JSON web token which the Google o2
5:54
will return to us. So we will need this
5:56
dependency. That's all. And now we will
5:58
need to go to app dot jsx file guys. So
6:01
here we will basically delete all that
6:03
stuff here. We don't need this. We will
6:05
also delete this. And uh right here guys
6:08
we will basically have a simple
6:13
state where we will be storing the user.
6:16
So we will simply say user set user.
6:21
So we will use the use state hook guys
6:23
which will automatically be imported
6:25
from react and this will be an empty
6:27
object. So use state hook we are using.
6:30
And right here guys we will use the use
6:32
effect hook. If you don't know about use
6:35
effect hook, it automatically executes
6:37
whenever your components loads for the
6:39
very first time. And inside the use
6:42
effect hook guys, basically uh as we
6:45
included the CDN inside our script tag,
6:48
you will see we included the CDN. Now we
6:51
have access to all the library that we
6:54
are doing this. So right here we will
6:56
write a simple line here which is
6:58
google.acounts
7:00
dot id do.initialize initialize.
7:04
So you need to write the same thing that
7:06
I'm writing right here guys. So this
7:08
expects an object which contains two
7:10
properties client ID and the scope. So
7:15
here sorry call back function sorry call
7:17
back function and here guys client ID
7:20
which you need to go to Google cloud
7:22
console guys. So you need to go to
7:24
Google cloud console guys and here you
7:26
need to create a brand new oath client
7:28
ID. Simply select here web application
7:31
and here inside authorize JavaScript
7:34
origin guys you need to basically paste
7:37
your uh URL. So wherever you are
7:39
developing this application. So we will
7:42
simply paste this URL. This is our local
7:44
host 5173. So we'll simply paste it
7:47
here. Simply paste it guys.
7:52
And one other uh local host we also need
7:55
to type here http localhost. That's all.
7:59
Two URLs you need to give inside your
8:01
authorized JavaScript origins guys. HTTP
8:04
localhost 5173 with the port number and
8:06
also HTTP localhost. And in the
8:09
authorized redirect URI guys, you will
8:11
simply paste the same URL which is HTTP
8:13
localhost 5173. Now click on create
8:17
guys. So now it will create your uh O2
8:20
client ID. So this will be specific for
8:23
your own project. Simply store it
8:25
somewhere else. Click on okay. And now
8:28
we can simply paste this client ID guys.
8:30
So simply paste it. And now the second
8:32
one will be the call back function guys.
8:34
So whenever this request is completed
8:37
this call back function will execute. We
8:39
can basically have handle call back
8:42
response.
8:44
And now we can basically uh make this
8:47
function which will be handle call back
8:50
function.
8:53
And here guys you will have the
8:55
response.
8:59
So we can simply console log out the
9:01
response guys. So right here guys uh we
9:05
have to have a basically a sign in
9:08
button. Now to basically show this sign
9:10
in button guys right here inside our uh
9:15
I think yeah after this outside this
9:19
inside the use of a hook here only we
9:22
will basically write a line
9:24
Google.acounts accounts dot id and
9:27
basically it contains a method guys
9:28
which is render button and in inside
9:31
this we will basically create a element
9:33
inside our DOM where uh inside this we
9:36
will basically create a div which will
9:39
have the id which is sign in div. So
9:42
here basically we have provided this
9:44
unique id to this guys div element. So
9:46
we will target this using document dot
9:49
getelement by id and we will provide the
9:51
id which is sign in
9:54
div like this.
9:56
So after this guys
9:59
this takes an object here. Put a comma
10:01
and this takes an object. This contains
10:04
two properties guys. First is a theme
10:06
property and theme we will give as
10:08
outline and the size of the button. So
10:11
size of the button I will give at large.
10:14
So this will be a large button. And
10:16
lastly that's all. So this basically
10:18
will show a button guys on the screen.
10:21
If you now uh reload your application
10:24
basically if you reload your application
10:26
now you will now see guys basically a
10:28
button will be shown to me automatically
10:31
it will detect me that already I'm sign
10:33
in with this email address. You will see
10:35
that automatically it has detected that
10:37
I have already signed in. So now
10:39
basically check out the console here. If
10:42
I click this button right here guys, a
10:44
pop-up window will appear which will
10:46
contain all the accounts for me. If I
10:48
select this account, you will basically
10:50
see this information will be returned to
10:52
me which is the client ID, client ID and
10:54
credential. So credential guys, this is
10:57
the JSON web token that I'm talking
10:59
about. So we need this uh if I just say
11:03
response credential.
11:06
This is basically the JSON web token
11:09
guys which we are talking about. If I
11:11
again uh click on that
11:15
select it and now you can see that guys
11:17
JSON web token is returned to us. So
11:20
JSON web token if you don't know about
11:21
JSON web token guy it's a very special
11:24
token used for authentication purposes.
11:27
If you just write JSON web token it has
11:29
its own website you can play around it.
11:32
It's a open industry standard method for
11:34
representing claims securely between two
11:36
parties. So it is used for authorization
11:39
and authentication. So basically it
11:42
contains two information payload.
11:43
Payload contains some data. Here you
11:45
will see that it contains a header
11:47
payload. We need the payload which will
11:49
automatically contain the profile
11:51
picture and the display name. Now to
11:53
decode this token guys we have installed
11:56
this dependency which is JWT decode. We
11:58
will simply use that dependency. So here
12:01
we will simply say let user object. We
12:04
will extract this user object and for
12:06
this we will use JWT
12:10
decode.
12:12
So for this guys we will basically
12:14
import this dependency right here at the
12:17
top which is JWT decode
12:22
and we can import this from JWTOD and
12:25
right here after this guys we will
12:26
simply use this function JWT decode. We
12:30
will simply pass this
12:31
response.credential credential. That's
12:34
all.
12:37
So after this guys, we will simply set
12:39
the user here and we will set it to the
12:42
user object. That's all.
12:45
And now if you see guys, basically we
12:48
will have the response. If I again
12:51
inspect element and basically if I see
12:54
now
12:55
click on this.
12:58
[snorts] So now guys if you see u
13:00
nothing is shown here because we have
13:03
already set this user here user object.
13:05
Now we can display something on the
13:07
screen. So now we will have a simple
13:10
curly brackets. We will write some JSX.
13:12
We will simply say if the user exist in
13:14
that case we need to display something
13:17
on the screen. So we can now display
13:22
we can display here
13:26
uh let's suppose uh in the H1 tag we can
13:30
display
13:32
username user dot name and we can
13:36
display the image image source
13:40
which is user dot picture that's all. So
13:43
we can close this image tag.
13:49
[snorts] So now guys this is we have
13:51
written a very simple JSX code right
13:53
here. We are comparing that if user
13:55
exist that this is the user variable. If
13:59
user exist in that case display the
14:01
username and the user profile picture.
14:03
If you now reload your application guys,
14:05
if you now press this button, click on
14:08
this button, you will now see basically
14:10
it will detect it will uh show me the
14:13
this is the name of the person which is
14:15
this one and the profile picture. You
14:17
can see that. Now we also need to show
14:20
basically guys the u log out button. For
14:23
showing the log out button guys we will
14:25
basically have a property here
14:29
where we will simply show the log out
14:31
button. So for doing this we will again
14:33
have a JSX expression here. Inside this
14:36
inside the JSX expression guys we will
14:38
use this method which is object.keys
14:42
object.keys and inside this we will
14:44
simply pass uh uh which is uh let me see
14:48
we need to pass here the user user
14:52
object if the length is equal to is not
14:54
equal to zero in that case.
14:57
So if the user object it if it contains
15:00
something then we already know that the
15:02
user has logged in. In that case guys we
15:05
can display the button
15:08
we can say button and sign out. That's
15:12
all. So now when we click this button
15:14
guys we will simply say handle logout.
15:17
So we need to make a function here which
15:20
will be responsible for logout purpose.
15:24
Right here we will simply write this
15:26
function. So now if you see guys
15:28
basically if you sign in so this sign
15:31
out button will also show here and now
15:34
we need to hide this button guys which
15:35
is sign in button. So whenever we logged
15:37
in so how what we can do is that here uh
15:40
whenever we do this process we can
15:43
simply write a simple JavaScript code
15:46
here which is document getelement by id.
15:48
So we have provided an id to this button
15:51
guys. You will see sign in div. We can
15:53
simply write here sign in div and there
15:56
is a hidden property here which is we
15:58
can make it to true. So now this button
16:00
will not be show if you see right here
16:05
click on that.
16:09
So now this button will not be show
16:10
which is sign in. So you can see exactly
16:12
sign out button is showing here. And now
16:15
to log out guys it's very simple when we
16:17
click this button I need to log out from
16:19
the system. So what we can do is that
16:21
inside our logout system we can simply
16:24
clear out the state we can simply call
16:27
the set user function pass an empty
16:29
object. After this we can uh uh just say
16:34
enable
16:36
sorry get element by id. We can pass
16:39
again this sign in div
16:43
hidden property we can make it true
16:45
false that's all. So now this will
16:47
unhide the sign in button. That's all.
16:53
So you can see that. Now click on sign
16:56
out. We have successfully logged uh log
16:59
out. So now if you reload this
17:02
application guys, I I need the auto
17:06
automatically Google should prompt me in
17:08
the right hand side. For doing that
17:10
guys, we need a simple one line of code
17:13
right here. Right here just after you
17:15
define these buttons here we can
17:17
basically write these lines here just
17:19
after this one line of code is there
17:22
which is google accounts do id.prompt
17:27
this is all that you need to write guys
17:29
google.accounts do id.prompt. So now
17:32
google will automatically prompt you
17:33
with you can see that in the right hand
17:36
side automatically whenever you load the
17:38
page google will automatically tell you
17:40
that these are the accounts which you
17:41
have previously logged in. You can one
17:43
tap you can automatically Google will
17:45
verify you and you can see that
17:47
automatically logged logged in. This is
17:50
the latest uh technology guys Google
17:52
authentication offers you basically it
17:55
is called as identity login services
17:57
with one tap Google login or o to google
18:01
and log out and login system which we
18:03
developed in reactjs application. All
18:06
the source code guys is given in the
18:07
description of this video. You can check
18:09
out and I will be seeing you in the next
18:11
tutorial.