Build a React.js Passport.js Google OAuth2 Login in Express.js With Sessions & MongoDB in Browser

uh hello guys welcome to this video so in this video we will actually build out a

reactjs nodejs Express password JS Google login system

so Google o or2 login system and uh we will be actually be storing the users

details in mongodb database So currently you will see this is actually the database right here and we actually have

a user table which is currently empty nothing is present right here and we

also got a sessions table as well which is actually storing the sessions details about the user we will be storing users

in the sessions and let me show you the demo of the application it will be running on Local Host 3000 this is the

react CHS front end and it is will be calling the back end of Express which

will be actually be interacting with the back end so this is actually the back end stuff which is present in nodejs and

express and this is actually the front end of the appli which I coded inside react CHS so if I

just show you there is a login with Google button right here we have used tail CSS for the UI of the application

if I click this button I will be logged in successfully with showing the profile

picture display name email address and the logout button if I just refresh now there will be one entry added in the

users table you will see that this entry is successfully added with the Google ID

display name email Emil address profile photograph this is actually the full link of the profile photograph this is

email this is display name this is Google ID and primary key is automatically been

inserted so you will see that so also if you close this browser here if you close

the tab and reopen it once again it will automatically detect you are already logged in so it will redirect you to the

profile page you will see that if you also close the browser again open it if

I again open it it will again so if you close the

browser then you just need to click login with Google so if you just close the tab right here again reopen it then

it will actually detect that you're logged in so you can do it for any account if you're doing it for the very

first time

so if you're doing it for the very first time it will show you this consent screen where you need to select your

Google account you need to allow the permission simply click continue and now a second entry will be added so if I

check the database in the users table there will be two entries out there if you see so there is a second entry which

is added automatically so if you see the sessions table

uh there will be two indexes which should be there

so this is actually the thing we also have a log out button if you click log out you will be redirected back to the

homepage if you now close this it will detect that you are logged out so it will show you the login page so you can

now log in log out so this is a simple application we will be showing

you it's a full stack application we will be showing the how to code the

front end in react Chase and the back end in nodejs and express and on top of that we are actually using passportjs

which is actually a open source library for authentication for various providers

it provides you specifically we will talk about Google right here it has various strategies available about

500 plus authentication strategies it's open-source Library so we will be using

this password Google oo package for implementing the Google o strategy for

passport JS so we will be using this and uh so all the source code is given guys

in the description you can directly purchase the full source code uh with full directory structure and documentation so the link is given you

can go to procore.com after you purchase it you will be redirected to Google Drive where you can actually download

the zip file so the link is given in the description you can directly purchase a full source code so now let's get

started guys by building the this application so I will be seeing you in the next section so now to get started

guys uh we will start building this project so I'm there inside my working directory so I will simply open command

line Here and Now to create react Chas project we will actually be using this V

development environment which is actually a very good Next Generation front end tooling system and it is

better than create next app it takes less time in creating next Chase or

sorry react Chase project and installing module so I will use this so there is a simple command out there in order

to instantiate a new react Chase project so just npm

create vit V at theate latest so you'll use the latest version of v and then you

need to give the project name so let me give here react o to login this is the

project name and then you need to also so specify the template so we will be

creating a react Chase project so specify the template D- template react

this is a command mpm create V at theate latest followed by the project name--

template react so if you just enter it it will actually create it will say to

you that install this create with package so simply press Y and now it

will ask you which project you want to create so I will simply select with the

drop down react project so it has created scaffold the project I just need

to CD into the project directory and then run the command npmi

so this will install all the packages of react so this is really fast as compared

to the official react create create next create react

app so I found this to be very you can see it is completed so we can now open this directory in the this is

actually a basic react Chase project and uh you can basically run this by using

npm run def so this will start the development server which is hosted on

Local Host 5173 you can just go to this and it will show you this homepage of

vat so you will see this is actually the demo app that they provide you so now we

can uh edit this uh but first of all we need to install some modules right for

the react CH front end we need xio module to actually call the backend API

to make API request and then we also need the react router Dom so our

application will contain some routes so that's why react router Dom we need to install and X xio Library as well so

simply install these two packages and that's all that we need to do for the

front end now we will create a new folder inside this I will simply say

this a backend so a backend folder will be created so I will just instantiate a new

package.json file by invoking the command mpm in it- y so this will create

the package.json file so now we need to install the modules for the backend API

so this will be first of all we need to install uh connect

so this is responsible this package is responsible for connecting

your application to mongod Deb database this is actually a driver and then we

have course module which is responsible for accessing for enabling the API to be

used by different front end so cross origion resource sharing so then we are

have our Express backend server and then we also need to use express

session so these are the two express is the backend Server Express session is

will be storing the information inside Express session and then will be

the actual orm we will be using to actually interact with the mongodb database to

actually save the data or get the data from the database so this is the library

and then we use the passport library passport

and passport Google or

or20 so passport is the base library and this is the actual strategy for

implementing the Google o20 authentication so this is actually the strategy so simply enter it so this

will install all these packages in the package.json file so it will hardly Take

5 to 10 seconds and it will install the these packages so now it is installed if you just check right here in the

package.json file in the backend folder if you see all these packages are installed with the latest version and

now we can actually create our index.js file the starting point of the application so in the next section guys

we'll start coding the application so now guys first of all we will actually be building the backend server in nodejs

Express and then we will later on build the front end so right here in the index.js file first of all we just need

to import all the packages that we installed right here first is the actual Express package the back end server we

imported now we just need to make a simple Express app like this and we'll

start this app on 5,000 port number so we can simply say a message that app is

listing on Port 5,000 so also we need to import all

these other packages as well right right at the

top so the package which will be responsible for communicating with the

mongodb database the passport package as

well and then we will be also be including this Google

strategy which will be coming from the passport package so passport Google o z

and it basically contains this dot strategy and from this we will be

instantiating this Google strategy and also we will need to include the session as well which is actually a middleware

of Express session we included installed and

also we also included connect this is actually a

store and then we lastly we allow the other front cont to actually use this

API so that's why we'll use this course module cross original resource sharing so first of all we need to implement

this course origin course configuration so we need to allow the

other front end let's suppose we are accessing this API from react CHS front end or any other front end so we just

need to allow this API to be accessed without this course you will get a cross

origin error in the browser console so you need to enable the course right here

so you can simply do this using this middleware app.use and then we will pass

this middleware like this an option origion option so you will only be accepting request coming from this

request which is HTTP Local Host 5173 and this is a react app URL and

credentials you need to set it to true so this simply means that only

accept request coming from this U URL and credentials is true so we will

only be accepting these URLs coming from this front end only so this makes your API more secure no third party website

can use your API so this is actually meant by course cross region resource sharing this is really important and

then we need to configure the mongod DB connection as well so I'm using the mongodb at last you can see that mongod

DB Compass this is actually a good software which available for Windows for free so I'm there inside my machine so

here you just need to create a database right here so I will create a new database let's suppose uh react

O2 login and I will just you need to just create a basic collection name so

just to create the database so now the database is created which is react

oo to login so I just need to provide this database name while we are connecting so we'll say

do connect so we have this URL which is mongodb

Local Host the port number which is 2717 this is a default port number for

mongodb database and react go to login this is our database

name you can just cross check react o or2 login so this is our database name and

here we need to pass some options right here first option is use new URL parer

to be true and use unified

topology to be true so after we do

this if you run your application just try nodeb

index.js so the application will run on port number 5,000 it will give you a

message so it is saying that option UniFi topology is not supported so you

can eliminate this option remove this option with I think with the latest version of

Express so you can see that now the app is listening on Port 5,000 and the database is also being connected so now

we just need to specify the schema what sort of information we will be storing in the table so specify the

schema so right here we will say user schema so just make U Capital user

schema and new and in this

module we have the function schema and right here we need to provide an object

here so what sort of information we be storing so we will be storing Google ID which will be of typ stream and we will

also be storing the display name which will be the usern name of the user logged in user which will also be of typ

string email address which will also be of typ string and the profile

picture profile photo which will also be of typ string

this is a schema and now we just need to create a table using the schema so create a collection

using the above schema so now we do this we will simply say const

user mongus it contains a method called as model and here we will specify the

schema sorry collection which is a table which will get created using the schema which is user schema that's all so now a

table will be created using four columns Google ID display name email and profile

photo and after you do this we now need to configure the

passport for the Google login so here we need to include the middleware passport

use and we will be using a strategy that we imported new Google strategy and here

we need to provide the client ID and similarly we need to provide the client secret as well client ID and

client secret and the third one is call back ql

so this will be slops SLG gooogle callback this is constant for uh

passportjs so you should re just use this callback

URL only so this is constant SL all/ go/ callback and the these two information

client ID and client secret you will get from Google Cloud console so just go to Google Cloud console and create an

account right here so I already have a account here

so I will simply go to the console and just go to API Services go to

credentials and just click on this button o client ID

and select your application type to be web application and here you need to provide

authorized JavaScript Origins to the homepage of the URL which is Local Host

5173 this is the homepage so here you are

expecting uh sorry we our backend server is

listening on uh Local Host it is starting on Local Host 5,000 so you will

basically give the address of your backend server not the front end so Local Host

5,000 this will be the homepage URL and then the authorized redirect URI you

will simply pay the address which is o/g gooogle

callback sl/ go/ callback this is the same thing that we just written right

here if you see sl/ gooogle callback so after you do this you can simply click

on create it will give you your client ID and client secret so this will be different for you so don't copy my

client ID and client secret so I will simply paste it

so after we do this it's very easy now so just here put a comma

and Asing function will be there and we will actually after we do this we will get our access token refresh

token and the profile of the user and a done

variable so this is is a call back function right here after you provide this information in this middleware in

this Google strategy it returns you access token refresh token profile and

done just format this so right here in this function we

will in the TR catch

block we will basically get the user a wait so

user and it contains all these methods you can find by ID find by all this you

will find the user by its Google ID so Google ID is equal to profile.

ID so here we will simply compare that if the user is found out then we just need to return that user null user if

the user is not there in that case we will say user is equal to new user and

we will be just having these details which is the Google

ID is equal to profile.

ID and then we have the display name property which will be profile. display

name then we have the email address which will be profile emails it's a

array so so we will get the first value first email address and the profile

photo profile again it's AR so photos zero and we'll get the first

photograph of the user so in this code guys it is very simple we are simply checking if the if

the user is already present then we are simply returning it if the user is new if the user is authenticated for the

very first time then we are inserting it to the database we are instantiating

using this user model class you can see this is a class here we are creating a new object of this class and

basically just inserting the Google ID display name email and profile photo and

now to save this information to the database we will use the await the save

method of so this will actually save this information and then we will

return the user null user that's all so that's all that we

need to do and if any sort of error take place we can return that

error so that's all that we need to do guys for the passport configuration and one more thing we also need to assign

these lines password serialize user user done these functions are necessary you

need to write them these functions in conjunction with the previous code user

ID and also password. deserialized user

async ID done so just copy paste this code

whatever code I'm writing right here you will also get the code if you want to purchase

it await you will find the user by the

ID and then done null user so this code is constant guys uh you just need to

write this exact V exact code that I'm writing right here this is just a setup for passport

so you can see that and after we do this now we can

actually configure the express session so we'll be basically be applying this

middleware so this session that we imported early on if you see at the top

we are importing this session from the express session middleware so now we just need to assign

this middleware so this is important because we need to just store the user inside

the Google in the browser of the user so once you are logged in the application will remember you

whether you are logged in or not so that's why this session is important

if you if you don't write this code then every time if you log in again if you

close the window again you need to log in once again so that's why session is important secret key you can assign any

secret key resave value will be false and

uh save uninitialized to be false these are all constants values store we need

to store the session value in store create and it will have actually create

a URL where it will actually store all the session information mongodb Local Host

270 and here you need to provide your database name so whatever you give react

o to login so just cross check this you have

given the same database name right here also so I will just copy this value and

paste it so this is you it will also create a sessions table and it will

store the session information in that session table and then lastly we just need to apply these passport we need to

initialize this call this function and also passport session as

well these two functions first of all we are initializing the base passport library and then the session method as

well so that's all that we need to do guys and in the back end and and one more

thing we also need to configure all the routes for the Google

login so the very first route is when someone goes

to// Google so we will be authenticating password.

authenticate Google and here we need to provide what

Scopes that we will be referring to so we we will be providing the profile scope and the email

scope like this and then we will also be handling the call back URL

/ so whenever user Grant the permission so this will hit the URL and we will be

authenticating it passport. authenticate Google and also there is a second

argument for the failure if the authentication is failed so what

URL the user will go to so this is actually the URL let me explain to you

what is happening in this so it is hitting this call back URL so whenever

you grant access to your Google account so Google will try to redirect you to the react CH homepage this is HTTP Local

Host 3,000 not 5173 sorry so here our reacts app will be resding so when

whenever you are successfully authenticated you will be redirected to the homepage if it's failure then we

will redirect to like this you can even have a 404 page as well if you are uh

failed in authenticating as well so we will be using the passport. authenticate method and providing here this is Google

provider like this so one more method for the log out functionality if you

want to log out we will write this method hot/ logout

so request. logout so it's a log out method available in passport if you want

to log out if any sort of error take place we can

simply so like this and then lastly we'll redirect the user back to the

homepage 5173 so this is actually the backend functionality guys it is complete right

here now in the next section we will be writing the front end functionality in react CH so I will see you in the next

section so now guys you will be writing the front end of the application which

is react so in the last in the last section we return the back end of the app so just make a slight modification

right here you can see you will get this error which is route. get requires a call back function so in this line we

just made a mistake right here SL out /g Google so here you just need to remove

this parenthesis

and so this is it will be closed right here cly

bracket I think the correct version

is let me paste the current code so just make this slide

modification so now you will see no error is there so your app backend server is listening on Port 5,000

so so after we do this we just need to go to the front end so this is

our app do TSX so this is in typescript if you see you can even rename this to

JavaScript as well app do JS so I will simply remove everything

from here and uh start from scratch so RFC so it's a functional

component so you will be declaring a state

variable here so this will be for just keeping track of the user the initial

value will be used State we'll use this hook initial value will be

null so here we'll be using the use effect hook which comes in

react so in use effect it basically runs every time your component

mounts so it will only run for the very first time we have providing this empty par empty brackets right here this

simply means that this only runs for the very first time

so here we just need to get the user and here we'll be using

the AIO Library so it will be imported from mxus that we installed early on it

contains a get method and here you will be just HTTP Local Host 5,000 this is

our backend API address SL API SL user so this request we haven't written in

the backend API so this simply Returns the user so here we need to provide with

credentials to be true so it will actually return a

promise and it will actually have the response here and we can set the user

based upon the authentication status whether the user is logged in or not response. data so

here we just need to make this request which is uh / API SL user this will

simply return the status of the user whether the user is logged in or whether

the user is logged out so this is very simple

request it will actually return in the form of Json if you just go to index.js

and right here at the bottom side I can just explain you step by step this

request so just make this request app. get/ API

sluser so here we will simply say if request do is authenticated is comes out

to be true in that case the user is logged in so we will return the user as a

Json request. user in the else block the user is not

authenticated so response. status 401 Json and we can basically pass a

error message unauthorized

so this is a simple request we are checking request is authenticated if it turns out to be true then we are

returning the user or if it is false then we are returning 401 error

unauthorized so right here uh you will get a response if you try to open this

application in the browser so just also open a new command

line window and start your react CH application

so now it is running on Local Host

5173 so you can see that guys it actually tells us that the user is

unauthorized because no user is present right here no user is logged in so that's why it comes out to be 401

unauthorized so the application is

working so it is doing its job and now what we need to

do based upon this we just need to create some

components so right here just create in the source directory create a fold called as components and create three

components first is the login button the second one is the log out

button and the third one is the profile these are jsx components right

here if you see and uh we will just like this RFC

so all these components have been initialized and right

here go to the public folder uh we need to include uh Tailwind CSS for

this so by default I think tail is included

so right in the index HTML you can include the CDM right here just after the title paste the CDN for Tailwind so

just Tailwind

CSS so this is the CDN for Tailwind simply copy the script tag after the title

paste it now you can use tailent so right here we will be using Tailwind

class container MX Auto

mt8 so here we will simply say if the user is logged in and in that case we

just need to show the profile

so we have defined this profile component right here export default

profile we need to show the profile component so what I will do I will

import this component right here

so what I will do just rename this to TSX I think just

so you can see that so import login button and uh

import log out button so we have imported this and now we can simply use

these components right here profile if the user is already logged in

you use this and pass this as a prop this user to this

component and then we need to put a colon and right here we want to show the

login button if the user is not logged in so here we need to pass this prop as a prop now we just need to receive this

prop in this component so if you just

see you can receive this as as an argument

user so it is saying user is declared but its value is never used so that's all the error will go away you will see

that so now it's very easy guys we just need to Define our components so first I

will go to the login button component so here what we will

do if you just go to the application right now just open

Local Host 5173 so it will actually show you this 5173

soor it will show you the login button because the user is not logged in and uh

right here we will be having a login button in the center of the screen justify

Center item Center at screen so we will have a button right

here which will say login with

Google BG blue 500 these are all Tailwind

classes py2 PX4 around it

so just make we need to make this in the center screen uh I think plus justify

Center item

Center and also we need to attach a on click to it on click

so when we click this we just need to call this function which is handle login now we just need to Define this

function right

here right here we can Define this function

so when you click this button you will be redirected to window location.

hrf HTTP Local Host 5,000 sl/ gooogle

that's

all so if you just refresh now click on this button so you will be redirected to

your account selected screen and

uh if you select your click on continue allow the permission you will see you

will be redirected to the homepage and here you will see profile so we can actually display the details of the user

by editing our profile. TSX file so right here we can actually

show the profile of the user

so again we will use the classes of

Tailwind just to make it in the center

so these are all tailin classes that you

see so inside this we will have the image

tag so this will be user. profile photo

MX Auto

mt4 you will see it is

there so then we will actually be having

to show the display name and email address so

right in this we can display user. display

name user

so that's all and uh we will also be importing the log

out button component so here we just need

to go to log out button and just make the log out button as well which is a

very simple button which allows you to log out

so you can see that this is the log out button whenever we click it we should call this function which is

handle log out

so we'll basically be log out to http Local Host 5,000

sl/ logout so if you want to log out you can

simply go to the homepage and now you can see the profile details are there

and if I show you the database currently it is empty if I

so you will see two tables have been created the session table and the users table in the session you will see the

session information is stored about the cookie whatever and the user So

currently there is a single user in the table in the mongodb database table so

if I log in with a different user let's suppose if I go to Local Host 5173

you need to log in first of all if you're doing it for the very first time you need to Grant permission you'll see

all these information profile picture display name email address log out button if I refresh the table you will

see two entries will be added so two sessions will be created so

this is a system guys in passport reactjs nodejs and express the full stack application thank you very much

for watching this video all the source code is given in the descript description you can directly purchase it for full documentation and support and I

will be seeing you guys in the next video