Build a Nuxt.js Google OAuth2 Login & Logout System With Sessions Using Vuex Store in Browser

uh hello guys welcome to this video so in this video we will be integrating the Google oo login inside our next

application next as you all know it's a next year's very similar framework which is

based upon vue.js so next is uh a both server side and client side framework so

we'll be integrating the Google login system right here if you visit Local Host 3000 it will automatically detect

that you're already logged in and it will now show you this you are already logged in so go to profile page if I go

to profile page this is actually the profile of the logged in user you will see their display name email address

profile picture and a logout Button as well so if you we are storing information in session so if I

accidentally close this window it will automatically detect that we are already logged in if I go to the home page of

the application you will see you are logged in so I'm running this application on Local Host 3000 port

number number so simply it will display the profile information this is

a display name email address profile picture and a log out button so if I click Now log out so it will redirect me

to the homepage and now if I again refresh you will be redirected to the login page so if I now visit the H page

it will detect that I'm already logged out it will show me the login page so it's a state management that we are

doing it using View vuk Vex vuk is actually a state Management

in uh this framework which is uh next so

if you just again login you will see that this is actually the profile page

you can do it for any account right here if I open this account a different account Google account so you will be

logged out so if you're doing it for the very first time it will ask for the consent screen here you need to select

your Google account you need just need to allow the permission click on continue and you will see your profile

page you will see that so in this way if you close it open it once again

it will say to you that you're already logged in go to the profile page so this

is a Google o functionality guys you'll be integrating inside a next app so we

are using the latest version of next as you all know is based upon view

framework so it has both server side and client

side code so you don't require front end and back end differently you can use

this it's similar to nextjs but it is based upon .js so this is actually the directory structure if you want to

purchase the full source code guys with full documentation and support from me you can go to the description link and

purchase the full source code you can go to Pro Cod store.com where you will actually get the source code after you

purchase it you will be redirected to Google Drive where you will get this ZIP file which will actually contain all

this directory structure and all the documentation will also be given step by step instruction will also be

given so the link is given so now let's get started by building this project I

will be seeing you in the next section so now to get started guys the very first step we need to create a new next

project so I will show you step by step I will go into my working directory where I will simply develop this project

so here you need to open command line so I will show you this command so simply

pause the video and write this command npm init NXT

next Dash app and at the rate latest so this is will tell the command to

actually download the latest version of next n npm in it next- app at theate

latest and the space followed by your project name so let me call this project as next Google

login so this is the command you can pause the video and write this

command enter it and now it will ask you some questions related to the project

such as the project name which framework you want to use so it is generating this project so it

will ask you for the project name so you can stick with the default option simply press enter we will be using JavaScript

not typescript and package manager simply drop down to npm and UI framework we

will not be using any UI framework for this template engine will be HTML next

modules we will be using the axio promise based HTTP client and Es lint we

will use it and testing we are not using any testing framework so rendering mode

we are not using Spa single page app so Universal is stick and deployment we are

not deploying it so we will stick to the default option server and development tools stick to the default option which

is recommended for vs code json. Json and just provide your GitHub username or

it is not required simply press enter Version Control select G so now it will

install these packages it will create your very first next app in the working

directory so just wait for the process to finish it is installing all the packages which are required so once it

finishes it will give you a notification and then you can open that project

inside vs code so just wait I'm showing you the full I'm not pausing any in the

video so just show just see everything which is happening right here

and and just wait it hardly take 15 to 20 seconds to

actually install all these

packages so you can see that it is doing

it so now you can see it has built our project so now we can CD into the

project here next Google login and here we can actually

open it inside vs code this is the very next basic project that you will

see it is similar to next Chas but it is far more simpler and easy to learn than

next Chas We have basically the components folder where you node modules

this is actually the pages this is the static assets folder this is a store folder

so then this is a main file which is nig. JS file so here you will be adding

all your third party modules that you want to and all the CDM for this

tutorial we're using the Tailwind CSS so here we will be providing the Tailwind CSS in the head tag that you see right

here it is far more simpler than next CHS next CHS is slightly complicated but

but next is slightly easier to learn so the very first thing we will do right here we need to install two modules for

our integrating the o Google login so this one will be atate

nextjs SL next this is actually the module which is responsible for

integrating the Google o or login so this package is specifically designed for nextjs and the second package will

be exos so exos as you all know is a HTTP client which is used to make API

request so this module is responsible on this module so that's why you need to

install AOS as well so enter it and it will actually install both these

packages so once it is installed we can start running this application simply

type npm run def this will start your development server on Local Host

3000 it will compile both the server site code and the client side code for

this tutorial we don't have any server s side code so we only need to write the

client side code so it is you can see it is listening on HTTP Local Host 3000 so

the environment is development rendering is server

site so you can see it is compiling for both client and server site

so now it is compiled so we can directly open Local Host 3000 so it will be this

is a welcome page that it gives you welcome to the next next application you

can basically edit this page which is located in the Pages directory index page and uh here you can change

this so every HTML needs to reside in the template tag right here this is a

base tag right here can say hello world so if you make

this change you will see that it will reflect so now we just need to configure

the O login so just go to this file which is next config.js file and right

here first of all we need to add the in the head

tag so right here we will I will delete everything from here

in the we don't need these meta tags so we can delete

this so we'll be having this script tag which is there in this head tag so this

will be a array just put a comma right here this will be object and it will

actually contain a source property and it will navigate to the Tailwind CSS CDN

do tailwind css.com and here we also need to provide

the second property which is defer to true so in this way you can add any UI

framework CDN like this in the script tag we dynamically adding it to the

whole application by configuring it in the next config.js file so it will add

this to your application all your HTML files globally so after

that you just need to uh write here you need to have

uh a modules you will have a modules folder

right here this will be empty by default in these we need to add two modules that we have installed first module is at

theate nextjs exos comma and the second module is at theate

nextjs or next so these are the two modules that we have installed early on

using the command we are adding it to the modules array right here very simple and this will allow next to actually use

these modules in the application we are registering it globally inside this file

so the next thing we need to do is actually having the O

module this will be an object so just here we will be integrating the or

registering the o 2 login of Google so here we need to have

a strategy so it contains a strategies

object we need to provide it and it will have a Google strategy and here we need

to provide the client ID so client ID we need to provide it we

will be getting it using Google Cloud console and then the second option here will be

code challenge method and then the response type it

will be coming as a access token so X token uh space ID

token and then here we need to provide the redirect URI so redirect URI for

this will be HTTP Local Host 3,000 /all back you can do it anything but uh for

my purpose I I will be putting SL callback so you just need to provide the same you redirect URI in the Google

developer console as well so whatever that you provide here you need to provide in Google developer console and

the last option is the scope so what information you are requesting you're requesting the profile of the user and

the email address so in double codes you can just

write so these are the five options are there client ID code challenge method

response typ redirect URI and the scope so after you provide this options first

of all let me show you how you can get the client ID it's very easy uh go to

Cloud Google Cloud console and uh here you should have a project created it's

completely free go to API services and right here you will actually go to credentials

and click on o client ID and just select the

application type right here this will be web application and uh

just give the homepage URL in the authorized

JavaScript Origins so so just copy this URL and paste it

so this will be the homepage of the application HTTP Local Host 3000 and the call back URL will be HTTP

Local Host 3000 callback click on Create and then it will give you your client ID you only

need the client ID not the client secret this will be different for you so don't copy my client ID and simply I will

paste it so this is actually configuration is almost done after you

do this we also need to put a comma right here

and we also need to say here redirect and login will be the homepage

log out will also be the homepage call back so call back URL will

be will be configured you will see SL callback we have Define this callback

URL and then lastly is profile page so homepage will be the profile page it

will go to/ profile so redirect URI is an basically object it's containing four

values so where Google should redirect you so login page will be the homepage

log out will also be the homepage and call back will be/ callback and profile will be the

homepage so this is all that we need to do inside right here the configuration process is over

this is all that we need to do in inside this file now you can close this file

and uh we will now be building the templates in the next section so I will

be seeing you in the next section so now guys we will actually be uh writing

the State Management code for next application so in the last tutorial in

the last section we configured our next config.js file where we actually added the dependencies and

the configuration code for this is the client ID everything we added now there

will be this folder out there which you see which is the store folder so here this is the folder you need to create a

file right here so the file name will be index.js you can give any name of your

choice this will actually contain all the State Management code State Management code so this is similar to

next CHS in next CH we use Redux Redux is used know that it's a concept of uh

State Management for reactjs application similarly in vuejs we have a state

called as which is

uh this is uh in inside this vuejs we need to write

the state management and uh this is called as view VX V ex so here we will

first of all write some State here for this application so there will be a single state variable inside this it

will be the user currently the value of the user will be null by default so you

just need to Simply write this user will be null so when the

application loads for the very first time this user will be null because we haven't done the authentication so let

me restart the application just type here npm runev so that it will actually start your development server on Local

Host 3,000 so you will see that it will compile this application and it will

actually run your application Local Host 3000 so if you run it for the very first time this user variable will come out to

be null so you will see that so this is null and after that

there is a concept of called as mutations mutations are nothing but the

ACT actual actions that you perform to the state so one action will be for

performing guys which is set user we will be writing this defining this it

will actually take the current state of the user and it will also take a payload payload is actually kind of a data so we

will be setting the state so we'll simply say state. user is equal to the

user so what is user p in right here which is a payload we will be

manipulating the state we are changing the state here and state. user is equal to user so this is called as

mutation inside state management inside VX so we also need to have a gutter

method as well in order to get the value of the state we will be defining this Getters meths this is actually a syntax

of defining State inside VX we will have a function called as is authenticated it

will take the state as an argument and then it will return either the user is authenticated or not so this

double explanation mark right here double not sign it it will return the value as true or false whether the user

is authenticated or not so this function will return either a Boolean value true or false the second one will be logged

in user this is again will be it will take the state as an argument and it will return the actual user which is

present in the state so return state. user so these are the two methods that we defined guys which is contained

inside this uh VX store and this is actually M mutation that we Define set

user and this is a getter method these are the two methods we will be using inside our views whenever we will make

it in the next section so whenever you define your pages we will be def using these methods that we are defining in

the state in the store folder index.js

so after this there is also a concept called as actions inside the State

Management if you have studied VX you will know what I'm doing right here if you don't know just write this code

as it is next server in it we will be defining this and inside this you will

pass a commit

request and here we will have if condition if uh request or

session and uh request. session do

user if the session is there then we will simply call this commit method and uh we will call the mutation set user

and we will pass the user which is present in the session request. session. user we will actually call this mutation

if you see we have defined this mutation which is set user we calling this mutation from here from this next server

in it and after this put a comma and then you will Define this uh set user

also here commit

user commit set

user user that's all so this is actually the State Management code that we have

written in order to keep track of the authenticated user whether they are logged in whether they are not logged in

this is actual file you need to create guys in the store folder by default this folder will be empty just create

index.js file and write this code and now in the next section we will Define our views just create a profile. view

view view this will be the index page which will actually contain the login page this is a profile. view page which

will contain the profile details about the user so we will be defining these two routes in the next section so now

guys in this section we will actually be writing the views of our application

which the user will see So currently if you go to Local Host 3000 you see this hello world message so instead of this

we just need to delete this and have a login button so we will be conditionally be

renting this login button we'll use these tailin classes MX Auto

p-4 so right here we will actually have a conditional inside view view uh V if

which is actually a if else condition syntax we will be using this variable

which is is authenticated so is authenticated will be this method which will either return

true or false depending upon whether the user is loged in or not and here we just need to at the bottom side we just need

to declare the script tag and here we just need to Define this is authenticated so right

here we will be defining this uh asyn

function Asing data and here we just need to pass two variables which will be

passed to this function Au and store store and inside this function we will

be having this if condition so this variable that is passed here off it contains a property

called as logged in so if the user is currently logged in

then we will actually dispatch a event to VX store so now to dispatch

this event we have a function right here which is store. dispatch and we will be calling this again set user that we have

defined in the earlier section we will be passing this currently logged in user

right here we are dispatching this event which is set user if you see in the index.js file we have declared this

mutation which is called as set user we are currently calling this mutation so

this code will execute and it will actually call this mutation set user inside the index.js file so after that

your user will be logged in so put a comma here and there is this

computed property which is there inside vuejs so this is authenticated that we

are using inside our HTML this property either will return

true or false depending upon whether the user is logged in or not so you'll be returning this.t

store and gets is authenticated so you can see that we

have inside in index.js we have Define this getter method which is is

authenticated so we are actually calling this method so this will return either true or false depending upon whether the

user is logged in or not so this will evaluate to either true or false and right depending upon whether it's true

or false we will be showing the login button or we will be showing the profile details of the user so if the user is

not logged in in this scenario it will evaluate to true so in this case we will

be showing the heading to the user that please login so we'll be using the

Tailwind classes right here so we'll give it in heading which

is login so we'll have a simple button right here which will allow the user

user to login with Google so we'll be binding a on click event listener to

this button so when we click this button right here we will be executing this method login with

Google so we just need to give some Tailwind classes to this button bgblue

500 text will be in white color so text white padding to

it will be rounded and

uh it will also have some Shadow as well so if you just refresh your browser guys

what you will see if you navigate to Local Host 3,000 you will see this login with Google button so how this uh is

working behind the scenes is very easy it is actually evaluating this condition

V if so it totally depends upon this value so if this value comes out to be

true then the user is not logged in so that's why you are seeing this login with Google button so if the user will

be logged in then you will see the profile details then this condition will evalue to false so here it is calling

this function right here in the computed property and in turn this is calling the

index.js file in the getter function so it is all all this code is

interrelated to each other so now right here we will be

having the after this button that you see right here we will

have the another div tag and this time we will be defining the else condition

so if the user is logged in if this conditions to false right here so in

this case we will be defining or showing the user profile details such as the email address display name and the

profile picture we'll be giving Tailwind classes right here to this

also so we giving a heading to

that you will just put a message to the user that you are logged

in and then we will simply have next

link and you'll be having this two tag right here

you will just say to the user you are logged in so go to the profile page so you will be having this button right

here BG

green this is a built-in element of next next

so you will basically see this is actually the link tag which is built in inside

next which is called as next link it will basically link to the SL profile

route that we will make right here go to

profile so when the user is logged in this message will show show to the user you are logged in please go to this

profile page and right here whenever user goes to this this view will open

so right here this will here you will be showing

the details of the logged in user so right here if you just see right here we

will be defining one more entry methods method section so when we click

this uh if you see we are binding a on click listener to this login button when we click this login with Google button

this function we need to Define it right here in the method section so we'll be

defining this Asing function which will be login with Google so inside this function guys we will simply say await

this Dot and we will be saying Au login with this is actual function

which is present inside this module and here we need to provide the provider so

it has various social media providers Google Pinterest uh Twitter in this

specific video we talking about Google so here you need to provide the first argument is Google and then after that

it will actually interact with that VX store and we need to dispatch again and

we need to set the user after we get the user logged in user we can simply pass the logged in user like this or user

that's all we are now communicating with that index.js file and we are dispatching this logged in user and we

are calling this mutation set user and we are actually manipulating the state and pass the logged in user

whenever the authentication is done we are dispatching this event set user so now the thing is complete if you click

this login with Google button you will be redirected to the screen where you can actually select your consent screen

where you can actually select your Google account Grant the permission click on continue

and you will basically see render function or template not defined in component Pages profile. view so we need

to define something inside profile. view so we had redirected to this this Local

Host 3000 profile route so this is perfectly working fine now we just need

to have some right here we can say this is the profile

page so if you just uh refresh now you will see this is a profile page so we

are simply if you close this once again open that Local Host 3000 it will

automatically detect that you're already logged in it will show to you that you are logged in please go to profile page

I will simply go navigate to the profile page so now we need to display the logged in user details such as profile

picture display name email address this is very simple we can simply say the container

class MX Auto P4 so these are all Tailwind

classes and right here you'll be displaying first of all

the display name we say

profile so inside

this you will actually have a image tag and it will be equal to profile.

Picture This profile user will be coming if you just have a script tag right here

every view component has a template and script and a style tag as you all know so right here we will be having some

properties to this component export default computed component which is

computed property will be the profile method and it will be returning

this. Au user So currently logged in user which we will be passing to this

profile object profile. picture if you just refresh now you will actually see the photograph of the user I just need

to give it a class as well image source sorry you need to put

colon right here you will see the picture is there so we can actually give it a boot uh

Tailwind class here to make it round the width 16 height will also be

16 and it will be rounded full

mr4 so you can see it is rounded right here and after this we can actually give

the display name and the email address which is Double C bracket and we can here write here profile. name similarly

we can repeat this

so this will be profile.

email so you will see that we have the profile display name email address and

profile picture lastly we will actually have a simple button for log out functionality as

well so here we'll simply say log out

and give it a on a bind click uh on click listener to it bind it which will

execute this function log out so right here uh we can actually if you see we

have a log out button as well so just also assign a

style to it as well scoped just give it a

container class is Max width 600 pixel just do it and it will

actually Center it you will see that so it will give some padding and also we'll be giving

a border radius to the card class which is uh 8

pixel this is not necessary I have just written some stylesheet

so this Styles will only apply to this component that's it's advantage of using

styled component so right here now to define the methods we'll put

a comma right here and this is we will Define the log out

method which is very simple we say this do Au and we can def call the log out

method that Sol this will actually log out the user if you refresh click on log

out you will be redirected back to the login page if you click now if you try to go to the

homepage it will show to you you are currently logged in go to the profile page if you log out you will be logged

out so this is a very simple application guys we have developed and uh you can

log in with any route any Google account if you're doing it for the very

first time you will ask for the consent screen simply allow

access if you go to the home page you're currently logged in go to profile page

so this is a thing guys if you are interested in purchasing the full source code with full documentation and support

the link is given you can directly hit the like button subscribe the channel and I will be seeing you in the next

video