Build a Node.js Express Passport Google OAuth2 Login and Logout With Sessions and MySQL in Browser

uh hello guys welcome to this video so in this video we will look at how to build out a Google authentication login

and log out system in nodejs and express and you can basically see I'm running

this on Local Host 3000 if I reload the application I just need to re restart the application right here node more

index.js so we will be using passport Library so we will be storing all the

details in a mySQL database you can see connected to mySQL data Bas if I refresh

right here and you will actually see there is a model box out there which is saying to you that login with Google so

what it does basically guys you will see we have this users table I created this if I show you the structure of the table

what sort of information it will collect the ID will be the primary key ID Google

ID will be coming after the authentication is done display name email address photograph created at all

this information guys once we Grant the permission of Google authentication all this information will be coming from

Google authentication o login and we will be storing this inside the users

table and automatically sessions table is automatically being created once you

install Express session we will look at this Library once we install this package this package already created

this table once you want to save all this information inside the session so this session table is

automatically being created we we don't need to create this table so you can see

that now if I click the login with Google button let me just try out with

the account with uh I haven't tried it because I already login with this

account so let me try it with a different account Local Host 3,000 you will just I just want to see the

authorization flow as I click the login with Google button guys what will happen it this screen will show to you that you

need to choose your account so you will simply choose your account and after that you just need to it will say that

project one wants additional access to your Google account so you just need to continue Grant the permission and once

you grant the permission guys you will actually see the profile picture and this is actually the email address that

you will see and a log out button as well so after you do

this if I refresh my my SQL table you will see this information a cookie has

been inserted you will see that in this table and also in the users table you will basically see the display name is

inserted email is inserted this is actually the photograph as well the time St time stamp is also inserted this is a

Google uncore ID as well so all this information is being inserted and we are displaying this information in the

browser in a user profile so if I close this window again open this and navigate

to the same address you will basically see the information will persist because we have have saved all this information

in my SQL table and we are fetching that information we are already detecting that the user is already logged in so we

are displaying this information in the profile page we are simply navigating it and as I we also have the log out button

as well now if you click the log out button your information will be deleted and now you can see that if I refresh

that table you will basically see now if I go to the sessions

table that information if you you just navigate to it again type Local Host

3000 you will be redirected to the login page because we click the log out button so now we are seeing the login with

Google button once you again click this button you will be redirected you so this time you don't need to go to that

screen select your account it has automatically detected that you're already logged in so it has redirected

to your profile page similarly you can choose any account of your choice guys let me choose this account you can once

you deploy this it will happen for every account so this is different account here you will see

that again the same process you just need to select your account and this is Google authentication login and log out

system this is authentication flow that you see whenever you want to login with

Google this is the actual authentication flow that you see you can see profile picture this is name address all that

stuff so this is very easy guys but we we need

to do here this is this one is you can see that this is actually profile picture

some accounts have profile pictures some accounts don't have so this account I have a profile picture so the profile

picture is also showing right here so you can see the E this is the name this is the email so if I just refresh the

table right here the users table you will now see three entries will be added in the users table this is a first entry

second entry third entry so three accounts have been Ed in the mySQL database so you can see it is a very

automated process so once you do

this so again if I login with this account you will see that again the profile picture email address name and

again if I refresh my table you will see one such account is already inserted you will see that so now four accounts are

inserted with four email addresses four names four profile pictures all this stuff so we will try to build this

application guys let me show you the dependencies that we are using right here so the very first dependency we are

using is passport passport is basically a simple o authentication Library it is

almost 2, 430,000 weekly downloads a very popular package it has various

pre-built strategies if you are building for different social networks Facebook

Google Twitter so specifically we are targeting Google right here so we'll be talking about Google authentication

system system for it so it has its own password Google O2 strategy so if you

search for this package the very first package which comes right here so this is a specific Google module for password

we will also be using this also 273,000 weekly downloads so we will also be

using this also apart from that guys we will be using my SQL 2 to actually

connect to our database in MySQL so about 2 2 million weekly downloads are

there we will use this Library we we are using Apache web server which basically

have its PHP my admin my SQL comes right here we have actually storing it we

actually created this database and inside this database we created this users and

table so we are using the mySQL database in this video to actually store the user

information and apart from that guys we also are using sessions to actually

store this information to persist information ac across users so if you

navigate to the same page once again your information will be stored uh in the code basically in node

ja you can actually configure how much time you want to store the user information so I basically have the

session secret and I'm storing this information for one year so this simply means that if the user logs in

successfully that information will be stored inside the Google browser user

browser for typically one year if the user has not deleted its cookies so the

user once you log in that cookie will be stored for one year so you can just configure it in the max age property so

this application guys you will be building it step by step if you need the full source code I have also given the

link in the description of the video where you can actually purchase the full source code files of this project if you

are interested from my website procore.com the link is given in the description after you purchase it you

will be redirected to Google Drive where you will actually get the zip file so if you're interested you can directly

purchase it and now in the next section guys we will start building this project step by step uh now guys we will start

building this project so I'm basically here in my project directory I will open

the command line here and I will simply make a new directory I will simply call this as passport Google

login I will navigate into this directory and simply open this inside

the vs code so you will see that nothing is present we are starting it from clean

slate so the very first thing we need to do right here guys we need to make a package.json file by invoking this

command which is npm in it- y this will actually create a package.json file

you'll see that so now we need to install some modules first module will be Express

which will be the backend server the second one will be the passport Library which is the base Library for invo doing

the Google authentication system and then we have the passport Das Google D

o20 this is actually a strategy in passport passport actually contains various strategies for implementing

different authentication one such strategy is password Google authentication 20 which is specifically

made for Google authentication system and then we need to connect my SQL database in noj application we are using

my SQL to package for that then we are using Express Das session which allows

you to actually store your information in sessions in cookies in user browser so that when they are actually closing

their browser and again open the browser then the user must then the user login is stayed in the browser so we are

actually storing information in sessions so that's why we need Express that session and then we also need need

Express Das MySQL D session this package is specifically made for mySQL database

to actually store the session information inside my SQL database so

this package automatically create that session table that you saw in the demo video this is required and then lastly

guys we need EnV which is used to actually store uh information which is

very crucial to you so file will create it so this package is required so just

enter and it will actually install all these modules inside your package.json it will create a node modules folder

once the modules are installed you'll see that now it has created this node modules folder so this is actually the

package.json file you will see all the modules are installed EnV Express Express MySQL session Express session my

SQL to password password Google o20 so we have successfully installed it now

we just need to create the basic index.js file which will be the starting point of the nodejs application so right

in the root directory we do need to create EnV file guys which will actually hold us all the information that we need

for this application first one we need the Google client ID you can call this

variable anything but we are just calling it like this Google client ID we need

Google client SE we need all this information will be I will be showing you in the next section how to get this

and then we need Google call back URL as well DB

host and DB password DB username as well we need DB

password and lastly we need the secret key of the session so session

uncore secret this you this you can call it anything this you can provide any

random value I will just call it at my secret this is this is required for just

having your session you need to just provide a secret key so this needs to be unique if you are developing it for

production you just need to generate a very long random string and equal to so

after you do this guys just put all these values in double quotes just to make sure it's a string value so if

you're developing uh as you can see I installed this Apache exam control panel which is actually a

crossplatform software so it comes with PHP which it comes with mySQL database so you can

install it click on download exam and install it for your respective operating system Windows Linux Mac I've already

installed and started this go to PHP my admin and here you can see that you

actually need to create a database by clicking this button I've already have a database right here so what I can do is

that let me show you how I did this so I can delete all the tables from here drop

table users and also drop this table as well so I'm just

writing a SQL statement right here drop table sessions so you will basically now see

there is no tables in now this database this database empty so now we need to create a data uh table right here in

this database users DB so let me just uh give it the name of

the you also name need database name as well so database name DB name this will

be users DB this is database name password is by default is nothing in

exam control panel Local Host environment the username is typically root if you haven't changed your us

username so by default username is root and this one will be Local Host because

you're developing it inside local environment this is Local Host the default

values so if you haven't changed any values these will be the values you can just uh write these

values and then these three values that you see right here we need to now go to Google Cloud console and actually get

these values so so just you need to go to Google Cloud owns console you just need to

create a account right here you should be having a project right

here uh already have some projects and right here simply click on this menu

option and here if you see you will actually see a option of

apis and services go to credentials the third option and right here you need to

go to the third option where you see create credentials and the second option

o o client ID you need to click on this option and then you need to create a

client ID so this web application type is web application because we are developing it for the web so simply

select this option and here inside this authorized JavaScript Origins we are

developing it on Local Host so you just need to write HTTP sl/ Local Host

followed by your port number so I will be developing it on Port 5,000 so I will

simply add this and then the call back URI so typically call back URI

for passport will be this one if you see this will be the call back

URI sl/ gooogle SL callback so this is specifically if you are using passport

if you go to their documentation they also show you that this is required

whenever you need to authorize redirect urri so redirect URI simply means that

whenever you grant permission whenever you click the allow button where should

the Google redirect you to your inside your application so in specific terms uh

pass would have this directory structure sl/ gooogle callback right here I will

just change this value to 5,000 click on create so now it will create your your

client ID and client secret so you just need to copy this information client ID

and the client secret this will be different for you so don't copy my

information and just copy the client secret as well just make sure that you put double

codes right

here so this is the client ID client secret that we got and then

the the same call back URL that you are using right where you copy pasted SL

all/

Google this is all that we need to see guys so just close this file now we will

basically start our uh basic Express app so just inside this we need to just

require the Express module right at the

top and we also need to import the password module as

well and uh we also need to import the Google

strategy which is we have installed this module as well which is password Google

o20 so dot strategy you just need to import this right

here so here we are just importing all the modules and my SQL we also need to import it so my SQL

to and then we need to also import the session module as well so this will be

Express Dash session just import that and then the my sqls session as well my

SQL store let me call it then we need to require it express my squel

session lastly we just need to also write just type casted to

session and lastly we just need to require the EnV module that we installed do

config like this that's all these are all the modules that we defined guys we installed it we are requiring it at the

very top we will use it so now we just need to Simply start Express app

listen this application on Port 5,000 and the call back we simply say that app

is listening on Port 5,000 so you will see

that if I just start my application just type here node more

index.js you will see this message appearing on the screen app is listening on Port 5,000 so

now our app is starting we just need to set the view engine ejs we forgot to

install this Library guys you will get an error right here if you just see I

think just install this module as well npmi EGS so and

then again start EGS actually is a template engine which allows you to

actually pass variables inside your HTML template so it stands for embedded JavaScript templates just create a views

folder and uh typically EGS store index

all the templates in the views folder just call this as index. e ejs this is

the actual temp uh extension of it and right here you will write HTML code so I

will simply change the title Google login and log out

system so just say H1 hello world so now how to show this on the

screen we will simply write a simple route [Music] app.get request response and you will

simply say right here response. render index so what you will now see if you

navigate to Local Host 5,000 you will see the hello world message you will see that so up till now

guys we have configured all the stuff right here we have configured the EnV file we written this much of index.

ejs now the next step is that we need to actually create the table and create the

database connection and now we'll look at in the next section uh now guys we'll be creating

the tables for storing the data uh just navigate to your PHP my admin and

uh here I will simply create a table so we have

actually created this table uh database right here you will see users DB and

inside this just go to the section right here which is the SQL section where you can

actually write commands to actually create tables automatically so here we

will actually create this uh this actually have create

table so create table followed by the table name so I will call this table as

users and set up curly bracket and inside this cly bracket you just need to

mention what information you want to store you'll be storing ID of the ID which will be the primary keys will be

integer and auto increment it will automatically be incremented whenever

the record inserted and the primary key

primary key put a comma so this is the first record the second record will be

Google uncore ID so this will be VAR charart which is variable character and

the length of it will be 255 and uh it will be not null the user

must have a valid value and it should be unique so these are validators right

here and uh after that we will be having the

display uncore name property where we will actually stor in the name of the

user again this will be varar 255 correctors not

null and then we come the email again it's varar 255 corrector limit and then again

not null and the email should be unique so only one email must be inserted

duplicate emails are not allowed the second the next field is photograph of the user so photo

so again this will be warar

255 and the next field is guys for the time stamp so time stamp is

basically whenever the record is created so it's a Time Value so put a

comma so created underscore at so it's actually a time stamp default value will

will be the current time which is the current time stamp put a semicolon right

here so I think sorry this is not curly bracket

this is parentheses sorry that's why the error is coming this is not par uh curly

bracket is parenthesis you will now see no error is now there this is the ID we

are storing Google ID display name email photograph and created ad so these are the fields

so there is a go option right here if I click it the table will be created green

option will come and you will basically see the table has been

created so if I show your structure right here guys which is ID is the primary key this is Google ID display

name email photograph and created at now we need to actually connect to this

database and this table so we will write our connection

code so just write here we will simply write here uh create a

connection to the

database and you will basically call the my SQL to my SQL module it contains a

method which is create connection and right here is set of call brackets

you'll pass you'll pass this information host name you will be coming process. EnV whatever that we call that dbor

host and the username which will be coming again from the process do. EnV

file dbor user

password process. env. dbor password and

actual database so process. EnV do DB name so

after you basically provide all these values which are storing it a EnV file

and uh there is actually a method called as in this object DB which is

connect so once you call this method you can have a call back function

and if any sort of error take place in connection we can throw that error or we can simply say to the user

that uh connected to my

SQL database so if you just uh see right

here again run this application you will see this message

coming here right here connected to my SQL database so now you connected to

database now we can actually make queries as well so the next step guys we

need to actually create this sessions table as well because only a single

table is present right here but we do need to create a sessions table for creating that sessions table we need to

Simply write a simple line of code so for this we just need to create

a variable session store and new my SQL store and we just here we need to Simply

pass inside first object is empty object curly bracket and pass the connection

object that's all if you see we are importing it this my SQL store from

Express my SQL session and passing this session right here you will see that this is Express

session passing it as an argument and then we are initializing this MySQL store passing an empty object and the

second object is the database connection so right what this it will do we do need

to create another pass in middleware which is the this session that we created and this takes quite a number of

values first one it takes is a secret key sorry

uh AB use and write here

session and now it takes actually the secret key see secret key can be coming

from the process. EnV file EnV file whatever we session is secret then this

next one is uh resave so it actually is a Boolean value resave I will put at

false save uninitialized to I will put it to True these are default values just need to

copy paste these values and then the store value and here we'll put the

session store value that we put right here and then comes the most important

thing guys the cookie information the maximum age of the cookie here you can

set right here max age so I will be storing the information in the user Brower browser for one year so it is in

seconds is 365 multiplied by 24 ultied by 60 multipied by 60 and multip it by

1,000 because we need to convert this value into microc seconds this is

actually the time period for 1 year in microc

seconds so that's all guys that we need to do right here and then we also need to pass two

more middle wees first one is the passport to actually initialize it and

the second middleware will be to actually passport. session we need to initialize the session of the passport

so once you do this guys that table that you see in the sessions if I just

refresh now restart the

application and try to open this application Local Host

5,000 and if you just refresh you will now see guys the second table is also being created this is

actually the sessions table we haven't created this table it is automatically created by that and automatically a

entry has been there session underscore ID and it expires after one year and

this is actually the data original max age expires this is actually a data of the cookie so in this way guys this

Library makes it possible to actually create the session table to actually store this information so now what we

need to do we do need to uh actually first of all do the

authentication so right here what we will do right here we initialize

passport do use and we will actually be initializing a new Google strategy that we imported

and right inside this strategy guys we need to pass this object which contains

three properties the client ID which will be coming from process. EnV

Google underscore client ID the second one will be client Secret process.

env. client

secret and the third value will be call back URL which will be process. env.

callback underscore URL so we are actually passing this object guys which contains three three

values and we need to put a comma because this actually returns a call back function once you do this actually

Returns the token access token the token secret

value and the third value is the profile and the done call back it's a call back

function having these four values so right here we can simply check if uh

user already exist in our database so basically

whenever the user grants a permission we will actually check if it a new user or if it's a existing user so right we will

simply query the database right here so we can actually use the database connection variable DB variable to

actually cury the database or cury the table so right we will write a simple

SQL cury which is select all data from the users table where we are putting a

condition right here where this value Google uncore ID is equal to question

mark and here you need to put the placeholder value which is

profile dot ID so we actually are getting the ID

which is actually the primary key if you see the users table the ID is actually

the primary key which is unique every time so we are actually targeting this value to actually get the user and what

it will do it will put a comma and it will actually return the data to us which is error or is

results so here we can simply check that if any sort of error take

place then we need to return that error return done

error and then if the results. length property is greater than zero in that

case we do need to return done

null results zero so what this means guys basically

it is checking that if the user is already present with this profile so this property will be true if the

results. length is greater than zero so in this case if condition will be true

so here we actually say the user already

present so user is already present so that's why this condition evaluates to true in that case we will return done

null as a first argument and the results. zero or in the else case if the user is

not present then we need to insert them so what we will do we will create a new

object right and right here new user so we will put these values which

is Google ID which will be coming from profile ID

and all this information that you see which is display name email address photograph you will be getting this

information display name profile dot display and name and then the email

address profile. emails Z do value and the

photograph profile. photos 0. value so

we actually constructed this object

this new user now we just need to insert it so for inserting it we again use the

DB cury method this time we'll use the insert statement insert into the table

which is users we set question mark so here we need to provide the object the

new user and then again the call back

function so right here guys we will simply again check if any any sort of error take place then we just need to

return that error if no error take place then we simply say new user. ID is equal

to results do insert ID so this is actually the primary key we are setting

it new user ID is equal to results. insert ID and then we simply say

return done function null as the first argument and new user as a

second this is this is actually the setup guys you do need to write this code whenever you are implementing

passport Google authentication we are assigning this Google strategy we are passing this object

which is containing the client ID client secret and the call back URL then this after authentication flow this returns

this access token token secret profile data object we only need the profile

object where we actually get this information which is the ID of the user display name the email address and the

photograph we get all this information and we are simply checking if the user already exist or if the user is a new

user if the user is a new user then we are simply inserting it into the users table so this much we have

done now what we need to do we need to Simply write conditionally

so we need to pass two properties right here first is the title of the page

which let me say is a homepage and the second property guys right here we need to check

conditionally that uh request in the request object there will

be this property called as is authenticated already built in because we are actually using passport Library

so this simply Returns the value if the user is already authenticated if the user is already logged in or not if the

user is not logged in you'll use this stary operator question mark if the user

is already logged in then we will simply pass the user which is located in request or user

if the user is not logged in then we will pass the value of user to be null this is actually Turner operator guys

here we put the condition if the condition turns out to be true then we put this right here if colon followed by

the condition not true like this so This is actually Turner operator in programming so here we are passing this

user object we now need to render this index template index.

EGS and we also need to write for this to

work for this to you work right here passport. use Google strategy we do need

to write these two get requested I forgot to write it

app.get so whenever the user will go to this request SL SL call

SL SLG gooogle SL callback this will be the call back request when the you have

actually granted the permission

so first of all you will we will redirect the user to this request which is/ o/g Google and here we will pass

this middle Weare password. authenticate and we are authenticated for Google and

here we will actually provide the scope scope will be right here we will be

requesting the profile information of the user and the email address and uh after

this that's all that we need to do right here if you just format this so we are

actually redirecting the user to SL o/g gooogle we are requesting this passport.

authenticate Google and we are requesting these Scopes profile and the email so after you do this we also need

to write this call back request as well app.get //g gooogle

callback so whenever you grant the permission this will be the actual request will take place password

authenticate Google once again and here we actually have the failure redirect if

the actual authentication is not successful in that case where the user should be redirected to we need to

redirect it to the homepage if the request is not successful if the request is successful in that case uh we have

the request response and here you will redirect again the user to the homepage like

this you can have a custom route as well where you can actually return them to the error message but we are for the

time being we are only redirecting it to the homepage if the request is not successful this is actually the call

back request right here we configured this call back request if you see in the

file //g Google callback so this is actually the same request //g gooogle

callback now we just need to write our index. ejs

route so we do need to include bootstrap guys right here so I am using bootstraps

just after the title paste the CDN you will get all the source code you can purchase the full source code with full

documentation the link is given in the description and we will simply embed the

title the title variable that we are passing dynamically in EGS using the

syntax if you see we are passing this title property which is homepage it will

get inserted inside right here and

uh we also need to import bootstrap JF CDN and jqy CDN as well

after the body past the CDN of both them both of them so we also need the CDM for J cury

as well so what I will do I will copy this

also so jQuery and bootstrap JS CD as well

so so we are actually passing this user object if you see guys in this template and we will simply conditionally render

out if the user exist or not so for this we will use the container class of

bootstrap and right here we will basically check in this if condition if the user exist or not if the user does

exist we will just wrap all this with this brackets eegs so it is a

conditional logic that we writing us an embedded JavaScript template EGS file so if the user does exist in that case we

will basically display the profile information but if the user doesn't exist in that case we will actually have

a else

block like

this so if the user doesn't exist we will simply write a heading

user doesn't exist so what should be the value guys right here just

see user exist so just predict what will be the value H2 or H1 if I just refresh

the application go to Local Host 5,000 so you will now see guys this

value is printed out user doesn't exist because we haven't logged in that's why

the user comes out to be null right here this value comes out to be false that's why we put null here and that's why this

else block execute so we do need to actually redirect the user to that

authentication page where the user can log in for doing that we will be having

a model and uh we'll be giving an ID to it

of authentication model we're giving some properties to

this which is T index minus one Ro will be actually a dialogue

box and div model dialogue model dialogue centered these

are all bootstrap classes guys role will be actually of

dialogue and then you model content whatever is the content inside your

model div. model title

this is actually a very basic model of bootstrap we can write a Logan box right

here if you just refresh right here it will look something like we do need to

actually write some custom CSS for this uh we need to Target this

uh model backdrop class just write the

CSS paste it uh just we need to w W this

uh inside the style tag model we have just simply giving a background color

model backdrop now to show this model box we actually given this ID if you

see uh authentication model if you see we have given this ID right here to this

div tag now to show this on the screen we do need to write some custom JavaScript uh so in the document ready

function of jQuery uh when the it has been loaded all the elements

so we will actually Target the model by its

ID we will simply say here o

model and model and simply we'll say

backdrop to be static and keyboard will be false

and then you'll simply say here Au model and model to be show so it will

actually show the model dialog box with this property if you just refresh now

you will actually see this model box and a black shadow as well uh so the size is

login right here so what we need to do right here uh

model title so this needs to be an H5 tag

H5 so you'll see that H5 it is div uh I think we some made some mistake

right here um this one model

model dialogue model dialogue centered role is equal to document not

dialogue it's a document and the div class model content

then is model header sorry mod model title model

header and then inside that this needs to be div this is model header and

inside this we need to Define the H5 tag which will actually have the class of model

title which comes out to be login so now if you

refresh like this now it will look something like this you can even Center it as well if you are have a class which

is you can just write here text Center

so after you do this uh we do need to have

another the model

body and uh text

Center so so inside this model we just need to have a simple anchor

tag AHF and it will navigate to// Google

I will say class BTN BTN primary and you'll simply say login with

Google so what it will say guys you will see refresh and there will be a button out there login with Google so that's a

button and that's complete the model and if you just click this button what should happen it will navigate to the

sign in page and it is saying that it is missing the required parameter which is redirector

URI if you are a developer of project invalid request uh I think I made a mistake guys

right here let me check in

the just wait guys I will come to the next section I will tell you the mistake uh guys I've just made a very silly

mistake if you go to this index.js file right here whenever initializing Google strategy if you see the client ID is

correct we put here Google centore ID if I just see EnV file we are underscore

call Google client secret Google uncore callback URL so but if you see right here we forgot to put Google right here

Google uncore client secret and Google uncore call back URL so this is a case

guys and now if you refresh click on this button it will redirect to your

account screen where you can actually select your account and click the allow permission

so now it is working guys and one more thing that is remaining in index.js file

guys we do need to deserialize or serialize the user using passport whenever you grant the

permission this process will automatically take place so right our after whenever you imported this

passport Library whenever you initialize the session we do need to write the code for serializing and deserializing of

user so if you don't do that because you will actually get error you will not get your user object this is really

important this is the actual passport code this is actually the serialized

user and uh user done

and you just need to call the done function and user do ID that's all and

then for desizing the user password. deize user and again we'll get our ID

and the done property and here what we need to do we need to insert this user we need to

Simply select the everything from the users table where this ID

that we get we'll pass this ID right

here we'll basically get if the if this user exist or

not so if any sort of error take place we will simply

throw this

error and and here we'll simply have a if condition that if this user already

exist if the user length double equal to zero if the user doesn't exist in that

case return done null false because here the no user

found return false so here we are doing this check if

the user is found then we will simply done null results zero this is important

guys you do need to write this deserialization and serialization now you can do this process uh you can

actually refresh your application click on this button and select your account

so once you select your account you need to Grant the permission so click on continue so it will redirect to the user

and now now if you see user exist because now the user has got some object

values if you see uh we actually have this index. DJs now this if condition

turns out to be true because user is actually logged in so now it is actually printing out this statement which is

user exist so if you also check your user table as

well you will actually see if I refresh go to the browse option you will

actually see one entry has been automatically been added guys you can see coding sixa this is the email

address this is the actual profile picture and created ad so now we just need to display this information on the

screen guys Google _ ID from the table it contains inside the user object

and uh the sessions also have this object as well if you see so if

you so this is Local Host 5,000 we need to Now display this information on the

browser instead of this user exist so what I will do

just right here we need to display the

information so we will again use the model we'll give it an idea of O

model tab index minus one and Ro is equal to

dialogue so now we just need to display this

information uh so for displaying this information model

dialogue model dialogue centered and the role will be of

document

H5 and you'll give it a class of model title you'll say user profile so here

you will display the user profile of the user if you just refresh it will look something like this

so for displaying the user profile uh we got that user object and inside that

user object we have different fields we will have model body and text

Center so first is the image we need to show the profile picture so this will be coming from user.

photo and uh we just need to give it some bootstrap classes to it which is of

uh rounded circuit

and we need to give it a fixed width of 100 and a height as well of

100 so if you just refresh now you will actually get this profile picture nice

little profile picture and uh after this guys what we need to do we

need to actually show the display name of the user so we can

display user. display underscore name so we are

displaying it this information if you see in the index.js file whenever we got the user

we inserted it and we actually got this information we call this as display underscore name email and photo so we

are actually displaying these values you can see display underscore name and uh you can see photo so whatever we called

it we are displaying it and and then the email address as

well which is present in the email variable so

user email so if you refresh

now you will see that and lastly guys we do need to have

a log out button as well so we'll simply have

a/ log

out so as I click the log out button we should be redirected to the homepage so

we just need to go to index.js file and just write this simple log out request which actually is very simple passport

does have a passport Library does have a built-in method for log out app.get log

out request response and this we will use the request. logout

function which is available to us and after it we will simply check if any

sort of error take place we will throw that

error or we you can simply say return

next request. session we need to delete the session variable so request.

session. destroy we will destroy the session once the user is log out and

uh and then we'll redirect the user to the homepage that's all you can see that

we are calling log out function of passport and then we actually destroying the session and redirecting the user

back to the homepage that's all that we need to do guys in this application if you just refresh click on log out if I

just close this window and again open it because the user is processed it it will

again detect the user is already authenticated it will redirect Local Host 5,000 sorry it will redirect me to

the profile page you will see that if you close the browser as well again open

the browser as well then also if I close the browser and reopen the

browser again go to Local Host 5,000 again it will see because we have

actually embedded this information in the user browser for actually 365 days

but if if the user clicks this log out button then the user will be deleted and

the cookie information will be deleted so if you again open Local Host 5,000 that information is gone it is no longer

present so this is actually the system guys again if you click log in with Google now it will redirect to

automatically don't need to go to that auth authorization flow so you can do this for any account

you can do this for this account as well again the same Pro if you're doing it for the very first time then you just

need to go to the authorization flow select your account once you are done then it will remember you just need to

continue and you will see that uh the link is given guys if you want to purchase the full source code of

this project if you are interested uh full documentation with

source code will be there for you and uh in in I will also support you as well

if you have some doubt as well the link is given you can directly purchase it from Pro Cod store.com after that you

will actually get that source code from Google Drive after you make the payment thank you very much guys please hit that

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