Up next in 10
Build a Svelte One Tap Auto Google OAuth2 & JWT User Login & Show Profile in Browser Using JS
Jan 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-svelte-one-tap-auto-google-oauth2-jwt-user-login-show-profile-in-browser-using-js/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this uh video
0:03
so in this video we will be talking
0:04
about that how to integrate Google oo
0:08
login inside your swelt application
0:11
swelt is basically a framework for
0:14
building web application similar to
0:16
reactjs
0:18
VJs so you can see right on your screen
0:22
if I load I'm running this Local Host
0:26
8080 and we have a simple login with
0:28
Google button right here and if I click
0:31
this button my window will appear here I
0:33
can simply choose my account after that
0:36
it will actually display the profile
0:38
picture email address display name
0:40
everything right here this is actually
0:43
it will redirect me to the profile page
0:45
Local Host 8080 SL profile so this is a
0:48
very simple application you can check
0:51
out with any Google
0:53
account if you go to the same
0:58
page so so if you're doing it for the
1:01
very first time then it will ask you for
1:03
the information so similarly you can do
1:06
it so it's happening in swelt which is
1:09
the web framework we'll be showing you
1:12
how to integrate this step by step in
1:15
this tutorial like this so if you're
1:17
watching it for the very first time
1:18
please hit that like button subscribe
1:20
the channel swelt if you don't know guys
1:23
swelt is actually latest version is five
1:26
it is released just 9 months ago so this
1:30
is their official website it's a
1:33
framework for building enhanced web
1:36
applications and
1:38
uh it's very popular framework among
1:41
developers so we'll be looking at how to
1:43
integrate this so if you want to get the
1:45
full source code guys the link is given
1:47
in the description you can directly go
1:48
to my website Pro Cod store.com and
1:51
purchase the full source code with full
1:52
documentation and support after you
1:55
purchase it you will actually get a zip
1:57
file from Google Drive automatically
1:59
after the payments so this is actually
2:00
the full directory structure with full
2:02
documentation so I will be showing you
2:04
step by step in this tutorial how to do
2:06
this step so now let's get started so my
2:10
server as you can see it's running it I
2:12
will stop this server and start from
2:14
scratch so the very first thing we will
2:17
do we'll navigate to the projects
2:18
directory right
2:20
here and here I will make a new swelt
2:23
project so what I will do there is a
2:26
command right here if you want to make a
2:28
new SW project
2:30
which is npx digit D git T digit
2:37
swjs
2:38
SL
2:40
template and Then followed by the name
2:42
of the project so I will simply say
2:44
swelt Google login this is actually the
2:48
command which is npx digit swjs /
2:52
template and followed by the name of the
2:54
project enter it and it will actually
2:57
create this project for you in the root
2:58
directory
3:03
so it will actually clone this a basic
3:05
swelt JS
3:07
project inside this
3:09
directory so it will take some time 5 to
3:12
10 seconds so you will now see it has
3:14
cloned it so we can navigate to this
3:16
directory SW Google login and open this
3:20
inside vs code so it will look something
3:23
like this if you see this is actually
3:25
the directory structure of the
3:27
project let me close the previous one so
3:31
we have the app. file right here we have
3:34
the main.js file and we have this
3:37
package.json file right here
3:40
so so the very first thing we need to do
3:43
we need to install all the modules for
3:45
our SW T so I will simply invoke uh so
3:50
it has already downloaded all these node
3:52
modules folder guys once you invoke that
3:55
command it will automatically import all
3:58
the nodejs modules you don't need to
4:01
execute that npmi command so it will
4:04
automatically do do it for you so don't
4:06
need to do this and apart from that we
4:09
also need to install two more third
4:13
party packages first is JWT decode this
4:17
module will be responsible for decoding
4:20
the credentials that we will be getting
4:21
from Google authentication API so JWT
4:24
stands for Json web token and we will be
4:26
decoding it so this module is necessary
4:29
for decod coding that
4:30
information so install this and the
4:33
second module we need is the routing
4:36
module for SW SW
4:39
routing so this is specifically designed
4:42
for integrating the routing
4:44
functionality in the SW app npmi SW
4:48
routing so in this tutorial I will also
4:50
show you how to set up routes inside
4:52
your swelt applications let's suppose
4:54
you have multiple Pages inside your
4:56
application so that's why this module
4:58
will come into the picture
5:00
so you can now run this run your
5:03
application by simply invoking this
5:05
command npm run def this will start your
5:08
development server which is lo HTTP
5:11
Local Host
5:13
8080 so if you just navigate to this
5:15
address in the browser you will
5:17
basically see a really simple swel JS
5:20
app hello W if you just need to edit
5:23
this you can go to app. swelt and just
5:27
make a change right here
5:30
in the
5:35
template so if you hard code this value
5:38
hello
5:41
Vol so you can see that it will change
5:44
let me also just delete everything from
5:47
your Styles as well so now you can see
5:49
that so it is changing so now the very
5:53
first thing we need to do we need to
5:54
create a folder here which is
5:57
toes sorry we just need need to create a
6:00
file right here just create a file
6:03
stores so if you don't know about SW
6:06
store guys basically it's say
6:09
central location where we store
6:12
everything related to the
6:15
application so for this application we
6:18
will simply be holding an object which
6:20
will hold the user profile of the user
6:24
so for doing this we will be importing
6:27
the SW
6:30
store and it contains a writable method
6:33
contained inside it so SW store swell
6:36
store you may say it's a centralized way
6:39
of storing data inside your application
6:41
it is Redux if you have studied react JS
6:44
you will have seen Redux which is a
6:47
state management similarly for SW CH
6:49
application we have swelt
6:52
store if you want to store a lot of
6:55
information inside your application so
6:56
we'll be only be storing one object user
6:59
object current value will be
7:01
null writeable we will be using not
7:04
writeable W will be small so the current
7:07
value of this object will be null
7:09
whenever you start your application so
7:11
we will be just be uh setting this value
7:15
or getting the value this is really
7:17
important because you just need to uh
7:20
declare this file store.js and
7:23
just just register This Global variable
7:27
of user object we just close this file
7:30
and the next file we need to create is
7:32
the components folder so right here just
7:35
create a components folder and right
7:37
here just create the login
7:40
component login do SW similarly you'll
7:43
have the second component profile do
7:47
SW these components are
7:51
there so the next thing we need to do
7:54
guys right here just go to the login
7:55
component and right
7:58
here we have the script tag right
8:05
here we will let me first of all write
8:08
the HTML which is
8:11
responsible so here we will be using
8:13
some uh tailin CSS
8:17
classes Tailwind is a
8:20
framework CSS framework which has
8:23
pre-built classes so these are all
8:25
tailin classes that I'm writing right
8:28
here BG gray stands for background
8:31
color so now to include the Tailwind if
8:35
you want to just search for the CDN and
8:39
just include the CDN in the public H
8:42
index. HTML file which is located in the
8:45
public
8:48
folder so right here you can include the
8:54
CDM so after you include this all these
8:57
classes will come into the picture and
8:59
then then we will have a simple heading
9:04
class so we will simply say login with
9:10
Google we will have basically a div tag
9:14
which will have an
9:16
ID Google signin
9:21
button you'll also be giving a class to
9:24
it of BG blue 500
9:29
text will be uh white color PX4 py2 and
9:35
it the button will be
9:37
rounded and it will also have a shadow
9:39
on medium devices when we hover onto the
9:41
button the background color will change
9:44
from 500 to 600 and cursor will change
9:48
to pointer so these are all Tailwind
9:50
classes guys you can read the
9:52
documentation on their official website
9:54
and the label of the button will be sign
9:57
in with Google gole so if you just
10:02
refresh now your application just go
10:07
to and the thing is that guys uh you do
10:10
need
10:11
to uh make the route routing file as
10:15
well right here inside your source. app.
10:19
SW folder by default hello world is
10:21
showing right here instead of this we
10:24
just need to import our router inside
10:27
the main file so right here here we will
10:29
simply import the router and the route
10:33
this will be coming from the base SW
10:36
package SW routing package that we
10:41
installed and then we need to import the
10:44
login component which will be coming
10:46
from component
10:48
F and here you will be having the base
10:50
router tag inside this you will have two
10:53
routes first route will be going to the
10:57
homepage
11:01
path is Slash and the component value
11:05
here will
11:11
be login component so if you now refresh
11:15
your application by default this
11:18
uh button will be showing so this is all
11:21
style will Tailwind CSS we included the
11:23
CDM for it this is a button right here
11:26
if you click nothing will happen but you
11:28
just need to bind a onclick listener to
11:31
this button so that when we click this
11:34
button we have given this ID right here
11:36
if you see we have given this uh ID so
11:40
now we can Target this
11:42
ID in the JavaScript right here we can
11:50
simply
11:52
uh you have a life cycle method for
11:55
every swjs component this function on
11:59
Mount will
12:03
execute so this
12:08
executes when
12:11
components mounts this will only execute
12:14
once but at the starting so here we need
12:18
what we need to do we need to create a
12:21
brand new script
12:24
tag and the script source is equal to
12:29
and here we need to provide the URL to
12:32
which we will be making the request so
12:34
accounts.google.com
12:37
GSI
12:39
client and when the script is loaded in
12:43
that case we need to Simply say
12:47
Google is window. gooogle and then it
12:51
contains this method Google accounts.
12:54
id.
12:55
initialize and here we need to provide
12:57
the client ID so this client ID client
13:00
uncore ID sorry client uncore ID so this
13:04
will be coming from Google Cloud console
13:07
and the second parameter will be the
13:09
call
13:11
back function so here we'll be calling
13:15
this function handle credential response
13:18
you can just call it anything but I will
13:19
be calling this so right here we will
13:22
need to Define this
13:24
function which will be getting our data
13:28
so function
13:30
handle credentials
13:33
response and it will be having the
13:36
response as an argument automatically
13:41
passed so just format the document so
13:45
right here guys we need to go to Google
13:47
Cloud console and right here just create
13:51
your oo client ID select the web
13:53
application type to be web application
13:56
authorized
13:57
redirect authorized JavaScript origin
14:00
will be the homepage of the application
14:01
which is uh by default it runs on 8080
14:06
this is the my address same address you
14:09
need to copy paste inside your
14:11
authorized redirect URI simply click on
14:14
Create and then it will actually give
14:16
you the client ID and the client secret
14:18
we only need the client ID this will be
14:20
different for you so don't copy my
14:22
client ID simply paste it so now your
14:25
client ID have been pasted so after you
14:28
do the this
14:30
uh you will see the response coming
14:34
right here if I console log it and try
14:37
to run this application let's suppose if
14:39
I navigate to the Lo homepage click on
14:42
this
14:48
button nothing will happen I think we
14:51
haven't added that script tag to the
14:53
body so yeah we forgot to add this so
14:57
after you do this
15:01
we also need to say Google accounts. ID
15:05
and here we need to render the
15:08
button so this is actually this function
15:11
render button and we can render button
15:14
in the location Google
15:17
signin button you will see we have given
15:20
this ID Google signin button so we are
15:23
entering it right
15:25
here and we will basically put a comma
15:27
and here we need to provide the theme so
15:30
the theme will be outline and the size
15:33
of the button will be
15:36
large so after you do
15:44
this so after you do this we need to add
15:47
this script tag to the body document
15:49
body a pench
15:53
script so now you will see the signing
15:56
with Google button click this button a
15:59
window will open right here you need to
16:01
select your Google
16:02
[Music]
16:08
account so just make sure the
16:10
information that you submitted is
16:13
correct because yeah I know this why
16:17
this error is taking place we also need
16:19
to add this HTTP Local Host as well
16:22
apart from the port number we also need
16:24
to write HTTP Local Host as well so we
16:26
forgot to the do this just go to it and
16:30
second authorized JavaScript Origins so
16:33
both HTTP Local Host and HTTP Local Host
16:36
with port number simply update this and
16:39
now this error will not take place if
16:40
you just refresh your
16:43
application you now you will see signing
16:46
with as coding fure so click it select
16:50
your account and if you go to the
16:51
console and you will actually see an
16:54
object which will be this will be the
16:56
client ID which client ID cred so we
16:59
need this credential right here which
17:01
you see that we need to decode this
17:03
credential which is coming JWT token so
17:06
now to decode this we will be importing
17:09
that method that we installed which is
17:11
JWT decode this is actually the package
17:14
so right at the very top we will import
17:16
that method
17:19
JWT
17:21
dcode and it will be coming from this
17:24
package JWT
17:26
dcode so JWT is say it's a
17:32
method and also from that uh we will be
17:37
importing the
17:38
navigate method from SW
17:43
routing
17:45
package and we also need to import that
17:48
uh user that we stored inside the dot
17:53
do/ store file store
17:56
files that's all
18:00
so after importing everything we can
18:02
declare a Google variable right here as
18:05
a global variable so after you do this
18:10
uh after you add
18:12
this we will now be adding this handle
18:15
credential response so now to actually
18:18
decode this we will be using this JWT
18:21
decode and you be passing the response.
18:24
credential
18:25
value this will actually get the Prof
18:28
file of the user user. set so we are
18:31
actually using this user store variable
18:34
that we declared early on inside the
18:36
stores. JS file currently this is null
18:39
by default we can access this value
18:42
inside any SW component this is a beauty
18:45
of using SW store guys it's a
18:47
centralized location where you declare
18:49
your object or any sort of data so from
18:53
any component we can access it so that's
18:55
why we use this method which is user.
18:58
get or user. set so in this way we will
19:02
be manipulating the state of the
19:04
application by passing an object the
19:06
name which will be located in data. name
19:10
email data. email and image URL is data
19:15
do picture so after setting these three
19:18
values it's now becomes very
19:21
easy and after that we can redirect the
19:24
user to the profile page so navigate
19:29
slash profile that's all so after you do
19:32
this change click on signing with Google
19:37
click your account and you'll be
19:38
redirected to the profile route now in
19:41
that profile route profile. SW we just
19:45
need to show the information which we
19:47
are coming right here so again we will
19:49
be using
19:51
uh Tailwind
19:55
classes so just to center it everything
19:58
we will be using these
20:08
classes so right here uh we will
20:19
be these classes is this one
20:26
sorry so here we'll be having a one
20:29
condition so this condition will be in
20:33
curly bracket and
20:36
if hash
20:38
if current
20:41
user so this current user we will be
20:44
defining it in the
20:46
JavaScript so we will be getting it from
20:48
the
20:49
store centralized store so right here in
20:52
the script tag we will be importing
20:54
first of all the
20:56
user from store
20:59
file and also we'll be importing on
21:03
Destroy from The Base swel Library
21:07
package it's a life cycle method to in
21:09
order to destroy the component we will
21:12
be declaring two more
21:13
variables unsubscribe and the current
21:16
user which will be empty object so
21:20
here we will be basically be first of
21:23
all be defining the on Destroy which is
21:26
very simple if the component is d
21:28
destroyed then
21:29
unsubscribe call the unsubscribe
21:38
method so now to get the
21:43
user we will be defining the
21:47
unsubscribe method this will be use very
21:50
simple user
21:51
dot so this is three methods which are
21:54
available in SW store guys in order to
21:58
set any value we have the set method in
22:00
order to subscribe or get notification
22:02
about a changed value we have the
22:04
Subscribe method and the third value is
22:06
the update if you want to change the
22:08
state of the application you can call
22:11
update so now in this case we need to
22:13
get the value so we need to subscribe so
22:15
here we will say
22:20
subscribe to that
22:23
value subscribe and the value
22:29
will be coming right here the current
22:31
user will become the actual
22:35
value so now we have the current user in
22:39
the if
22:41
block we will close this if
22:45
block So based upon that we'll show the
22:51
image withd 24 height 24 it will be
22:57
rounded and The
23:06
Source current user
23:10
dot
23:13
image URL
23:28
so similarly we will be displaying the
23:31
name and the email address as well the
23:34
format is very simple so I will simply
23:36
copy paste it just to save some time so
23:39
we are displaying this image we are
23:41
displaying the current user.name current
23:44
user. email this completes the
23:46
application if I try to go
23:55
to so it is saying some kind of error is
24:09
there uh let me paste the code guys I
24:12
think I make some kind of mistake right
24:15
here the whole source code is given you
24:17
can directly purchase it let me paste
24:19
it so
24:43
uh let me see what is the error which is
24:46
coming I
24:50
think SL profile oh sorry we forgot to
24:54
do this guys this is very very silly
24:56
mistake we need to do for the routing
24:59
app. SW just make sure that you have
25:02
given the route here properly that's why
25:05
I forgot to do this part path you need
25:08
to provide SL profile and which
25:11
component to load so we need to load
25:12
this uh profile
25:15
component so we have a second route of
25:18
the application so we have two routes we
25:19
have done the routing so if I navigate
25:22
to SL profile you will see the
25:26
information if you click
25:33
uh
25:37
profile
25:41
SW this is actually if you see we have
25:50
this uh we see which is
25:56
uh where is this a file right here let
25:59
me see
26:05
uh route path component is
26:17
profile so profile it is located in the
26:21
components folder if you see
26:42
I don't know why it is not doing it
26:45
again it is saying
26:53
404 oh
26:55
sorry could not resolve store so sorry
26:58
the name of the file is
27:00
toes so in the profile here it is saying
27:05
uh sorry the name of the file is
27:12
stores that's all just make this change
27:15
that's very silly
27:22
mistake so now you can see the display
27:25
name email address and profile picture
27:27
is sh properly this is a project guys if
27:31
you are interested in purchasing the
27:32
source code with full documentation the
27:34
link will be given in the description
27:36
you can purchase it from Pro Cod
27:37
store.com thank you very much for
27:39
watching this video please hit that like
27:41
button subscribe the channel as well and
27:43
I will be seeing you in the next video
#Programming
#Jobs & Education