Up next in 10
Build a React.js Google OAuth2 One Tap JWT Login Using @react-oauth Library in Browser Using JSX
Jan 21, 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/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
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:10
authentication of Google so on your
0:13
screen you can see as soon as I refresh
0:15
the application there is on the right
0:18
hand side corner of the screen this
0:21
automatic the pop-up window will appear
0:23
and with one click you will be able to
0:26
authenticate yourself and uh you will
0:30
see the account screen is coming right
0:32
here it is displaying the email address
0:34
so the currently logged in email address
0:36
it will automatically detect and with
0:39
one t 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
and show this username and the email
0:52
address so there is a package inside
0:54
react Chas which lets you do this
0:56
automatically you can integrate this so
0:59
the package name is react o so if you
1:02
try to go to npmjs.com and just search
1:06
for this package right here which is at
1:09
theate
1:12
react Das
1:16
o/g Google so it's specifically made for
1:20
react CH applications
1:23
and here you can tackle the Google
1:26
authentication so you this is actually
1:28
the module here
1:30
and the command is very simple npmi so
1:33
this is actually the command I've
1:35
already installed it and it's almost got
1:38
356,000 weekly download so it's a very
1:40
popular package and uh I have given all
1:44
the source code in the description of
1:45
this video step by step so if you want
1:47
to follow along with this video the link
1:49
is given in the
1:51
description so now to get started the
1:53
first of all you need to go to
1:57
your main. jsx file
2:00
and I will show you step by step
2:03
process let me just delete everything
2:06
and start from
2:11
scratch so first of all there will be
2:14
this file here which will be main. jsx
2:18
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 so
2:26
import
2:28
Google or o provider and it will be
2:31
coming from this package which is react
2:33
o/g Google 99 bytes so it's very
2:38
minimalistic package the size is very
2:40
small and then here we need
2:43
to paste the client ID so this client ID
2:46
will be coming from Google Cloud console
2:48
so you need to go to the cloud console
2:51
account right here and need to create
2:54
the Google client ID so from this create
2:57
credentials so select the second option
2:59
option right here and select o client ID
3:03
and the application type will be web
3:06
application and here in the authorized
3:08
JavaScript Origins you need to paste the
3:11
homepage of the application so I am
3:14
developing on HTTP Local Host 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
3:37
authenticated here also need to paste
3:39
the same link HTTP Local Host
3:43
5173 so here you need to replace your
3:47
own 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
3:59
and simply paste it inside this variable
4:03
so after you paste it now we need to
4:06
surround this application so after this
4:10
we will import this Google o
4:13
provider and it actually takes the
4:16
client ID so we simply need to pass this
4:19
client
4:21
ID and we just need to surround this
4:24
inside this
4:26
Google oo provider
4:30
like
4:44
this so you need to surround
4:47
this so
4:49
this is the code that you need to write
4:52
in 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
5:00
parent tag so whatever is your app you
5:02
need to surround this so you can now
5:03
close this file the configuration is
5:05
complete now just go to a app.jsx make a
5:09
simple functional component and then you
5:12
need to again require the package using
5:14
again the import statement so we import
5:17
this package Google o
5:22
provider and uh it will be coming
5:24
automatically from this package here
5:26
react or Google so it's again 99 bytes
5:29
so very minimalistic package here and uh
5:33
from this package only we also have the
5:35
hook which is available so which is use
5:39
Google One Tap login so automatically
5:43
this will be imported as well so these
5:45
two 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 dcode
5:56
so simply search on npmjs JW TD codee so
6:01
this package is used for
6:03
uh 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 npmi JWT
6:15
decode and then you again need to
6:17
require it so just add this import
6:20
statement as well import
6:22
JWT
6:26
decode and it will be coming from this
6:29
JWT D code
6:32
so 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
6:46
here so simply copy your client ID and
6:50
paste it right
6:54
here so after this we again need to
6:57
create some State variables for storing
7:00
the profile information once you are
7:01
authenticated we will be showing the
7:03
profile information so user profile set
7:06
user
7:07
profile and for this we'll be using the
7:09
US 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:19
user and
7:21
now we will use this hook which is use
7:25
Google One Tap login and
7:30
so we are using this hook we already
7:32
imported this at the top here so this
7:34
hook actually contains an on success
7:38
function so when the authentication is
7:41
completed this function will execute
7:43
holding the information of the user so
7:47
it will be contained inside this
7:48
variable so we can simply console log
7:51
this information inside the console so
7:53
we can simply say login
7:56
successful and then we can show the
7:58
information that that the client
8:01
information which is contained inside
8:03
this credential
8:08
response so just refresh your
8:10
application just go to Local Host
8:13
5173 and just check your
8:22
console uh I think we forgot to add this
8:26
code here which is
8:39
yeah there is a property here you need
8:41
to pass here which is
8:43
use
8:44
ftcm for prompt it's a Boolean parameter
8:48
you need to pass it to true so this will
8:50
actually enable that model window to
8:53
appear on the right hand side and also
8:56
in the jsx you need to embed this
8:58
component as well
9:00
so we are using this Google o
9:05
provider and here again you need to pass
9:08
your client ID
9:11
so so whatever is your client ID you
9:13
pass it so it takes it has a parameter
9:17
right
9:21
here so if you refresh now you will see
9:23
on the right hand side automatically
9:25
your Google account will pop in and with
9:27
one tap you will able to authenticate
9:30
yourself so as I simply click continue
9:33
as coding seure so as I click that
9:35
button you will see the authentication
9:37
will be done in the background and if I
9:41
check the console you will see this
9:43
login successful and we got an object
9:47
holding this credential now this is the
9:49
Json web token that I talked about and
9:54
now we need to decode this Json web
9:57
token to get the profile information of
9:59
the user so that's why we install that
10:02
second dependency which is JWT decode so
10:06
now 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
10:18
profile but before that we need to
10:20
decode that token so for this we will be
10:24
using that uh we will make a variable
10:28
decode it and then then we will use this
10:30
function JWT dcode and here we'll be
10:34
passing the actual token which is
10:36
contained inside credential response.
10:41
credential and then we can again add a
10:44
console log statement that the token has
10:47
been
10:49
decoded and the information will be this
10:53
one so now we can store this information
10:55
using the hook function set user profile
10:58
and we will store this user profile
11:00
information which will contain three
11:02
properties the name of the
11:06
user which is contained inside decoded
11:09
name and then the email of the
11:12
user and then the profile picture as
11:15
well
11:16
so all these three things will be there
11:18
and we'll be storing it inside this
11:20
object and using set user
11:24
profile uh that's all that we need to do
11:27
and now we come to the jsx where we need
11:29
to display this information so we can
11:33
simply inside this we can add a div tag
11:37
and I can just add some custom CSS just
11:41
align this information in the center
11:43
position and give it a
11:46
margin margin top of 50 pixel and inside
11:51
this we display the information
11:55
so give it an heading here Google One
11:58
Tap login exam example and after that we
12:00
display the information so we simply
12:03
compare that if the user profile
12:05
information is available then inside
12:07
this Kary
12:12
operator we show the
12:14
information and if the user profile
12:17
information is not available in that
12:20
case it will simply show the message to
12:23
the user that the browser doesn't
12:27
support one t
12:30
login so now inside this here we can
12:33
display the user
12:39
information so for showing the username
12:42
we simply say welcome and then this user
12:45
profile do
12:47
name and then we can show the email
12:50
address like this user
12:53
profile. email so if you refresh your
12:56
browser you will see as you click the
12:59
button one t
13:03
authentication and now you will see your
13:05
username appearing and then the email
13:06
address so in this easy way guys I
13:09
showed you step by step how to implement
13:11
this one tap authentication in react
13:13
CHS and uh with this nice little plug-in
13:18
you 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
13:27
video and we are all all the source code
13:29
is also given so thank you very much for
13:32
watching this video and do visit my
13:34
website as well free mediat tools.com uh
13:37
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
#Programming
#Web Services