Up next in 10
Build a Vue.js One Tap OAuth2 Google Login Using vue3-google-login & Identity Services in Browser
Dec 10, 2025
Get the full source code of application here:
https://codingshiksha.com/vue/build-a-vue-js-one-tap-oauth2-google-login-using-vue3-google-login-identity-services-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello guys welcome to this video. So
0:02
in this video I will show you how to
0:04
implement one tap ooth to Google login
0:08
system inside Vue.js3.
0:10
So you can see the demo on your screen.
0:12
We have a sign in with Google button. So
0:15
one tap Google authentication is this.
0:17
As I click this button a pop-up window
0:20
will open. Here you need to select your
0:21
Google account and then grant the
0:23
permission. So once you do this your
0:26
email and you can see this profile
0:29
picture will also show
0:32
and after you sub subsequent login will
0:34
be one tab. So as soon as you click it
0:36
it's using Google identity services.
0:40
So
0:43
we are decoding the credentials using
0:47
the JSON web token.
0:51
So now to get uh started using this I've
0:54
given all the source code in the
0:56
description of this video. So the module
0:59
is uh view3 Google login. So if you go
1:02
to npmjs.com
1:04
uh just need to search for this module
1:06
view3
1:09
Google login. So this is actually the
1:12
component here. You simply search for
1:14
this and I've already installed it.
1:18
[snorts] So this is actually the command
1:20
here. It's almost got 17,000 weekly
1:24
downloads. So they have given the
1:28
documentation on this website. So
1:31
this is you can read more about the
1:33
docs. I will show you in this video how
1:36
to get started. So first of all you need
1:38
to register this module. So for doing
1:40
this you need to
1:45
let me just step by step tell you and
1:47
all the source code I have given in the
1:48
description of this video. So you can
1:50
check out the source code by going to
1:51
the description link. So first of all
1:54
you need to go to your main.ts file. So
1:56
this TypeScript file you need to
1:58
register your
2:00
modules. So for registering it we need
2:02
to first of all import this module. So
2:04
we say import view3
2:08
Google login and it will be coming from
2:10
this package view3
2:13
Google login.
2:15
So we simply import this package and
2:17
write this is 5 04 kilobyt and then we
2:22
use this register it component and pass
2:26
object which actually holds your client
2:29
ID. So this client ID will be coming
2:32
from Google cloud console. So you need
2:34
to create account here
2:36
and uh just go to here create
2:38
credentials o or client ID
2:43
and select from application type is web
2:45
application and in the authorize
2:48
JavaScript origins you need to add the
2:50
homepage of your application. So HTTP
2:54
localhost
2:58
5173.
3:02
So this is actually your homepage and
3:05
also in the redirect URI I forgot to
3:07
mention. So here in authorized
3:09
JavaScript origins you add your homepage
3:12
and then in the authorize redirect URI
3:15
you also add the same URL
3:18
your homepage
3:22
and there here also you do need to add
3:24
the local host version as well.
3:28
So the local host plus the port number
3:30
and then HTTP local host if you're
3:32
developing it on local host and then
3:34
[snorts] in the authorized redirect URI
3:36
same URL plus the port number. So click
3:39
on save and then it will create your
3:42
client ID. So simply copy this and uh
3:46
paste the client ID.
3:50
So that's all that we need to do and now
3:52
just move to app dot view.
3:55
And one more package we will need here
3:57
for this for it will return JSON web
4:00
token for decoding that we need this
4:03
package JWT decode. So just install this
4:07
package as well. Installing this it's
4:09
almost got 7 million weekly downloads.
4:12
So right inside your app doview file. So
4:16
we'll be having this template
4:21
and also we will be writing the
4:24
TypeScript code in the script tag.
4:27
So we'll rendering this Google login
4:29
button by using this component and we'll
4:32
bind this
4:34
call back URL. So we need to configure
4:37
this function uh variable call back URL
4:40
inside the script.
4:42
So
4:43
we go to the TypeScript code. Here we
4:46
require the necessary packages
4:52
and then we import the JWT
4:57
decode which will be coming from
5:01
the JWT decode. So and
5:05
after this we declare
5:08
the user profile variable. By default,
5:11
it will be null. So here we'll be
5:13
storing the profile information of the
5:15
user once they successfully log in with
5:19
their Google account.
5:23
And now we just need to display
5:27
this call back URL that we are passing
5:29
to this Google login component.
5:33
[snorts] So right here
5:40
we define this function. It's actually a
5:43
function not a variable. So it's a call
5:45
back function. So once you are
5:46
authenticated it this call back function
5:49
will execute. So here it will be holding
5:51
the response here.
5:53
The response coming I can just console
5:55
log it just to check.
6:01
So if you refresh your application
6:07
so you will see this uh automatically it
6:10
will detect your Google account and uh
6:12
the profile picture and account name
6:14
will be showing. So once you just click
6:17
this with one tap
6:22
the details will be returned here in the
6:25
console log
6:28
response here.
6:39
I think you need to paste this
6:40
JavaScript code before this. So the
6:44
template will come.
6:50
So I think that is the problem here.
6:53
That's why it was not. Oh, sorry. We
6:55
haven't added this attribute setup. So
6:57
that was a problem. So just add this
6:59
setup parameter to the script.
7:03
So now as I click the button
7:15
so you'll see this object will be
7:16
returned to us which is the client ID
7:19
and this credential. So this is your JWT
7:23
JSON web token and we need to decode
7:25
this JSON web token with this module. So
7:28
what we do inside this callback
7:30
function. So we simply check that if the
7:32
response
7:35
contains this credential property.
7:39
If it is containing that then we need to
7:41
decode that.
7:44
So we use this module which is JWT
7:46
decode.
7:49
It contains a function which is decode
7:52
and we decode this credential
7:57
and then it will return the profile
7:59
information. So we can simply set the
8:01
profile information like this user
8:04
profile value and this is your object
8:06
the name
8:10
which will be decoded.name and then the
8:13
email will also come.
8:17
So we can I can just console log this
8:22
and lastly your profile picture as well.
8:24
So,
8:32
[snorts]
8:32
so, so if I click this button right
8:34
here.
8:45
So, it is saying that JWT decode is not
8:48
a function. uh
8:51
JWT
8:53
decode sorry this doesn't you need to
8:56
directly pass this
8:59
we're directly using it so
9:04
so just make that change again run this
9:07
so
9:10
so now you will see the user profile
9:13
information which will be returned to us
9:14
the name this is your
9:18
username This is the email address. This
9:20
is your picture.
9:23
And in this way,
9:26
now we can display this information
9:29
inside the template. So we will simply
9:31
add a directive which is if the profile
9:35
information is available to us. So B if
9:37
directive if the user profile object is
9:40
available then we need to display the
9:42
profile information which will simply
9:44
say welcome
9:46
user profile dot the name. So it will
9:49
display the username of the person and
9:51
then we will display the email address
9:53
which
9:55
like this. So inside double curly
9:58
brackets so we say user profile dot
10:00
email and then we display the profile
10:03
information
10:13
you can just make the picture width to
10:16
be 100%.
10:19
So now if you refresh you will see
10:22
automatically it will detect you are
10:23
currently logged in and it will show the
10:27
profile information. You'll see the the
10:31
username plus the email address. This
10:33
picture is uh belonging to a different
10:36
domain that's why it is not displaying
10:38
due to cross origin resource sharing
10:42
error but you can even display the
10:45
picture as well. So in this way you can
10:46
implement the Google authentication with
10:48
one tap and in behind the scenes it is
10:51
using this Google identity services
10:54
API which is a new way of authentication
10:57
in Google such that in mobile devices
11:00
you just need to press it key just a tap
11:03
and it will automatically log you in. So
11:06
this is actually using that behind the
11:08
scenes. So if you need the full example
11:11
code of this application the link is
11:13
given in the description. So you can get
11:15
go to the website and also check out my
11:18
website as well freemediatools.com
11:21
uh which contains thousands of tools
11:23
regarding audio, video and image and I
11:26
will be seeing you guys in the next
11:28
video.