Up next in 10
Build a React.js Google OAuth2 One Tap JWT Login Using @react-oauth Library in Browser Using JSX
Dec 10, 2025
Get the full source code of application here:
https://codingshiksha.com/react/build-a-react-js-google-oauth2-one-tap-jwt-login-using-react-oauth-library-in-browser-using-jsx/
Show More Show Less View Video Transcript
0:01
Uh hello guys, welcome to this video. So
0:03
in this video we will look at a ReactJS
0:06
example on how to implement one tap
0:09
authentication
0:11
of Google. So on your screen you can see
0:14
as soon as I refresh the application
0:16
there is on the right hand side corner
0:19
of the screen uh this automatic the
0:22
pop-up window will appear and with one
0:25
click you will be able to authenticate
0:27
yourself and uh you will see the account
0:31
screen is coming right here it is
0:32
displaying the email address. So the
0:35
currently logged in email address it
0:36
will automatically detect and uh with
0:40
one tap on mobile devices or desktop
0:42
devices you just need to click and it
0:45
will fetch the information and then it
0:47
will redirect you to the profile page
0:49
show this username and the email
0:52
address. So there is a package inside
0:54
reacts which lets you do this
0:56
automatically. You can integrate this.
0:58
So the package name is react o. So if
1:02
you try to go to npmjs.com
1:05
and just search for this package right
1:07
here which is add the rate react-th
1:17
/ google. So it's specifically made for
1:20
reacts applications and
1:24
here you can tackle the google
1:26
authentication. So you this is actually
1:28
the module here and the command is very
1:32
simple npmi. So this is actually the
1:34
command I've already installed it and
1:36
it's almost got 356,000 weekly download.
1:40
So it's a very popular package and uh I
1:43
have given all the source code in the
1:45
description of this video step by step.
1:46
So if you want to follow along with this
1:48
video the link is given in the
1:50
description. So now to get started uh
1:53
first of all you need to go to your
1:58
main.jsx file and I will show you
2:01
step-by-step process.
2:04
Let me just delete everything and start
2:06
from scratch.
2:13
So first of all there will be this file
2:15
here which will be main.jsx.
2:18
So this is this this is a file here. You
2:20
need to go to this file and import the
2:23
package by using the import statement.
2:25
So import Google
2:29
O provider and it will be coming from
2:32
this package which is react o/ Google 99
2:36
bytes. So it's a very minimalistic
2:38
package. The size is very small. And
2:41
then here we need to
2:44
paste the client ID. So this client ID
2:46
will be coming from Google Cloud
2:48
Console. So you need to go to the cloud
2:50
console account right here and uh need
2:53
to create the Google client ID. So from
2:57
this create credentials. So select the
2:59
second option right here and select O
3:02
client ID and the application type will
3:05
be web application and here in the
3:07
authorized JavaScript origins you need
3:09
to paste the
3:12
homepage of the application. So I am
3:14
developing on HTTP localhost 5173. So
3:18
whatever is your homepage URL you will
3:20
paste it and also paste for the HTTP
3:24
local host as well
3:32
and inside authorize redirect URI. So
3:35
whenever you are authenticated
3:38
here also need to paste the same link
3:41
http localhost 5173.
3:44
So here you need to replace your own
3:48
path here. Whatever is the URL that
3:50
you're building and simply click on
3:52
create. As you click on create, it will
3:55
give you this client ID and simply copy
3:58
to clipboard and simply paste it inside
4:02
this variable. So after you paste it,
4:04
now we need to surround this
4:07
application. So after this we will
4:11
import this Google O provider.
4:14
And it actually takes the client ID. So
4:17
we simply need to pass this client ID
4:22
and we just need to surround this inside
4:25
this Google
4:27
O provider
4:30
like this.
4:45
So you need to surround this.
4:48
So this
4:50
is the code that you need to write in
4:52
this file. So we first of all import
4:55
this module. Then we get the client ID.
4:58
Then we surround this using this parent
5:01
tag. So whatever is your app, you need
5:02
to surround this. So you can now close
5:04
this file. The configuration is
5:05
complete. Now just go to a app do. JSX
5:09
make a simple functional component and
5:11
then you need to again require the
5:13
package using again the import
5:15
statement. So we import this package
5:19
Google
5:20
oath provider
5:23
and uh it will be coming automatically
5:25
from this package here react oorth
5:27
Google so it's again 99 bytes so very
5:30
minimalistic package here and uh from
5:33
this package only we also have the hook
5:35
which is available so which is use
5:38
Google
5:40
onetap login so automatically this will
5:43
be imported as well so these two
5:45
packages we need to import from this
5:47
dependency and uh I forgot to tell you
5:50
one other dependency you need for this
5:53
for this application which is JWT code.
5:56
So simply search on npmjs JWT decode. So
6:01
this package is used for uh
6:04
whatever is the JSON web token will
6:06
come. You need to decode that token. So
6:09
for that we need this package. So again
6:11
install this npm JWT decode
6:16
and then you again need to require it.
6:19
So just add this import statement as
6:21
well. import JWT
6:24
decode
6:27
and it will be coming from this JWT
6:30
decode. So
6:33
just add this import line right here.
6:35
And now in this app component again we
6:39
need to paste our client ID. So you can
6:42
copy this from this file here.
6:47
So simply copy your client ID and paste
6:51
it right here.
6:55
So after this we again need to create
6:58
some state variables for storing the
7:00
profile information. Once you are
7:02
authenticated, we will be showing the
7:03
profile information. So user profile set
7:06
user profile
7:08
and for this we'll be using the use
7:10
state hook of react. The initial value
7:12
will be null. So here we'll be storing
7:15
the user profile information of of the
7:17
user.
7:20
And now
7:22
we will use this hook which is use
7:25
Google onetap login. And
7:30
so we are using this hook. We have
7:31
already imported this at the top here.
7:34
So this hook actually contains an on
7:37
success function. So when the
7:40
authentication is completed, this
7:42
function will execute holding the
7:45
information of the user. So it will be
7:48
contained inside this variable. So we
7:49
can simply console log this information
7:51
inside the console. So we can simply say
7:55
login successful
7:57
and then we can show the information
7:59
that the client information which is
8:02
contained inside this credential
8:05
response.
8:09
So just refresh your application. Just
8:12
go to localhost 5173
8:14
and just check your console.
8:23
Uh I think we forgot to add this code
8:26
here which is
8:40
there is a property here you need to
8:41
pass here which is use
8:44
ft cm for prompt. It's a boolean
8:47
parameter. you need to pass it to true.
8:50
So this will actually enable that model
8:52
window to appear on the right hand side
8:56
and also in the JSX you need to embed
8:58
this component as well. So
9:01
we are using this Google oath provider
9:06
and here again you need to pass your
9:08
client ID. So
9:12
so whatever is your client ID you pass
9:14
it. So it takes it as a parameter right
9:17
here.
9:22
So if you refresh now you will see on
9:24
the right hand side automatically your
9:25
Google account will pop in and with one
9:28
tap you will be able to authenticate
9:30
yourself. So as I simply click continue
9:33
as coding. So as I click that button you
9:36
will see the authentication will be done
9:38
in the background and if I check the
9:42
console you will see this login
9:44
successful and we got an object holding
9:47
this credential. Now this is the JSON
9:50
web token that I talked about and uh now
9:55
we need to decode this JSON web token to
9:58
get the profile information of the user.
10:00
So that's why we installed that second
10:02
dependency which is JWT decode. So now
10:06
we'll be using that. So for decoding
10:09
that token we will after we console log
10:12
this we use we need to store this
10:15
information. So set user profile
10:19
but before that we need to decode that
10:21
token. So for this we will be using
10:24
that uh we will make a variable decode
10:28
it and then we will use this function
10:31
JWT decode and here we'll be passing the
10:35
actual token which is contained inside
10:37
credential response dot credential
10:42
and then we can again add a console lock
10:45
statement that the token has been
10:47
decoded
10:50
and the information will be this one. So
10:54
now we can store this information using
10:55
the hook function set user profile and
10:58
we will store this user profile
11:00
information which will contain three
11:02
properties. The name of the user
11:07
which is contained inside decoded name
11:09
and then the email of the user
11:13
and then the profile picture as well. So
11:17
all these three things will be there and
11:18
we'll be storing it inside this object
11:21
and using set user profile.
11:25
Uh that's all that we need to do. And
11:27
now we come to the JSX where we need to
11:29
display this information. So we can
11:32
simply
11:34
inside this we can add a div tag and I
11:38
can just add some custom CSS. Just align
11:42
this information in the center position
11:44
and give it a margin
11:47
margin top of 50 pixel and inside this
11:52
we display the information. So
11:56
give it an heading here Google one tab
11:58
login example and after that we display
12:01
the information. So we simply compare
12:04
that if the user profile information is
12:06
available then inside this turnary
12:08
operator
12:13
we show the information and if the user
12:16
profile information is not available in
12:19
that case we will simply show the
12:23
message to the user that the browser
12:26
doesn't support
12:28
onetap login.
12:31
So now inside this here we can display
12:33
the user information.
12:40
So for showing the username we simply
12:43
say welcome and then this user profile
12:46
dot name
12:48
and then we can show the email address
12:51
like this user profile do email. So if
12:55
you refresh your browser you will see as
12:58
you click the button one tap
13:01
authentication
13:04
and now you will see your username
13:05
appearing and then the email address. So
13:08
in this easy way guys I showed you step
13:10
by step how to implement this onetap
13:12
authentication in ReactJS
13:14
and uh with this nice little plug-in you
13:18
can use it and if you need the full
13:20
source code with step-by-step
13:22
instruction you can refer my blog post
13:24
the link is given in the description of
13:26
this video
13:28
and where all the source code is also
13:30
given. So thank you very much for
13:32
watching this video and do visit my
13:35
website as well freemediatools.com
13:37
uh which contains thousands of tools
13:39
regarding audio, video and image and I
13:43
will be seeing you guys in the next
13:44
video.