Build a Laravel 11 Google OAuth2 Login and Logout System With Sessions and MySQL in Browser

uh hello guys welcome to this video so in this video we will talk about that how to integrate Google o to logins and

logout system inside laral 11 uh framework so we'll be looking at step

byep instruction to actually build this application and show user profile information in a card likee structure

you will see we are using Tailwind CSS for the UI and you can see it is running on Local Host 80 port number which is

the current default port number for laral application so we have also a log out button if you

click the log out button we'll be redirected back to the login page so now if I actually close the browser and

reopen the browser then it automatically detects that I'm already logged out so when I open the home page it will

redirect me to the login page now you can see that so we are actually using

guys uh exam control panel which comes with Apache server and PHP my admin so where

we are actually storing in all the data so if you see basically here we are

storing uh inside uh this is our table which is database users DB currently

there is a single user out there this is actually all the tables which are there

migrations sessions users so we are also using sessions as well to actually store

session information about the user so there is a single user out there which is a display name coding s gy Gotham

1987 it is storing Google ID Avatar token as well so all this

information is stored if you login with this user so it is saying that missing client

ID so I think I removed the client ID so let me uh

just refresh here click login with Google so you will see that you will be

automatically logged here you will see a currently this user is present here let me log in with a different user so now I

logging it for the very first time if I open the application so if you're logging for the very first time then you

will need to select the consent screen you will see now it is successfully a second account if I

refresh now a second entry will be added you will see that har Chopra choa

[email protected] this is their Avatar pick so it is showing here so in the similar

way we can try out for a different account so if you're doing it for the

very first time guys you will need to actually see this consent screen here you need to select your Google account

allow the permission and after that the login will be successful you will see

that the profile picture display name and the email address if I refresh the table you will see that three USS are

there you will see in the sessions table as well there is a sessions table also created so we are also using sessions as

well for every sessions that user create or logged in a newly session ID is

generated in the table if you see a newly generated session ID is there so

we are actually storing all this information in the MySQL table whenever you log in log out every sort of

information is session ID is being inserted so this is actually the application guys we'll be doing it step

by step we are actually using the latest version of laral at the time of recording this video it is laral 11 so

we are using the latest version of PHP which is 8.2 laral which is 11 so laral

11 requires you to have 8.2 minimum PHP

version so make sure uh just PHP Dash version you should have PHP 11 install

PHP 8.2 so at the time of recording this video this is the latest version

8.2.4 so I already have the latest version and laral 11 I'm using so let's

start this tutorial guys if you need the full source code of this uh application

I have given the link in the description you can directly purchase the full source code from my website Pro cod.com

it will actually contain a zip file which will contain all this directory structure of the code uh the link is

given procore.com where you can purchase it after that uh purchasing you will be

redirected to Google Drive where you can download the zip file and uh so the link is given you can directly

purchase it so now guys what what I will do I will go into the directory where I

will develop this project so first of all as I already told you you should have this software installed which is

exam control panel which is actually a software which comes with the Apache

server which will actually run on Local Host 0 port number and the my SQL database so it is required for this

laral you should have a p exam control panel because we are using my SQL PHP my

ad so it's a free software open open source Windows it available for Windows Linux

and Mac depending upon your internet operating system install it and start this Apache server and my SQL so now I

will what I will do I will go into my HD docs directory so by default examp is located

in C directory exam HD dos this is the HD docs folder and right here we will

actually create a new laral 11 project we'll use the composer command guys

composer is a dependency manager we will write composer create

project-- prefer dasd l/ laral followed by the project name so

I will simply give laral Google login project let me zoom in to the

command just pause the the video and write it composer create project D-

prefer disc l/ larable and Then followed by your project name so this is the

project name that I'm giving right here so simply write this command pause the video after this it will actually create

a laral project so it is saying that laral Google login project is not empty

so let me just create just change the project name so

it is actually creating a new laral project guys it is installing the packages it will take some time so just

wait for 15 to 20 seconds and then it will install these dependencies so just

wait for the process to

finish so once it is installed guys it will give you a notification where you

can actually start building the project so just wait

so laral guys it's a pretty famous framework among developers PHP

developers it's a really good if you can learn laral it's a good practice to it

will actually gives you jobs as well we will see that guys it has by default it works with the sqi

database but we will not be using sqlite we using the mySQL database I will show you how to do this so I will CD into

the project directory and open it inside VSS code so you will see this is

actually the directory structure of the laral 11 framework the latest version of

laral so many things are simplified right here in the app folder we have the

HTTP folder which contains the controllers folder then we have the models folder and this is actually the

provider folder so as you all know LEL is a MVC based framework model view controller so we have model which is

having data view is our HTML files and C controller is the business logic it

controls what VI USS to show so this is the MVC framework so the first thing guys here

we need to do we need to uh basically uh install the package which we will be

using for integrating the Google o login so we need to require this package which

is laral SL socialite this is the name of the

package guys composer require laral SL socialite this is the name of the

package simply install this package so it will hardly Take 5 to 10 seconds and

it will install all the dependencies so once it is installed we will actually

be so now it is installed so all these packages will go into this file which is

composer. Json if you open this file you can see we have successfully installed this l/

socialite this is the latest version 11.9 113.0 Lal version and the PHP version is

8.2 you will see that so this is the thing and now we need to go to this file

EMV file here we will need to uh just right at the bottom we will be

having some constants first is Google client ID so all these things will be

coming from Google Cloud console and then we need to also get uh Google

client secret and then we need to also get

Google redirect URL so these three things we need to get guys so so this will be constant the

redirect URL so by default it the laral application works on Local Host 88,000

sl/ Google /all back so this is actually the redirect URI guys this thing will be

constant because larl works on Local Host 8,000 and then this is a redirect

URI sl/ gooogle callback this is actually the full redirect URI so now

these two things in order to get this we just need to go to Google Cloud console and

actually create a project right here I've already created one project let me

just uh go to this one so here we need to Simply go to apis and services and go

to credentials and then you need to create oo client

ID select web application and then we need to paste authorize JavaScript

origin which is actually the homepage of the application so we running it on HTTP Local Host 8,000 and then the redirect

URI is actually this is a redirect URI that you write here simply copy this and

paste it so just paste it click on create so

then it will give you your client ID and client secret so don't copy my client ID and client secret it will be different

for you so just copy this and paste it

client secret as well so so we have copy pasted these

variables and next we also need to set some database connection variables so DB

connection is uh my SQL these variables needs to be same

guys so just copy what I'm writing right here don't make any mistake because you

will get error the variable name needs to be the same DB Port by default it

runs on 3306 and whatever is your database name so let me create a database

Lal login system so you don't need to create

this database lar will automatically create it whenever we run migrations so we don't need to create this database

manually then we need to just type the username by default username is root and

the password if you haven't changed the password default password is nothing that's all this is all the variables

that we need to declare guys in EnV simply close this file now we just need

to make a controller so this is actually the command in laral so larl has its own

PHP RTC CLI this RT CLI has some

commands out there which is one command is make colon controller and followed by

the name of the controller which is O controller you can give any name of your choice but I'm giving this PHP artisan

make undor controller o controller so what it will do it will actually create

this in the controllers folder it will actually create a new controller in the

left hand side if you see it has created this o controller file and by default it

comes with some code right here if you see so after we create this controller

file we will have some methods in this first method will be to redirect

so this method names can be anything but I'm just uh defining it like this the

second method will be to handle the Google callback

URL this is will be the second function in the controller function the third one

will be responsible for logging out the user so public function log out this

function will be responsible for logging out the user and uh lastly now to

actually go index function as well so right here these are four functions

which are there in the Au controller now we just need to go to our uh routes file

if you see we have a routes file in the app

folder uh not in the app folder sorry we have in the routes folder sorry routes

we have this file called as web.php so inside this file you will see already a

single controller or route is there whenever someone goes to the homepage we are loading this view so views are

located in the views folder if you see if you see right

here the views folder this is the storage folder and

the views folder uh let me see yeah it is located in the resources folder and

then this is a single welcome. blade. PHP so we actually use blade in blel so

this is the actual welcome page that you will see now to run the vable application it's very easy PHP artian

serve this is actually the command PHP Artisan serve this will actually start your laral development server on Local

Host 8,000 so if you try to open this now you will see the welcome page

so it is saying to us that unnown database lar loging system so okay uh

for the time being I just remove this name from here because EnV I just remove the name

from here or I create this users TB

just for the time being I will change name so if you just see it will show you

this larable welcome page that you will see guys for you will see this is a welcome page you can edit this page by

going to this file which is located in the resources folder you use welcome and

just change it to like this we will say Google login and log

out system

so if you just make changes it will automatically reload you don't need to restart your server you will see that

and now whenever you someone goes to the homepage of the application this view is loaded so this is actually happening

because in the controller function we are actually uh if you see by default we

are actually loading this uh if you see in the routes folder if I go to the rout

directory web.php so we are directly loading this view view we are loading

this welcome blade. PHP file if you see so that's why it is loading this view so

now what we need to do right here we need to actually do this to the controller instead of writing directly

we will say route get so when whenever someone goes to the homepage we now need to assign

this job to the control this is way much uh cleaner or

controller class and uh we will call it the index function which is present in

the controller so now we just need to actually import this controller right at

the top so what we will say use uh app

and HTTP controllers and inside that we have the OD

controller so what it will do it will now call this index function and now

inside this index function what we can do we can actually load the view the same view we

can say return view welcome so this will again do the same thing but it is way

more cleaner because we are using the controller instead of uh directly doing this if you refresh it nothing will

change it will still remain the same but uh we are Act following a good programming practice we are actually

allowing the controller to actually load the view so then what we need to do guys inside this we just need to uh create

migrations so if you don't know about migrations guys it is actually created to create the database

and tables for that we need to first of all go to models folder right here inside models folder there will be

already be a model file which will be available which is user.php so so right

here we just need to add some Fields right here so we just

don't need the just delete everything from here and just write the name field we want we need the email of the person

we need the Google underscore ID we need the Avatar pick Avatar so these are the

four fields we will need guys inside this and right here we don't need the

password we only need the remember token so delete the password from here and uh this will password also

remove it from here and we will say email verified at it will remove and that's all I think that we

have for

this also one more function you need to write for this just add this function public

function set Avatar attri we are actually setting the Avatar attribute to be the actual value or

default value we are providing which is default avatar.png so this is actually the model file which

is ready

guys so after we do

this we now need to go to the we need now need to create the migration so

migration we have this command which is PHP

Artis make colon migration and followed by the name of the migration so I will say add Google fields to users

table if you just uh zoom in PHP Artis make colon migration followed by the

name of the migration so we are adding the Google fields to users table so this

actually will create the table for us and here we need to

mention table is table name is equal to users so this is actually the full

command if you see so what I will do is that I will go to the EnV file and I will change the

database name to once again Lal login so this database will

automatically get created whenever I run this mic migration so so you will see

the migration is created successfully so it is located in the database folder migrations so if you

open the database folder if you see uh database then we have got

migrations this is actually the latest migration it is created by this command

so now we need to actually set the schema here in the tables of users we

just need to set what we need so we need a Google ID

field which can be nullable so we can use nullable

here and then we can say after password

field and then we also need table string

Avatar nullable so just write this code guys I'm writing it after Google

ID so it is required for creating the tables guys and also in the migration we

have the up function to actually create the table and down function to actually delete the columns so now inside the

down function if you actually want to delete the table then this columns will be deleted which is drop column Google

uncore ID if you want to delete the table this migration will be available

table drop column in most cases we don't use this

method down function but it is better practice to write the down function as

well that's all but this is all that we need to do guys here and now to run the migration it's very simple we just write

PHP artian migrate so it will what it will do guys it will actually actually

first of all it will ask you that the database is not created so you can see the database lar logging

doesn't exist on the my SQL connection would you like to create it so I will say yes so it will first of all create

the database and then it will run the migrations and it will create all these tables so if I check my PHP my admin I

go to that and if I check that table the database it will be created which is l

login and inside this a set of tables are created and uh we only need the user

table right here and we don't need this password email verified act so now to

delete this simply click on the drop option to delete this email verified act and password as well we don't need

this so after this guys what we need to

do we just need to after we created all these tables so

now the job is pretty much simple guys we now need to write

our simple go to the welcome. blade. PHP so right here we will simply be

importing uh Tailwind CSS so just import the CDN for Tailwind

CSS just write Tailwind CSS CDM so just import the

CDM just after the title so right here guys we will give it a body a class BG

gray of 100 Flex item Center justify

Center minimum height screen so if you just apply this and go

to your local host 8,000 port number you will see some classes will be applied

right you first of all need to run the server for this so PHP artian

serf so now you can see it will come right at the center and the background color is gray so all these things are

coming using these pre-made classes so we will actually have a condition guys

here if you don't have experiences in Blade there is actually a guest

actually conditional operator in Blade so guest simply means that if the user is not logged in then in that case we

need to show the login page so if the guest condition is true in that case we

will be storing showing a login page to the

user so right here

this will be login with Google so similarly uh we also have the

else block as well right here so if the user is authenticated if

the user is not a guest also we can end this guest right

here so if the user is not uh a guest then we can simply show a message user

is authenticated so so now by default this

condition will evalu to true so you will see login with Google button will be showing right here

so so now inside this we will give it a class to it of text Gray 600

mb4 so this is I think uh a different class we need to give BG

R 500 so when we hover onto this this we need to change the color to

700 text will be white font bold py2

PX4 and it will be rounded so these are all the Tailwind classes guys so if you

just style it it will look something like this so Tailwind is very easy to learn guys it's a very good framework we

don't need to write custom CSS and uh

this is uh these are I think this one

for the login with

Google so this is I think login with Google this you can see that so now it's

a blue color and uh whenever you go to this page hrf attribute will be equal to

uh we need to go Double C bracket and

URL we need to set the URL to in single code o/g

Google so we now need to actually if you just

uh click this button nothing will happen it will say not found 404 not found so

this route we need to make //g gooogle so what we need to do we simply need to

go to the routes file so it is located in the uh I think it is located in the

routes web.php so here we just need to make this route which will be

responsible for actually be for the routing so there will be a

route here we need to write which is route

get au/ gooogle and then here we will simply say

Au controller and then it's a class and it here will be calling this function which

is redirect to Google semicolon so we again need to go

to Au controller and we actually have defined this method in this which is redirect to Google we simply calling

this method so right inside this method method guys what we need to do we simply

need to redirect the user we say return and we use this package socialite

it will be imported here you will see that right at the top and it contains this driver function and here we need to

go specify Google here and then redirect it to the so we have actually in the EMV

file we are actually having the Google client ID secret redirect URI so now

this will work if I simply navigate to it is saying trying to access array

offset value on type value so just login with

Google so again it is saying the same value uh container make request config

client

ID uh let me check guys what is actually it's a

problem I think redirect to

Google EnV Google unor client ID just wait so guys I figured out the

error it was a very silly mistake and I forgot to tell you if you want to actually load the

variables inside the environment variables if I just click it those those uh variables that we defined in the EnV

file if you see for Google client ID secret key and redirect URL we need to

load these variables first of all for loading this we just need to go to the in the larable folder structure we have

this config folder right here the top directory you will see that you need to open this folder and then go to this

file which is services. PHP so if you want to register any third party service inside of a larable application we need

to go to this file and simply right here all these third party Services you need to register it

so if you're using it inside your application so we are actually using our Google application so we just need to

register it like this so we are using this three client ID like this we will

be loading this from the environment function and whatever value that you

have given Google client ID put a comma and the second one will be for the

client secret here also load this as well environment and Google client

secret and similarly we will actually be using the redirect this value will also be we'll

be getting from the environment function Google redirect URL so just make sure

that you have defined this to be same Google client ID secret and redirect your sping needs to be the same right

here so now if you do just

refresh click on that button and if you now see you'll be redirected to the Google account screen consent screen

where you need to select your Google account if I select it you need to click continue and you will actually see 404

not found so it's quite natural because we haven't configured this so it's a callback URL Local Host 8000 sl/ gooogle

SL callback and this is actually the authorization code that we will get we

now need to exchange this authorization code for the access token so actually use the Google API to actually get the

user informations we need to get the access token from this authorization code that you see right here so now to

do this we just need to go to the routes file which is web.php and here we just need to write a simple r rout for the

call back URL so we'll say route get

au/ go/ callback and right here we will

again assign this job to the controller or controller and it basically contains a

function right here which will be handle uh

Google call back

that's all so actually we if you open the controller file we have defined this

function app HTTP controller so this function is handle

call Google call back so this function is now responsible for fetching the

access token so now to fetch the access token

we do need that authorization code we'll sa so

socialite and driver and you will say Google you will basically fetch here

fetch the user so you can see all these methods

are pre-built inside this library and you will find and create the user in the database if the user is not present

we'll say Au user and we'll say user first

or create this is a function we will

call so here if the user is already present or if the user is a first user

so if the user is not present in that case we will be inserting it in the database the table this email address

you will be getting it using user get

email like this

and uh this is actually the thing that we

need to write here let me just tell

you so here if you see uh it is saying to us that the user is not defined

we now need to actually import this model file that we are using so app

model files that we defined and we have defined this user model so here we are using this user

model that we defined if you see in the models folder we have defined this file which is user.php so we are just simply

inserting it inside all controller we are importing it and creating the name

Avatar Google ID and the email address as well so just

format this code so after we do this it's very easy

now we can basically login the user by using Au login

function which is present we can basically pass the authenticated user as the first argument

as the true as second and then we'll be redirecting the user back to the homepage

that's all so here this o we just need to import this

class from uh varable so this is actually this class is there

eluminate I support

facets SL

o so that's all so we in redirecting user back to the homepage that's all so

if you just uh reload your application click on continue so it will actually redirect you to the hom page and now you

will see this message that user is authenticated so now the your having on

the homepage here on the screen so now the user is authenticated and instead of

this message we just need to print out the details so go to the welcome plate. PHP file and right here in this user is

authenticated this condition evolutes to false the user is not a guest so the user is authenticated so in this case we

just need to show the profile details of the user which will be

coming so now we show the profile details it is very

easy so right here let me delete everything from here

and give it a class BG white shadow MD it will be

rounded on large devices padding will be six text

Center and uh we will be showing the profile picture of the

user like this or

user [Music]

Avatar like this giving a class to it of WID

24 height is also 24 and it will be rounded MX Auto and

mb4 so if you just refresh now there will be this image which will be shown to you of the logged in user and

similarly we will be displaying the display name email address and the log out button as well so H2 tab giving a

class text Excel font bold and

mb2 and this will be having double Cod brackets once again Au

user name

and then we will also be displaying the email address as

well so this time this will

be email so if you just refresh Now display

name email address and uh it is displayed now lastly we will also be showing a out button to the user just

to login out so URL and it will actually go

to log out route that's

all so you'll actually be giving a class to it of BG R

500 we hover on to this will change to bg. 700 text will be white font volt py2

PX padding from the X direction for rounded and it will actually say to the

user log out so just refresh now you will see a

log out button as well so you'll see that and if I show you the table as well guys in the users table currently there

is you will actually see where is is my table uh

laral uh

larable just refresh it so you can see that so lar login is our database if I

open this there will be this users table and currently there is a single user out there which is logged in and it also has

a session table currently there is a single session out there it also supports storing the browser information

IP address everything load user ID as well so everything is stored and uh if I

click log out nothing will happen we 404 not found because we need to make this route so just go to your uh

route file which is stored inside I think I almost

forgot it is stored inside your routes web.php so now to actually uh write our uh

log out route it's very easy we will actually be writing

this route get and uh we'll say log out and then

again Au controller and we'll be calling the log

out function right here that's all so we'll be calling the

log out function when we click the log out route so just go to your uh controller file and just make this

function as well so in the log out function what we need to do we just need to redirect the

user to the homepage so first of all we'll call this log out function and

then redirect to the homepage that's all that's all that we

need to do guys in this application if you just do you'll see log out again

login so if you close the browser again open it it will automatically detect that you're already logged in so it will

automatically redirect to the profile page if I click log out and close the browser and again open it it will detect

that you logged out so that's the advantage of storing information in

sessions so you can do it for any Google browser if you're doing it for the very

first time then it will ask for the information to be

it will just see select your account continue and uh you'll see that so now

if I go to PHP admin there will be two database two users coding s and goam

Sh you will see that so everything is stored in the table as well so thank you very much guys for watching this video

all the source code with full documentation and support is given in the description you can directly purchase it and I will be seeing you in

the next video and thank you very much for watching this video