Build a Next.js Google OAuth2 Login and Logout System Using NextAuth.js Library in Browser

uh Hello friends welcome to this video so in this video we will uh actually build out a next chair's Google o 2

login and log out system and in the browser so let me show you the demo of

this application so whenever you open the application it will look something like this you will have a login button

and here whenever as you click the login button it will actually show you your

account screen of o2 as I click it you will see the sign in with Google button

it will redirect you to this URL and if you click it you will be redirected to the screen where you can actually select

your actual Google account that you want to log in here and as I select the

account here you need to Grant the permissions to this project and simply you need to click on continue so as you

click on continue it will redirect you to the profile page where you will actually see the details of your account

here which is name email address and also we have the log out button as well so you can just

see here so if I just close this window and

again if I open the same URL again so it will automatically detect that I'm already logged in here and it will

redirect me to the profile page so we don't need to log in again and again

so so it basically store this information in the session of the browser

so that's why it is automatically detecting that you already logged in so

there is a this log out button here if you click this button you will be redirected to the homepage right here so

now you are successfully logged out so if I close the window again open the same window once again it will now

detect that you are logged out and now it will show you the login window right here this is a very simple project and

we are actually making use of a library in next ch which is specifically made

for this process which is called as next.js this is their official website

here next. js. org you can read more about the documentation on your on their

website so we will look at a very simple Google login example in this video I

will show you step by step how to implement this inside your next

years so we will be using the latest version of recording this video at this

time next year 14 is released so so we will be looking at the latest version

here and we will be creating this project step by step so you can take any

Google account for example just you need to go to the homepage again I'm taking a different

account here you can see that again you do you just need to do it for the very

first time if you're login here by selecting your account granting permission so this you need to do it for

the very first time and then it will will actually show you the name email address and a log out button as well so

this is the actual application and uh if you are interested the link is

given in the description for the full source code if you are interested to actually

purchase the full source code you can go to my website Pro Cod store.com where I will actually given all the source code

which I will be using in this video with full documentation and support so the link is given you can go

to it and and after you purchase it you will actually get a zip file from Google Drive automatically after you make the

payment so the link is given in the description so now let's get started by building this

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

are there inside my project directory so I will simply open command line here and

we will simply create a brand new Next CH project by invoking this command which is NP X create next

app so this is you can see that this is actually if I zoom in npx create next

app at theate latest so we are actually using the latest version here mentioning

because we are actually using nextjs 14 which is the latest version followed by the name of the project you can give any

name let me give here next to Google login

project so so as you basically execute this command it will ask you some questions right here would you like to

use typescript because in this specific project we are using typescript so I will simply set to yes you can even

change it to no as well but we in this tutorial we will be using typescript which is a superscript of JavaScript

with additional features so simply enter would you like to use eslint so es lint

is specifically used in testing so we don't need to use it so no we will be using Tailwind CSS for styling purposes

so simply yes and we will not be using the source directory at the latest

version we don't need the source directory app router we will be using it so

yes no so we are sticking to the default options right here and now it will

actually install the dependencies so once it's installed it will actually finish the

process so after installing it we just need to open this project in the vs code

so now it is completed right here we need to navigate to the project directory right here so we can simply

say CD next to Google login project and open this direct open this project in

this vs code so this actually will be the directory structure of a nextjs 14

app here this will be slightly different if you're using a uh older version of nextjs which is 12 or 13 because in next

CH 14 a lot more additional features is added uh because of the app router and

this is actually the page. txx file which is for stands for typescript and

jsx is also mixed here this is actually the homepage that you will see if I run the application and if I just want to run

this I will simply npm run Dev so this will actually start the development server on Local Host

3000 so by default in next year's 14 this will be all your routes are named as

page for followed by TS this is actually the page that you will see whenever you

open the application if I refresh it so it will automatically reload whenever

you make changes so it is just compiling it so just wait for the very first time it takes some time 5 to 10

seconds so it is compiled here you will see that so this is actually that you see right here we can edit this we can

delete everything from here you can just change here

write hello world so it will auto reload it will you can see that hello world is there so this is actually the

application we don't no longer need this image so what we will need to do right here uh so in the next section guys we

look start coding this project step by step so now in this section guys we will

actually start building this project so the very first file that you need to create right here in the root directory

is EnV file so just write in the root directory create this EnV file and here in this

file we will be storing some information some variables so these variables we will be

getting through Google Cloud console such as your Google client ID Google uh

client secret so whenever you are authenticating with Google you need to have these two things and we also need

next o secret so this can be anything you can have your secret key so you can

just provide any value right here this is just for the secret key for if

you're using nextto library and also the base URL of your application next off

URL so my base URL will be HTTP Local Host

3000 so if you are developing it for production here you need to put your website full

URL but we are building it on Local Host so that's why this is our homepage URL

and now these two values we need to get using the cloud console right here and

here you should have this uh you can simply type on Google which is Google Cloud console the

very first link which comes right here simply click it and go to console and

you should have signed up for this and creen a project I already have one so I

will simply navigate to the menu section so where I will see this option

right here apis and services go to credentials and uh here you just need to

create a client ID click on this button create credentials go to O client ID and

the application type will be web application so simply select from the drop- down web application and here you

need to fill out these details which is authorized JavaScript Origins which is actually the homepage of the URL HTTP

Local Host 3000 so whatever is the URL of your so we are running it on Local Host 3,000 so

I will simply right here and after that uh this will be the authorized redirect

URI so next Au if you search right here it has uh redirect URI for Google call

back if you just type this it will show you that specifically if you're doing Google authentication you need to put

this uh this is a route here you need to put / API sl/ callback SLG gooogle so it

has various providers for specific Google provider we need to put this redirect URI so this is constant based

upon your project this will not change so this will change the local this

one so this I will simply copy this and uh I will simply authorize

redirect URI the base URL will remain constant which is HTTP Local Host 3,000 after

that this will change / API SL / callback /g gooogle so this is

provided by next o so this will not change so redirect URI simply means that

whenever you basically allow the permissions so what URL Google will redirect you to so this is authorized

redirect URI after that click on Create and it will actually give you this information which will be different for

you so don't copy my information so just copy the client ID paste it here and you

will also get your client secret as well so just paste it here and in this EnV

file so simply close this file this is done right here after this you need to go to page. this is our home route and

right here we will delete everything from here and we will actually be having

this we will just be creating a base component right here in a a route here

so every route will have a name folder right here so login inside this we will

be defining page. TSX so here we will be importing this

uh we will just be importing it for the time being I can just write a

heading right here hello just here this will also work if you go to

Local Host 3000 you will see that hello world is

there so after this what we need to do we need to create a another file right here in this uh app folder so just

create a file called as session provider so just write session

provider dot TSX so in this specific file we need to

write this code that I'm writing right here it will be a client component in next CH it will run on the client and

from this we need to import the base react library and also we need to import

the session provider which is there from this package which is next o

package if you see that we and from

react so next to library contain this we can just rename up the file not

session provider just rename to provider so now if you see there is a

session provider available from this package that we

installed right here which is uh I think we haven't installed this package that's why it is creating this

problem so just go to command line and just install this package which is next-

npmi next dash off simply install this

package so once this package is installed you will actually get next to

slash react so this actually this session

provider you can see it's a function which is there inside this package so

what we need to do right here we need to create a function providers we need to W

our application to this session provider so this will actually take care whenever

you log in it will actually remember you that you either is logged in or not this

is really useful for that purpose that's why we are doing

this so if you don't include this then your information will not be remembered by the application so whether you are

logged in or not so here we need to wrap everything of our application to this session provider

inside this the children we will be having this so children here is the actual

application and here we are wrapping everything inside the session provider tag lastly we just need to export this

file so that we can include this in other files so export default this is a

very basic synex this is actually the file right here we are requiring the session

provider function which is available in next to package and then we are wrapping everything inside session provider of

the application so it's a client side component now we just need to go

to uh the layout file that you see right here this is the layout file layout file

typically actually have your metadata of your application such as the title description

so you can just uh rename this to Js from typescript so just layout. JS just

rename this to and after this

uh this is in typescript so what we need to do right

here we need to import like this so you will see that so we have changed this code right here you will find out the

full directory structure full code will be available in the description you will purchase it so we have just required the

providers file that we written right here in the previous so this we are requiring it by using the import

statement import providers from the providers file and then we are simply wrapping everything you will see that

this providers inside it we contain the body which is actually our application so

this is actually the body tag which is wrapped here in the provider tabs so now we are good to go so the configuration

is complete so now in the next section we will look at how to write the login

function so now guys in this section right here we will actually be building

out the login page that we created in the last section this is actually login

uh folder and inside this we have defined the page. TSX file and uh right

here we will actually be using the use client directory to actually tell it's a

client side component and we have will be a functional component I will change

the name to login so it will simply say to the user login page now I need to include

this in the base component in the index page so what I will do inside of instead

of this H world we simply include the login like this so if I refresh the

application you will now see login page so it is showing right here so now what

we need to do we just need to also go to the

public right here in the

global if you see everything is good right here no

error is there so what we need to do here in

this uh we need to write some jsx so in

the login uh I think in this yeah in this

file we just need to declare some variable first one will be for the data which will be of the type

session the data coming we'll use this use session directive which will be

coming from the next to package and it's a you may say it's a hook if you have

studied react you have you may uh just know what are hooks use State use effect

so one such Hook is use session which is actually provided by next to which will actually show you the session

information if the user is already logged in it will actually contain their profile picture email and name so we

have declared this variable for this now inside this jsx we will be having a diff

we will be giving Tailwind classes right here to it Flex item Center justify

Center so these are all Tailwind classes if you don't know about Tailwind it's a

framework where we have pre-made classes available for us so that we don't need

to write Uh custom CSS so BG gray is stands for

background changing the background color this is actually the shade which is there so inside this we will actually

be showing the login button so we will be having BG white background

white we will be giving a shadow on medium devices it will be rounded on large devices P padding six width will

be full w- full Max width on medium devices and the text will be on Center

so these are all Tailwind classes right here if you see so here we will simply have a button for

now so this button will simply show login right here so if you

just refresh right here so if you see right here guys we have this login button right here right

in the center position and the background is changed right here to gray color and the button background is also

changed to White so I can need to attach some classes to the button as well so

button BG blue 500 when we hover onto

this button the color will change to 700 text will be of white phone board

py2 PX so py is padding in the y direction

PX padding in the X Direction and it will be rounded

full so if you just refresh right here the login button is ready you will see that so this is actually the login

button after you do this so we need to attach a on click listener to it so whenever we click this button what

should happen so on click so here we will be defining a function which will be sign in

so this function will be coming from the next Au Library so all these methods are

pre-made available for us using next to so we just need to import these methods

which is sign in for signing in using Google and signing out as well this also

is a variable sign SS small sign out and

use session that we already imported so

so this all will be coming from one Library which is next o/

react so you will see that all these methods are premade available so we will be calling this method sign

in like this so you can see that uh we are simply calling this

method so this will be better so if you just click this now you will

be actually be having this 404 this page cannot be found because we haven't

defined our server side routes in next years you will see/ API sl/ error this

error you will take this this is quite normal because we haven't defined the server site code as well in next years

so server site code is located in the API directory so in the app directory you need to create our API directory /

API this is actually the convention in next gs14 quite a number of things have been

changed so these things the server code is located in the/ API if you want to

make serers side routes and then we will create the Au folder right here this is

specific specifically done for next o so in the ne o folder we need to create

another folder which will be a route in the square brackets dot dot dot next do

so this needs to be the same right here whatever I'm doing right here you need to do the same so next

do this is actually with the folder name and now inside this folder we need to

create a file which will be route. TS so we are coding in typescript

so that's why the name of the file should be route this is actually again if I tell

you this is actually the naming convention API then O then the square

brackets dot dot dot three dots followed by next do and then inside this we have

the route. TX file so if you follow the convention you will not get any error so

after you do this we now need to Define This Server code this is a server

component so that's why we will not write here use client because it's a server component so you'll simply first

of all import the next AU from next Au

simply and then we need to import the Google

provider so there are various providers available in next o one such provider is

Google o Google provider so SL providers slash

you will see you can do it for various providers are there various social media networks so one searches Google you will

see that so now we just need to write the Handler function which will actually

handle this request coming from the client side so this will this is the Handler function that we defining right

here next to and here we need to provide the provider array right here so this

array for now we are actually handling it for only Google right here so we'll

say Google provider and right here we just need to provide an object which will actually

contain these two details which is client ID and client Secret so both these information we have stored in the

environment file process dot now to fetch this information which we have defined in the EnV file we can simply

use the syntax which is process. EnV do followed by the Google unor client

ID and similarly for this process. env. Google client Secret

and also if if the information is not available in that case we'll just write this tary

operator so now we have defined this Handler function we now need to export

this so that we can use them so just write export this line is really important if

you don't write this then this function will not works export Handler as get and

also as post as as well so this function which we have defined right here it will

handle the all the get request and the post request coming from the client s so in this specific function we just

provided the client ID and the client secret that we configured in the earlier step that we got information from Google

Cloud console this will be different for you so these two things also need to be set which is a secret key next do/

secret and next. /url which is actually the homepage of the application so after you do this we Define this information

in the routee file so now if you make the changes

right here again if you open Locos 3,000 so if you click the login button

right here you will be redirected to this callback URL if you see/ API SL

signin this is actual call back URL and now if you see you will see the sign when sign in with Google button so if

you click it you will be redirected to your screen where you can actually select your Google

account let me restart the application right here

so once you start your application right here

just need to write npm runev so it will actually start your development server

so if you go to Local Host

3000 so just wait for it is compiling this information so

let me restart that application here you see it is starting right

here so basically guys whenever you grant the permission so there will be this login

button that we are showing right here in this uh login route here so whenever you

grant the permission uh there will be this session variable that we declared early on

this will come into the picture so right here we will just write conditional logic inside of a jsx we simply inside

curly bracket we will simply say if the session is not on then we will have a

tary operator right here and then we will basically shift all this code that we have written for the login button

that you see simply shift this code so conditionally we are entering the jsx so

if the session is on right here then only we need to show the login button if

the session is not available we have put a not symbol right here so if the session is not available then the user

is not logged in so in that case we will put a tary operator right here so if the

session is available in that case we actually need to show the

information to the user which will be a simple sign out

button or we can say log out button and we can simply onclick we can actually

call this function buil-in function which is sign out of next o

and these are all the Tailwind classes we can just give it to this

button and uh you can see that so we we you can see that we conditionally

rendering out if the session is not on then we are showing the login button if the session is on we are showing the log

out button and also if the session is available then also this this condition

will be true so in that case we will be showing the user information such as the profile picture email address all that

stuff so so these are all tailin classes so

right here it will be coming from the session so curly bracket session question mark

do user question mark- name so this will be the name of the person and then

similarly in order to show the

email address we will have do email so all this information will be

coming and similarly we will show the image to the user so image here will

be image like

this so we will give it the class name which is rounded

full w24 height is also

24 MX Auto to be Center on the screen so that's that's all guys for this tutorial

so you can see if the session is available then we are having this information the name of the person email

and the image so this will be shown so thank you very much the full source code link is

given in the descript description you can directly purchase it from my website brod store.com for full documentation and support and thank you very much for

watching this video please hit that like button subscribe the channel as well