Up next in 10
Build Google OAuth2 Login & Logout System in HTML CSS & JavaScript Using Access Token
Dec 8, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/javascript-oauth2-google-login-logout-example-using-access-token-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello friends, today in this tutorial
0:02
I will be talking about the O2
0:05
Google login using JavaScript. This will
0:08
be a very simple application. So you can
0:10
see this is the login button out there.
0:13
Sign in with Google and as soon as I
0:16
click this button guys what will happen
0:17
here? Basically it will ask for my
0:21
permissions. You need to select your
0:22
account here. Basically I'm just you
0:25
just need to go to advanced option here
0:28
and basically go to our project and
0:31
allow the permission here. So basically
0:32
the first permission we are getting is
0:34
the personal email profile
0:37
email profile picture. So it is
0:40
automatically selected and the second
0:41
permission is view your YouTube account.
0:43
So this is the second permission and
0:45
click on continue and as soon as you
0:48
click it you will see it will welcome to
0:50
profile page. It will redirect you to
0:52
the your full name is coding section.
0:54
This is my account here and this is a
0:56
profile picture. So basically if you
0:57
open this image it is hosted here. You
0:59
can see that. So you can get accordingly
1:02
to to your own account it will tell you
1:05
your full name and show you this profile
1:08
picture and also we will have a simple
1:10
log out button guys also. So as soon as
1:12
you click the log out button you will be
1:15
redirected to the homepage. So let let
1:18
me select log out here.
1:21
So once again you are redirected to the
1:23
homepage and now the nice thing about
1:26
that basically as I click the log out
1:28
button all the access toker is revoked.
1:31
Now we once again need to grant the
1:32
permission once again. So if you click
1:35
the sign in button again you need to go
1:36
to the process once again go to the
1:38
advanced option. So this is actual log
1:41
out. You need to grant the permission
1:42
once again like this.
1:45
So let's suppose you close close out
1:46
this window here without clicking the
1:48
log out button.
1:50
And now if you open this window once
1:52
again what will happen? It will give you
1:55
this once again. You can see that. And
1:58
uh
2:00
let me press log out button here. And
2:02
now if you try to access that
2:06
you can see your full name is undefined
2:08
because we have revoked the access
2:10
token. No the access token is no longer
2:14
available inside the browser. So we
2:16
can't access the information. So once
2:18
you press the log on button, you need to
2:20
explicitly go to the homepage. You need
2:22
to grant the permission. Just click this
2:24
button. You need to grant the permission
2:27
and basically you need to select your
2:29
account. You need to basically grant the
2:31
permission here. Click the button scope.
2:34
These are called as scopes inside O2.
2:37
And if I just inspect element guys, you
2:40
will see this is my access token. This
2:41
is the object which is returning here
2:43
which is local name, picture, all that
2:45
stuff. So as you all know inside O2 flow
2:50
we have access token we have refresh
2:52
token. So all these things are very much
2:54
important when you are studying this. So
2:56
we will be looking at a very simple
2:57
example on how to get the access token
3:00
from the authorization code. So all this
3:03
we will be coming covering it in pure
3:06
JavaScript. We will not be using any
3:08
sort of uh third party library of Google
3:11
and will be complete in JavaScript. And
3:14
we are using some O2 playground guys to
3:17
getting all the scopes of all the APIs.
3:19
You can see that it's very much useful
3:21
developers.google.com/ot
3:24
playground. So it's a great tool
3:26
provided by Google to debug any sort of
3:29
API code. So for this tutorial guys, if
3:32
you want the full source code, I have
3:33
given the source code in the description
3:35
of this video. So this is my
3:36
step-by-step blog post where I have
3:38
written the source code in detail. So if
3:41
you want the full source code and also
3:43
you need to read the blog post also
3:45
alongside watching this video. I will
3:47
highly recommend that you go to the
3:49
description of this video to get all the
3:51
source code. Now let's get started guys
3:54
by building this application. So what I
3:56
will do is that I will delete all this
3:58
code.
3:59
You can see a series of three files are
4:02
needed for this application. Let me
4:03
delete all this and start from scratch.
4:07
So now guys the very first file we will
4:09
make is the index html file here.
4:12
Basically this will actually contain our
4:14
sign in with Google button. So we will
4:17
write here o2
4:19
sign in
4:21
Google sign in like this
4:24
with log out.
4:27
So basically guys here we will be having
4:29
uh a simple heading here or to
4:34
Google
4:38
sign in
4:40
and after that guys we will have a
4:42
simple button here. So we will simply
4:45
say sign in with Google
4:48
and basically we can attach a on click
4:50
event handler. So whenever you click
4:52
this button we will execute this sign in
4:55
method here like this and also we need
4:58
to include our JavaScript file guys. So
5:00
script source script js that's it. So
5:05
now we need to make this JavaScript file
5:07
guys which is script.js in the root
5:09
directory. So just make it.
5:13
So we need to write this function which
5:15
is sign in.
5:18
So here guys we need to get the
5:20
information from the Google developer
5:22
console. So whenever you are building
5:24
this application first of all we will
5:27
basically write the endpoint on which we
5:29
will be invoking this
5:32
the user to. So basically this is called
5:35
as o endpoint. So this is the actual
5:39
endpoint guys. Basically this is equal
5:41
to https
5:46
accounts dot google.com/o/2
5:52
and uh / version 2
5:57
/ so here we just need to make a simple
6:00
fetch API get request and here we need
6:03
to pass our client ID redirect URI
6:06
scopes as well. So this is the actual O2
6:08
endpoint and for this
6:12
you need to create a form here guys
6:15
automatic element we will submit this
6:17
form automatically. So document create
6:20
element we will use this method and
6:22
basically we can create a dynamic form
6:24
here and we need to basically set the
6:27
attribute of this form set attribute and
6:30
basically the method of this form will
6:33
be get.
6:36
So as you can see there are two ways of
6:38
submitting the form either post or get.
6:40
So we are making a get request here and
6:44
basically now the second attribute we
6:46
need to set is the action attribute. As
6:48
you all know inside form we have the
6:50
action attribute as well. So here we
6:52
just need to submit to o2 endpoint that
6:55
we have configured right here. You can
6:57
see that we are setting the action
6:59
attribute to this nice and after this
7:02
guys we need to add the parameters to
7:04
pass to O2 endpoint. So now we need to
7:06
add the parameters. So for that we will
7:09
be creating this object params and this
7:12
will be an object guys and it will
7:14
contain this client id client id and
7:17
here you need to paste your client ID
7:19
which you will get from the Google
7:21
developer console and then you redirect
7:24
URI. Redirect URI is nothing but uh
7:27
whenever the signin process is complete
7:29
whenever you have granted the
7:31
information scopes. So which re redirect
7:33
URI Google must point to. So we need to
7:36
provide this redirect URI. And then the
7:39
third option will be response type guys.
7:41
So this can be either three values guys.
7:44
Either you can uh just access the
7:47
authorization code. You can uh just uh
7:52
send the request for access token. So
7:54
this value can be token or code. But in
7:57
this case we require the access token.
7:59
So here we will provide the token. And
8:01
then guys we need to provide the scope
8:03
as well. So scope is nothing but
8:06
which scopes you want to get
8:09
information. So there are various scopes
8:11
out there for different Google APIs. So
8:14
first of all we will need the simple
8:16
scope for the user information user
8:19
profile profile picture and email. So
8:22
this come will be coming from httpsg
8:24
googleappis.com/
8:26
userinfo-profile
8:30
and also if you want to provide multiple
8:32
scopes out there you can put a space
8:34
here and then you can go to o2
8:36
playground and it has specific scopes
8:40
for various APIs YouTube data API
8:42
version 3. So let's suppose you also
8:44
only need the readonly scope of this
8:46
API. So here you will copy this scope
8:50
and simply paste it. Simply paste it. So
8:53
we have provided two scopes. You can
8:55
provide as many scopes as you want
8:58
depending upon your application.
9:00
And then guys you need to provide a
9:02
property which is include granted
9:05
scopes. This property needs to be true.
9:09
Just provide true a boolean parameter.
9:11
So inside single parameter single
9:13
quotes.
9:15
And the last but not least we have the
9:18
state. This is not mandatory but uh you
9:21
can pass this value like pass through
9:22
value any value you can pass it
9:25
accordingly. So this is your object. So
9:28
now we need to get the client ID and the
9:29
redirect URI from the Google developer
9:31
console. So for that you need to have a
9:33
Google account here. Go to uh the Google
9:37
cloud console and basically you need to
9:40
create the credentials here. Click on
9:42
this option O2 client ID and this will
9:45
be a web application that we are
9:47
creating here. So that's why authorized
9:49
JavaScript origins. So what is meant by
9:52
this? So basically it's the homepage of
9:54
your application. So let me open this
9:56
homepage uh start this open with live
9:59
server. So if you're developing it for
10:01
local host as in this case you can see
10:04
127550
10:05
index.html. So what is your uh
10:10
local host or website address? So in
10:11
this case my address is localhost
10:13
alongside with the port number. You
10:15
don't need to write index html. You just
10:17
need the
10:19
uh
10:21
regular path name. So we will go to it
10:23
and simply add URI and simply paste it.
10:26
So you can see that don't write trailing
10:29
slash here. Simply outside this. That's
10:32
it. This is your JavaScript origins. And
10:35
now the redirect URI. Redirect URI is
10:38
the URI to which you will redirect the
10:41
user after authentication. So we will
10:43
create a file called as profile dohtml.
10:46
So here we will be showing the profile
10:48
of the user. So we will simply say
10:53
profile of user and when they are
10:55
authenticated they will be redirected to
10:57
this page here and here we can say
11:01
welcome to profile page. And basically
11:05
the address of this page, let me open
11:07
this. You will see this is the full
11:09
address. You need to copy the full
11:10
address. So wherever you are
11:13
redirecting the user, simply paste it
11:15
here. Add URI and simply paste it.
11:20
That's it. And now click on create
11:23
option. So basically if you create it,
11:25
you will get your client ID and the
11:27
client secret. So this will be different
11:29
for you. So don't copy my information.
11:32
So I will delete this client ID after
11:35
this video. So you will no longer use
11:37
it. Simply paste it this client ID and
11:40
basically this is your redirect URI. So
11:42
in this case my redirect URI is simply
11:45
that we have submitted here. This is the
11:47
redirect URI. Simply paste it here.
11:52
So that's it. So this is the information
11:54
guys. Correct information I have shown
11:56
you step by step how to get the client
11:58
ID and the redirect URI. So please make
12:00
sure that you have followed that after
12:02
this guys now we can simply submit this
12:05
form programmatically so that in the
12:07
background. So where in params so we
12:11
will use a simple for loop. So for every
12:13
parameter inside this object we will
12:16
simply create a input element here. So
12:18
document dot createelement
12:21
input
12:23
for every property inside this object we
12:26
for we will have input element. So input
12:28
dot set attribute
12:32
this will be not be shown on the
12:34
browser. So this will be hidden. So
12:36
input type hidden. And uh we can also
12:39
set the name attribute. Name is equal to
12:42
the actual parameters. So for the first
12:46
case this will be client ID. Then
12:48
redirect URI response type scope include
12:50
granted scopes and state. After this we
12:54
will set the attribute of uh value. So
12:58
what value that we need to provide? So
13:00
this is equal to the params.
13:03
So this is key value pair. So params the
13:07
index is for the first iteration will be
13:09
zero. Then 1 2 3 4 like this.
13:16
And then we need to simply append this
13:18
to the form. So we will use the append
13:20
child method guys and we will append
13:22
this input element. So this will every
13:24
time iterate for all the object first of
13:26
all it will do for the client ID it will
13:28
add to the form then it will go to the
13:30
redirect URI like this. So after this
13:33
guys to programmatically submit the form
13:35
we will call this submit method on the
13:37
form form.submit. So it will
13:39
automatically submit the form for us.
13:42
And first of all we need to add the form
13:44
to the DOM element. the document dot
13:47
document dot body dot append child and
13:51
we will add this form element and then
13:53
we will click the submit button
13:54
programmatically.
13:57
So now what will happen guys if I open
13:59
this index html file in the browser. Let
14:02
me see here.
14:05
Let me zoom in here so that you can
14:07
clearly see. Click on this button. So
14:09
you will see uh it is automatically
14:14
uh you can see that if I select this
14:17
account here you will see Google hasn't
14:19
verified this app. So you can simply go
14:22
to the advanced option and click on
14:24
this. And now you just need to you can
14:27
see project wants to access your Google
14:29
account. So this is already checked
14:32
here. You need to check this option if
14:34
you want to grant this permission. Click
14:36
on continue. And basically you will see
14:39
welcome to profile page. And this is the
14:41
nice thing guys. You can see the access
14:42
token here in the browser URL itself. So
14:45
we need to capture this access token. We
14:47
need to store it inside our local
14:48
storage or you can store it inside MySQL
14:51
database or any sort of database you're
14:53
using. So this is the hash value the
14:55
state value that we passed here pass
14:57
through value and this is a access token
14:59
in the URL itself and also we need to
15:02
build a mechanism so that we can hide
15:04
this and basically we can remove all
15:06
these URL parameters in the browser so
15:08
that in the practical application we
15:11
don't need to show the user this
15:12
information. This is very important
15:14
information they can make wrong use of
15:17
it. So for doing this
15:20
inside your profile html we need to
15:24
write some JavaScript code here. So
15:25
right here first of all we will capture
15:28
this information this access token and
15:30
then we will hide this.
15:33
So here basically inside our DOM here we
15:37
will simply have a H2 element and here
15:40
we will simply say your full name
15:44
is and here then we will dynamically
15:47
putting this and then we will have a
15:49
image tag here guys. We will give a ID
15:51
to it also. That's it. And then we will
15:55
have a simple button of log out. So when
15:57
you click this button we will execute a
16:00
function which is log out. So just make
16:02
this function function log out.
16:06
That's it. So now guys first of all what
16:08
we need to do is that we need to capture
16:10
the information which we have received
16:12
here inside access token in the URL
16:15
parameters. So we need to make a simple
16:18
uh params object here. Params is a empty
16:21
object.
16:23
So after this guys we need to uh we will
16:26
be getting the access token from the URL
16:28
parameters by using some kind of regular
16:31
expression.
16:33
So
16:35
I will copy paste this regular
16:36
expression. It is all all this source
16:38
code is given in the description of this
16:40
video. So this is the regular expression
16:43
you will see and then we will simply run
16:45
a while loop guys. M is equal to this is
16:48
a variable index variable and this
16:51
contains a execute method guys and here
16:53
we will be accessing the location h3f.
16:57
So basically this simply corresponds to
17:00
the URL itself. So what is the URL? So
17:02
it will get access to that. So inside
17:05
this while loop we will get params and
17:09
this will be decoded URI component and
17:12
here we will pass the M1
17:16
and we will equal to decoded URI
17:20
component.
17:23
So this is some logic guys which is uh
17:26
able to access that access token. So if
17:28
you don't understand it, it is
17:29
completely fine.
17:31
m_sub_2
17:33
m2.
17:36
So that's it. This is all that we need
17:37
to write inside this while loop. After
17:39
this, we will capture this access token
17:41
inside the local storage. We will write
17:43
a if condition here object dot keys. And
17:47
here we will simply say params and uh we
17:50
will check the length. If the length is
17:52
greater than zero, then we perfectly
17:54
know that some keys are there. We need
17:58
to store that inside our local storage.
17:59
So local storage set item we need to set
18:02
the item we can call this as o info and
18:06
basically we can uh convert this to the
18:08
JSON dot stringy file we will convert
18:10
the JSON to a string and we will pass
18:13
the params here. So basically this is an
18:16
empty object that we configured here.
18:17
You will see that. So the access token
18:20
all that data access token uh expiry
18:22
date all that information which is
18:24
coming from the Google server will be
18:26
stored inside this local storage
18:27
variable which is o info that's it and
18:32
uh after this guys we if you see here
18:35
basically what I'm talking about
18:40
uh and also we need to hide this
18:43
information
18:45
we need to hide the
18:47
access token
18:51
So for hiding it we will be using this
18:53
method window.history dotpush state and
18:56
basically here we need to pass in the
18:58
first argument is empty object and then
19:01
we need to say document.title we need to
19:03
replace to it and put this slash and
19:06
then the URL to replace here. So profile
19:10
html that's it. So no longer your access
19:14
token and all those important
19:16
information will be shown. it will be
19:17
replaced by this. So no page refresh
19:19
will be there. This will be without page
19:22
refresh. Now to print out our access
19:24
token, we will get the info here. And we
19:27
will first of all pass it using
19:29
JSON.pass and inside this we will pass
19:31
our local storage dot. This time we will
19:34
get the item from the local storage. So
19:36
we will say get item and here we will
19:38
get the item using the key provided
19:40
which is all info. You can see at the
19:43
time of setting we have provided this
19:45
key. Here we need to provide the same
19:46
key when we are getting the things from
19:48
the local storage. And now we can
19:50
console log this which is info
19:55
access token
19:59
like this
20:03
and uh we can even say here info
20:08
expired expires in.
20:12
So these are two properties present
20:13
inside that object.
20:15
So you can even print out the whole
20:19
thing here as well.
20:25
You can even just
20:30
print out the whole thing here.
20:34
And now let me just refresh it and uh
20:37
start from scratch. So click this option
20:40
guys. So what will happen here? It will
20:42
ask for the permission.
20:46
If you go to inspect element, go to
20:48
console, you will see that this is your
20:52
object is returned to us.
20:55
This is your access token. With this
20:57
help of access token, you can access any
20:59
Google API, YouTube API, drive API,
21:01
Google spreadsheet API, any sort of API
21:04
expires and it only expires in the 1
21:06
hour which is this is value in seconds
21:09
3600 seconds. So after 1 hour it will
21:12
automatically get expired. In the next
21:14
video I will show you how basically you
21:16
can uh uh refresh this access token
21:18
using a refresh token. This is the
21:20
second video and this is your pass
21:22
through value. This is your scopes that
21:25
you have provided
21:27
and this is token type is beer. This is
21:30
option and basically this is we have
21:31
extracted the access token and this is
21:34
expiry date and no longer you will see
21:37
these information is not no longer
21:39
showing here. So,
21:42
so now basically guys we just need to
21:44
show the
21:47
profile
21:49
full name and the profile picture.
21:53
So after this we will simply make a
21:55
simple
21:57
get request using fetch API. So after we
22:00
get all this information so we'll say
22:02
fetch and uh as soon as page loads we
22:05
will make this fetch request
22:07
googleis.com/2/
22:12
version 3/fo.
22:15
So basically this is the URL guys which
22:17
will get access to our profile picture
22:19
and the email address and as you all
22:22
know inside forge fetch you need to
22:24
provide the headers as well. So we need
22:27
to provide a headers in this case also.
22:29
So headers is will be simply
22:31
authorization header.
22:33
So authorization
22:37
and here we will pass the beer. So B E A
22:40
R E R. So the token space followed by
22:43
the token. So this is template string.
22:45
You will see we are passing dynamic. So
22:48
here we just need to pass our access
22:50
token. Access token like this.
22:53
So now guys it will return basically a
22:57
promise. We can handle this by dot then
22:59
and this will contain our data. First of
23:02
all we need to convert this data to JSON
23:04
and then again our this will be
23:06
returning the info information and we
23:09
can console log the info object like
23:12
this
23:14
and uh now inside this info object guys
23:17
you will see we have our full name and
23:19
image.
23:21
Let me give it a id to it of
23:26
name.
23:28
So we need can we we can just simply
23:31
target it by the id that we have given.
23:33
So document dot getelement by id name.
23:36
So inner html we can pro manipulate the
23:39
inner html. So plus is equal to info dot
23:42
name that's it. And then we will show
23:45
the image as well. image we will set the
23:48
attribute called as the source attribute
23:51
and this will be equal to
23:55
uh info dot picture. So you will see
23:58
that and now if you refresh it guys what
24:00
will happen now
24:04
if I now refresh it
24:07
click on this you will see your full
24:10
name is coding sea you will see but the
24:12
picture hasn't been shown let me see
24:23
so let me see why the picture Oh
24:27
This function expects uh sorry inside
24:30
script.js JS as you will see guys
24:34
this is a function not a property so
24:37
source the second argument we need to
24:40
pass here info dotpicture
24:44
that's it so again if you refresh it
24:47
click on this you will see the picture
24:50
is also displaying here guys your full
24:52
name coding seure then we have a simple
24:54
log on button and you will see inspect
24:56
element if you go to console here we
24:58
receive an object here which provides
25:00
these properties It is given name, name,
25:02
picture, local. You can see that you can
25:04
even do it for different accounts as
25:06
well. Let me take this account for
25:08
example. Click on this option.
25:11
So your full name is Gautam Sharma. You
25:14
can see this is a profile picture of the
25:16
account. So now guys, we need to click
25:18
the log out button. As I click the log
25:19
out button, we need to remove the access
25:21
token. We need to revoke it so that the
25:24
user can't use it. So for doing this
25:26
guys, we will write this log out
25:28
function. And uh we have defined this
25:31
log out function here. Let me see
25:38
let me search for it. Log out.
25:42
Yeah, this is a function guys you will
25:43
see that. So now we need to write this
25:45
function. So when we press the log out
25:48
button basically when we we again need
25:50
to make a simple fetch request. This
25:52
time this will be a post request and the
25:55
URL just note down this URL. It's very
25:57
important. This is https
26:02
over to
26:03
google apis.com
26:07
and /revoke re v o k e question mark and
26:12
here you need to provide your token
26:14
token is equal to and then we will
26:16
concatenate our token which is info dot
26:21
access token access token. So we just
26:24
need to remove this token from our
26:26
account. Put a comma and the second
26:29
argument is the method. This time the
26:31
method will be post. And also we need to
26:34
provide the headers as well guys. So the
26:36
headers are we will be like this. We
26:38
will be providing again this header
26:40
which is this time the header will be
26:42
different which will be content type.
26:48
content type
26:50
and this time this will be application/
26:54
x
26:58
www for
27:01
x dash for URL encoded. This is a header
27:07
you need to pass here. That's it. So
27:10
basically guys this will
27:13
return a promise. This will have the
27:16
data as well. So
27:19
we can redirect the user back to the
27:21
homepage. So we can simply say here
27:26
location. HDF
27:29
and here we can simply redirect the user
27:31
http
27:33
localhost 5500
27:36
index html. That's it.
27:39
That's all in this code guys. As you can
27:40
see, we are simply making a post request
27:42
to this URL revoke token and we are
27:44
providing our access token and this will
27:47
be a post request and we are providing
27:49
this header. That's it. So once you load
27:52
this page guys if you now press the log
27:54
out button you will be
27:57
you will see as I click log out you will
27:59
be redirected to the homepage. So once
28:02
again if you click it you need to grant
28:04
the permissions once again the process
28:06
needs to go by itself here. This is
28:08
really important. We need to also log
28:10
out users as well. So whenever the user
28:13
wants to log out they can press this
28:15
button and uh we cannot lo no longer we
28:18
can uh go to this page and access
28:21
information. So this is really you can
28:23
see undefined coming here. So this is a
28:26
tutorial guys or two JavaScript Google
28:30
login and logout using access token. So
28:32
all the source code is given in the
28:34
description of this video. If you want
28:36
any doubt here, you can write comment on
28:39
this video and please hit that like
28:41
button as well and I will be seeing you
28:44
in the next video. Until then, thank you
28:45
very