Build a Preact.js Google OAuth2 User Login Using Google Identity Services SDK in Browser Using JS

uh hello guys welcome to this video so in this video we will be talking about how to integrate Google

authentication inside your preact application preact is actually a very

new framework in the market it is similar to react CH but it's very

lightweight and uh it it is very fast as compared to react it uses the same

concept of react but it's very fast so we'll be integrating the Google Authentication system here right here in

preact application so you will see if I go to the Local Host 8080 here my

application is running so you will see this sign in with Google button you need to select your Google account and this

is a very nice way which is uh Google identity services this is the actual one

tap authentication if you one tap it you will be authenticated and you will print

your information display name email address and the profile picture this is the Google identity Services s we will

be using it inside our preact application so if you just type here

Google identity

services so you will be redirected to your this documentation here you can

just see the documentation so you'll be looking at how to integrate this you can

do it for any account let's suppose I have a different account right here so the basic difference between the old

authentic old authentication that you did in Google because it will actually show you this personalized button here

you will actually see the profile picture of the email this is you will see the email

address and the display name as well so the user will see this and it is

trustworthy it will simply click it with one tap your user will be authenticated

it doesn't need to redirect you to a different page so in this way we'll be

using using it and for building this we will be using a new framework in the

market which is preact JS so preact is similar to react and but it's a

for 3 KB it's only size here so it's an alternative to react with the same

modern API that react uses but it uses it in a very efficient way and it's a very fast framework we will be using

this and all the source code is given in the description right here you can check out the description you can purchase the

full source code with full directory structure and support the link is given you can go to my website Pro Cod

store.com and purchase the full source code after that you will actually get the zip file from Google Drive so after the

payment is done you will be redirected to Google Drive where you can actually download the zip file and extract it to

get this full directory structure so now let's get started by building this project guys so first of all what I will

do I will stop this server which is running and uh I will open a new

directory so I will see uh go into my projects directory and here I will make

a new project preact project so I will simply invoke this command

npx preact CLI create

default and Then followed by the name of the project so I will say preact Google login this is my name of the project the

command is very simple npx pre CLI create default and followed by the

project name so if I just enter it it will actually create a preact project in

my root directory so it will hardly Take 5 to 10 seconds and uh then we just can navigate

to this project directory so just wait for the process to finish

so it is telling me that you need to install preact CLI package so you simply

press y so it will install the preact CLI package and after that it will actually

create your preact project as well so it will install all the packages and

modules which are necessary for this application so just wait for the process to finish so

it will depend upon your internet connection so once it is done it will

actually so I will not pause the video I will show you every step so just see how it happens so I

will not pause the video or recut the video so I will show you everything which is happening right here

so I will be back guys whenever it is done so now guys as you can see that the

project is done it taken some time so we just need to first of

all go into that uh project folder so I will say preact login Google and open it

inside vs code so let me show you the basic structure of a preact project we have basically very similar to react

project we have the source directory so here in package.json which actually

contains all the modules of preact we have various scripts out there build serve development script everything and

these are the dependencies that we are using the preact version which is the latest version at the time of recording

this video and preact router this dependency allows you to actually make routing inside preact

application and uh now in the source directory we have these components folder and right here this is our main

component app.js file if you see this file will be rendered on the browser and

this is actually the home app component inside this app component We have

basically router here and we have profile route and the Home Route uh let

me just run this application and show to you just npm run def this will start the

development server on Local Host 8080

so we just need to navigate to Local Host

8080 so it will take some time if you are running it for the very first time

so just wait for the command to finish and uh then it will start your local development server on Local Host

080 first of all it will compile the

project is little bit slow as compared to react but the performance is great

the size of the framework is minimal which is 4 kilobytes as compared to

react but I just noticed whenever I created project or running it it is slightly slow

it taken some more time

so I will be seeing you guys whenever so you can see now it is compiling it so

you will see that once it reaches 100% so the project is running you will see

if I refresh so this is actually the main preact project that you will see the home screen this is the Home Route

you can navigate to the profile route you will see Local Host 808 z/ profile

we have Dynamic routes as well you can see that this is actually the John route so here it is showing profile John so

this is the home app.js file so if I just delete everything from here and

just replace here H1

heading just write here hello world and just delete everything from

here refresh it you will see this this uh we'll refresh here so in this way you

can edit the preact project by going to the app.js

file so now what we need to do right here uh we need to so all the routes

will be contained inside the routes folder if you see we have basically two routes the Home Route and the profile

route each route has its own index.js file so by default all the routes that

you will do in reactjs it will be coming inside this routes directory so what I will do I will

simply delete this I don't need the Home

Route so routes directory is empty so here I will simply make two routes first

one will be a folder name login and the second folder I will make

is uh

profile so here just make a file

folder and a new folder once again here of login so now we will have two routes

right here this is a login this is is a profile so here also we have the index.js

file so I will just uh move this app.js

file or delete this I don't need this so I will simply delete this and I don't

need the components folder so I will simply delete this

so I just basically deleted unnecessary folders so we have the routes folder right here we have the basic index.js

file so right here in the in this index.js file we will basically be

writing the base app component which is simply a functional component and it is if you have studied

react J you will be finding this framework to be easy it is the syntax is

almost the same of react so here'll be giving an ID here of app and here we'll be having a router

tag this router will be coming from preact router which is the base package

so inside this we will have the login component so I will simply in the routes

directory it will be a simple functional component I will make it just changes to

login and in the profile also simple functional component just

change it to profile so now we have two uh routes right here this is a login

route profile route so now to include this it's very easy you simply say login

it will be imported from do routes login and the Path property here will

be so if you navigate to the Home Route this login component will be taking

place just close this tag and the second route will be for the profile so it

again will it will be imported you will see profile from routes folder and this path will be for slash

profile so when someone goes to slash profile in the application it will load this component that's all this is all

that we need to do how to do routing inside preact CHS application so if you navigate to Local Host 80

80 so it is saying I we need to run this file once

again so it is saying some error right here identifier app has already been

declared sorry just delete

this so now there will be no error if you navigate to the

homepage uh now if you go to/

profile these routes are there if I navigate this login component

okay let me just have a H1 tag right here

log this is a profile so

so now guys you can see that basically if I go to the homepage I will see this login message if I go to slash profile I

will see Slash profile you will see profile so the routing is perfect perfectly

working we configured the routing right here in the index.js file we basically

have two routes this is the Home Route this component will load if I go to the

homepage and if I go to SL profile this component will load so now the thing is

that we need to create a store for store file right here in the

source directory just create a file called as store.js so this will be a

global you may say it's a global store file where we can actually create a

object user and uh this object will be having three properties name email and

the profile picture so so image URL both these three values will will be null by

default when the application starts this object will be empty having these three properties email address display name

and the profile picture and uh after we authenticate we will be basically be

setting the values of these name email and image URL so just make this store.js file in the source directory here we

will actually keep track of everything after authentication so just make this file store.js

so after we do this we need to write our login component so just go

to index.js here login so right here we will actually be using the hook use

effect if you have studied react you will know use effect what is use effect

so preact also has a pre pre-built use effect

hook it will be coming from

preact SL hooks so use effect is this hook it will automatically execute

whenever your component loads for the very first time so this will be only be running once so in the square brackets

this signify it will only run once so

here we will need to actually perform the the operation of fetching the CDN of

uh Google identity Services SDK so we'll be creating a script element dynamically

script and then we will say script. source is equal to https

accounts google.com dog google.com/ GSI client so if you go to

this URL manually it actually contains a minified code CDN if you go to this it is actually

this Library code that is hosted on this CDN we are programmatically fetching it

inside of a preact application with the help of use effect hook so now what we

need to do right here we will simply say script. onload when the script is loaded

here we need to perform this operation window. google. accounts. id. initialize

window. google. accounts. id. initialize and here we

need to pass our uh client ID client uncore ID so this you will be getting

from the Google Cloud console and the call back function so when the

authentication is done we will be getting the credential so we will be making this function handle credential

response you can just name this function anything I just named this as handle credential response this will be the

call back function and now we just need to make this call back function right here at the very

top we can just make it here handle credential response and this response

will be coming at as an argument right here

so after this call back function we also need need to write

here add the Google login button so now to add

that button we will simply say window. google. accounts. id. render button so

these are all the methods of the Google platform Services SDK so now to add this

button we actually need to pass the location where we will be dynamically be

doing this so inside of jsx we just need to create a element right here inside of

a jsx here we'll be actually be creating a fragment instead of

div so this fragment will be of the part of preactjs if you just import this it

will automatically imput from preact so this fragment actually contains a

diff which will have an idea of Google sign in button

so we have given this ID to this div element now the text here will be simply sign in

with Google it can even be a button as well

if you just change it to button right here now we can simply say right here we

need to Target this element by get element by ID Google signin button

so here we can simply pass some options which theme that we want so put

a comma and the second parameter will be an object so so the theme of the button

will be outline second parameter is the size we'll be giving it a large button so

after you do this we do need to

actually so it is done I think we do need to add

this document. body. appen the script

tag use effect is done right here

okay I think I forgot to

yeah okay now it is done so after this we just need to add

this script tag to the body element so for this we can simply say

document.body.appendchild script that's all so if you just refresh

your browser guys what will you will be seeing if you navigate to Local Host

8080 you will see this button right here sign in with

Google and uh fail to render button because there

is no parent or option set this is because we haven't submitted our client ID guys because we do need to submit the

client ID as well so just go to Google Cloud console and right

here let me show you how you do need to do

this so click on this create credentials or or client ID and here you need to

submit web application authorized JavaScript origin just submit Local Host

8080 port number and also you need to submit HTTP Local Host both the version

with port number and also Local Host as well and redirect URI once again will be

the HTTP Local Host 8080 so this is important whichever port

number that you're developing so just replace it here click on Create and it will give you your client ID so don't

copy my client ID so just copy this paste it inside your client ID

section so once you paste it

uh now I think this function should

execute let me change that to div not a button let me change this to div just to

check just wait guys let me see what is that so now guys you can see that the button is showing right here sign in

with Google as you click this button uh this will open this window so here you

need to replace your correct client ID so simply copy this client ID and paste it right here all the source code is

given in the description can directly purchase it so just paste your client ID

after you paste it uh

you will basically see your profile picture will directly come email address display name everything this is a

personalized Google login button right here if you see in the preactjs application if I click it I I will be

able to select my account so once I select my account this function will actually execute

handle credential response if I try to console log this message

console log response which is coming right here click

this so if I show you this uh this object will be returned to me and this

response object will have the client ID and the credential so this credential

we want guys JWT token we need to decode this credential to actually get the user

information so for decoding this credential we do need to install a package which actually allows us to

decode this so simply install this package which is J

JWT decode I think this is actually the package jw- dcode so simply install this

package npmi JWT D code install this package inside your preact application

so once you install this it's it becomes very much easy to actually decode this

credential to actually get the user information I've already installed it so

I will start my development server so right here if you go to

your so what we need to do inside this function we just need

to say now to get the user data I will simply say JWT D code this will be

imported from this library that we installed and we will simply pass response. credential

so now it will have the user. name we will be importing the user from the

store file that we created early on if you see store.js so these three

properties are currently null so now we need to set these properties so user.name will be equal to data.

name user. email will be equal to data. email and user. image URL will be equal

to data. picture so if I just show you the data

as well console log data so it will be a simple object if you see in the

browser if you click it select your account so in the same page without

refreshing it it will first of all give you this credential JWT token then we

decode this and then we got an object right here which will have the name display name profile picture email

address given name everything email verified property true email address of everything so we are just storing this

information and then we need to redirect it redirect user to profile page so for

doing this we will use the route dependency which will be coming from preact router and here we'll be

redirecting the user back to the slash profile route so now the user will go

into the once they are authenticated they will land on the profile route so

now you can see that so it is very easy in preact JS guys uh now we'll go to the profile folder

index.js and now to show these details it's very easy we will simply first of

all right inside this jsx template we have this expression user we'll be

importing the user from the store file and now we simply check if the username

is available in that case only we will be showing the properties of the

user such as user.name

and the this will be user.

email and then user. image

URL if user. image URL is present then only

execute user. image URL then

only show the image so user. image

URL close this so if the user object is

not present then we'll use the tary operator and here you'll simply say

no user found no user Lo that's all so you'll see this message coming no

user logged in so we just need to go to first of all the homepage sign in click this and you will

see the display name email address profile picture will all be showing right here in this slash profile route

so in this way guys you can actually do simple Google identity Services SDK

Google Google authentication with a simple T click so we are not storing this

information in database that's why you are saying if I refresh the page all information will go away but you can

easily do it store this information in database as well so that it persist across if you refresh the page as well

so in this way you can integrate your Google login inside your preact JS application which is a very good

framework very fast it is based upon react CH thank you very much for watching this video please hit that like

button subscribe the channel and I will be seeing you in the next video