Up next in 10
Build a Laravel 12 Google OAuth2 Login & Logout System Using Socialite Library in Browser
Jun 7, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-laravel-11-google-oauth2-login-logout-system-using-socialite-library-in-browser/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys uh welcome to this video
0:04
So in this video I'll show you how to
0:06
integrate the Google authentication
0:08
system inside Laravel 11 which is the
0:11
latest version And uh you can see on
0:14
your screen this is the demo project
0:16
that we will be building If you land on
0:18
this homepage you will see this login
0:21
button of Google sign in with Google So
0:25
if you click this button you will be
0:26
redirected to login with your Google
0:28
account You select the Google account
0:30
and then you simply grant the permission
0:33
Simply select continue After that it
0:35
will redirect you to the dashboard page
0:38
You will here you will actually get your
0:40
profile data So now let me just fix this
0:43
I think I'm getting this
0:46
data So this is the overall project here
0:49
If you
0:50
see in the dashboard
0:54
page we are welcoming the user right
0:56
here
1:00
uh inside this route folder I think I
1:07
made so you we'll try to build this
1:09
project from scratch guys
1:11
So I think this
1:14
is inside you will see you will be
1:17
redirected to this callback URL where
1:19
you will authorize this and
1:22
automatically Yeah So inside this Google
1:25
controller file you have this controller
1:28
as
1:29
well which is located inside the app
1:32
folder and then http and this is your
1:35
Google controller
1:37
So here we are printing out this you
1:41
will see let me just delete this So if
1:44
you again refresh it you will see again
1:47
click it and you will be redirected to
1:50
and then it will print out your username
1:52
and then the email address So and then
1:56
we also have the log out button as well
1:58
and as soon as you click log out you
2:00
will be log out and again redirected to
2:03
the login page So it will automatically
2:05
detect if you are logged in then it will
2:07
redirect you to the profile page Now let
2:10
me close this window and again open my
2:13
homepage then it will detect that you
2:16
are automatically logged in So it will
2:18
uh automatically redirect you to the
2:21
dashboard page So this is the overall
2:24
application that we will try to build
2:26
inside Laravel 11 and for this we are
2:29
using a library of Laravel which is
2:32
socialite If you just write socialite
2:35
laravel this is a package here which
2:38
provides you access with various oath
2:41
providers So this is the Laravel library
2:44
socialite that we will be using This is
2:46
their GitHub page and official website
2:49
So now let's get started and uh I will
2:53
just create a new directory where I
2:59
will first of all you should have
3:01
Darable installed and composer as well
3:04
Composer is a tool by which it's a
3:07
dependency manager for PHP So you should
3:09
have composer installed So I am assuming
3:12
that you have installed composer So
3:14
there is a simple command here composer
3:17
create
3:18
project and then say
3:21
Laravel/
3:23
laravel and then your project name So
3:26
let me say
3:27
login Google oorthth 2 app this is the
3:32
project uh command name we simply write
3:35
composer create project laravel/ larl
3:38
and then your project name So I'm just
3:40
giving here google oath app So simply
3:43
enter it and then it will install all
3:45
the dependencies which is needed to
3:47
create a Laravel project It will just
3:49
require you to wait uh 10 to 15 seconds
3:52
and then it
3:54
will basically create a new Laravel
3:56
project You can see it is creating it So
4:00
just wait for all the installation to
4:03
finish So all the source code is given
4:06
in the description of this live stream
4:08
So if you want the full source code you
4:10
can go to the description
4:13
link
4:16
So Laravel basically it's a very popular
4:20
PHP framework So the latest version of
4:23
Laravel is at this time of recording
4:25
this live stream is 11 I
4:28
think Laravel 11 So if you
4:31
visit their official
4:33
website it was released in
4:37
March
4:39
23rd So we are using the latest
4:45
version If you're watching it for the
4:47
very first time then please hit that
4:49
like button subscribe the channel as
4:51
well
4:56
So so once it completes we will try to
4:59
go into the folder You can see now the
5:03
migrations everything happened
5:05
successfully So we can now navigate to
5:07
the folder which is Google O2
5:11
app Let me open it inside VS code This
5:14
is the basic Laravel project guys The
5:17
directory structure that you see And the
5:20
very first thing we need to do we need
5:22
to install this package which is
5:25
socialite package For doing this we
5:27
simply write composer and then we say
5:30
require and then we say
5:33
laravel/ socialite So this is the
5:36
command to install that package So
5:38
simply execute this command So it will
5:40
install this package
5:46
So all your information related to the
5:49
modules are located inside this file
5:51
here composer.json So if you try to open
5:54
this file you can see we are using the
5:57
latest version of Laravel which is 12 I
5:59
think Yeah Laravel 12 and then PHP 8 and
6:04
this Laravel socialite version
6:07
So I think let me update the title of
6:11
the live stream I think it's Laravel 12
6:13
not
6:17
11 Let me just update the title here
6:20
This is Laravel
6:24
12 So now the next step we need to do uh
6:28
we just need
6:29
to uh go to the services folder So there
6:33
is this config folder that you see
6:36
Simply go to the this services dotphp
6:39
file and right here you need to
6:40
configure the third party service right
6:44
here you
6:46
simply after this simply say
6:50
Google and here you specify three things
6:53
we need to specify first is the client
6:56
id client ID and we'll all be getting
7:00
this information from the environment
7:02
variable so I will just create these
7:04
three variables which first First of all
7:06
the Google client ID Secondly we
7:09
have client
7:13
secret We'll call this
7:16
as Google client
7:20
secret And then lastly we have the
7:23
redirect URL
7:31
So now we just need to create these
7:34
three variables inside your environment
7:37
variable You will see this file
7:38
appearing which is env Simply go to this
7:41
file and here you need to create these
7:43
three variables which is Google client
7:47
ID client secret and redirect
7:51
URI So right here uh redirect URI will
7:54
be constant uh our application will be
7:57
running on localhost 8,000 port number
7:59
So
8:02
/oth/google/allback So just make this
8:04
redirect URI like this And then to get
8:06
the client ID and client secret you need
8:08
to go to Google Cloud
8:12
Console and just create account here and
8:16
uh free account and go just go to APIs
8:19
and services and write here go to here
8:25
credentials and here you need to create
8:28
a OOTH client ID and from the drop-down
8:33
you need to select web application
8:36
application type to web application and
8:39
this authorized JavaScript origin you
8:41
need to add HTTP localhost and one other
8:44
URL which is HTTP
8:46
localhost the port number as well so
8:49
8,000 so both the URLs you need to add
8:52
and then inside the authorize redirect
8:54
URL you need to add this full
8:59
URL just paste it and then click on
9:03
create and then it will give you your
9:05
client
9:06
ID So just copy your own client ID and
9:09
paste it
9:11
here And then it also gives you the
9:13
client secret as well So paste it
9:16
here So after that you need to close
9:19
this file and then we need to create a
9:22
controller All the controllers are
9:24
located inside your app
9:26
http So this is your controller So there
9:29
is a command here in Laravel that you
9:31
can use which is PHP
9:34
artis make colon controller and then the
9:38
name of the controller So we simply say
9:40
Google
9:42
controller So if you execute this
9:44
command here it will create this custom
9:47
controller and you'll see this
9:49
controller is created and right here you
9:52
need to paste this code
9:55
here So we need to write some code here
9:58
which is first function will
10:01
be responsible for redirecting the user
10:04
to the Google website This
10:06
is this controller will use this
10:09
socialite package So you simply say
10:13
socialite you need to import the
10:15
necessary packages right here at the
10:19
top So right here you
10:23
simply use
10:26
the package that you installed which is
10:29
socialite and
10:32
app
10:34
slashmodels slash sorry this needs to be
10:38
just
10:45
app and then we also need to include the
10:48
o package as well
10:51
like
10:56
this So after that here use this package
11:01
socialite It contains this driver
11:03
function and here you specify Google
11:06
because we are working with Google
11:08
and then it contains this function which
11:11
is
11:14
redirect So this function will be
11:16
responsible if you click the login
11:18
button This will redirect the user to
11:20
Google website And then we also need to
11:24
add
11:25
this call back function as well So
11:27
whenever you are authenticated from
11:30
Google this call back function will
11:32
execute So handle Google call
11:36
back So right here in the try catch
11:39
block we will get the Google
11:42
user using this
11:46
socialite driver
11:51
Google and then it contains the
11:54
stateless
11:56
user So it will return this user to this
11:59
And
12:01
now we can get all this information
12:04
which is contained inside this object So
12:06
we can simply
12:10
say the user class we can use which is
12:14
update or create
12:18
function and here we can get all the
12:21
properties that it returns which is the
12:23
email the name of the user Google ID
12:26
avatar password
12:29
everything So in this easy
12:34
way and then after that we can
12:36
authenticate this by using the o class
12:40
login function and login the
12:43
user and then
12:45
we return
12:49
redirect So this code is constant here
12:52
because it is using this library and we
12:54
redirect the user back to the dashboard
12:56
page you will create all these pages but
13:00
uh this code is
13:03
constant So once you p once you get the
13:06
source code you
13:08
will so this you need to write only for
13:12
for the very first time So once you're
13:14
authenticated automatically this is the
13:18
Google controller
13:33
file Just make sure that you have
13:38
put So after you do this uh now you need
13:43
to create migrations as well The
13:46
migrations are located inside this
13:47
database folder if you see So all this
13:50
data will be stored as well inside the
13:52
tables So right here you can go to the
13:55
terminal and just run the migrations as
13:59
well which is PHP
14:01
artisen
14:03
makeers make colon migration and then
14:06
you can
14:09
simply name your migration So I will say
14:12
add google
14:15
id to users table
14:22
This is the command here to create a
14:24
migration And once you enter it you will
14:27
see the migration will be created And
14:30
right here in this up function the table
14:33
of users you just need to add this
14:35
column which
14:37
is
14:39
table and this will be a Google
14:44
id and we call this function which is
14:47
nullable
14:50
So automatically you are authenticated
14:53
the table will be created and now to run
14:56
this migration you simply say PHP
14:59
artician
15:03
migration So now this migration will be
15:06
automatically be executed That's all
15:10
After that you need to go to this routes
15:12
dotphp file So everything is uh uh well
15:18
organized in larable So inside all your
15:20
routes are located inside this file
15:22
routes web do.php by default it only
15:25
shows So now to run this application you
15:28
simply say PHP RTS ser this will start
15:32
your application at localhost 8000 you
15:34
will see only single route is there So
15:37
when we visit the homepage it will show
15:39
us
15:41
the this welcome page So now you can see
15:45
this is the welcome page of Laravel So
15:47
this uh views are located inside this
15:50
resources folder if you see and this is
15:54
your folder views and this welcome
15:57
blade.php This is a file it is showing
15:59
right here If I change this let's
16:02
suppose I
16:04
simply type a hello world message If I
16:07
refresh now you will see it will now
16:10
show this hello world message So this is
16:12
meant by this and here you need to
16:16
inside this routes you need
16:19
to import the necessary
16:22
packages the route the o package and we
16:26
are also importing the controller file
16:28
as
16:29
well And now we need to edit this when
16:33
the user visits the homepage we need to
16:35
first of all check that if the user is
16:37
authenticated or not For checking this
16:39
we simply use the check method If they
16:41
are authenticated then we redirect them
16:43
to the dashboard
16:46
page So slash
16:49
dashboard If they are not authenticated
16:51
then we simply redirect them to
16:55
the login page So we simply show the
17:00
login page So this is we have the
17:02
redirect function We have the view
17:04
function in
17:06
Laravel and now we just need to create
17:10
these two files Simply delete this this
17:12
welcome file and just create the login
17:17
dot blade dot PHP Then also create
17:22
dashboard blade dot PHP So this will be
17:25
your dashboard page So whenever you
17:27
authenticate
17:29
it you are
17:33
authenticated and this will be your
17:35
login page
17:40
So so this let me just paste the code
17:44
here for login
17:46
page You can design this accordingly but
17:49
I'm just having a simple login page We
17:52
have a div with the class of Google
17:55
button and in the href we are
17:57
redirecting the user to URL O/ Google So
18:01
as soon as they click the login button
18:03
they will be redirected to this route
18:05
here which is o/ Google So now we just
18:08
need to define this route
18:14
So now to define a new route we simply
18:17
again say
18:20
route
18:23
get o/ google and uh we need to use this
18:27
controller here which we imported google
18:30
controller
18:34
class and we put a comma right here and
18:38
we specify which function to execute So
18:41
we ex basically declared this function
18:43
redirect to Google So this function will
18:46
execute from this
18:48
controller and uh just put a
18:52
semicolon So now what you do if you
18:55
refresh you will see this sign in with
18:58
Google button As soon as you click this
19:00
button you will be redirected to Google
19:02
where you need to select the Google
19:05
account like this
19:07
And we also need to define the function
19:09
What happens so now if you click if you
19:13
select your Google account it will
19:16
basically redirect you to the
19:18
authentication page you can see 404 not
19:22
found because we haven't created this
19:24
route
19:25
o/google/allback So it basically returns
19:28
this authorization code We need to
19:29
exchange it for access token For doing
19:32
this we need to define this route here
19:35
which
19:36
is the call back
19:40
URL which will be o/ Google/
19:46
callback and then we again use the
19:48
Google controller that we
19:51
imported and we need to now execute this
19:54
function which is handle Google call
19:58
back So it will return this
20:01
authorization code to get the access
20:03
token Now to get the profile information
20:08
So it will redirect you to the dashboard
20:11
page So again if you click now continue
20:15
So now you'll be redirected to the
20:17
dashboard page So now it is saying that
20:20
dashboard is not found So we need to
20:22
create the route for dashboard as well
20:27
So we simply say /
20:36
dashboard and basically here
20:38
we return this view for dashboard which
20:42
is /
20:47
dash and now to basically add this
20:49
middleware as well because only
20:51
authenticated users must access this
20:53
route So we add this middleware which is
20:56
O This basically make sure that only the
20:59
authenticated users are accessing it So
21:02
you can see you are authenticated and
21:04
again if you you will automatically be
21:07
redirected because you're already
21:09
authenticated But if you try this on a
21:12
new account here if I
21:15
access a new account and again visit
21:18
localhost 8000 then it will be showing
21:21
this sign in with Google button So this
21:24
is the
21:26
thing and now we can actually edit our
21:31
dashboard page So to show this
21:38
information So this will actually
21:41
contain all the necessary information
21:43
such as your
21:45
username You will see we are showing
21:49
this information which
21:51
is welcome in double curly brackets we
21:56
use
21:57
this user object and we are displaying
22:00
the username right here this is username
22:03
if avatar image is also available then
22:05
we can even show the avatar image but
22:07
I'm not showing that and now to actually
22:10
show the email address as well we can
22:13
simply say o user email and then we have
22:17
a simple log out button as well So once
22:19
you click the log out button we make a
22:21
post request to this route log out So
22:25
now we just need to add this log out
22:27
request So if you just refresh now you
22:29
will
22:30
see your profile
22:35
information So it is saying logout is
22:38
not defined
22:40
Let me just remove this for the time
22:43
being and show to you So you will see
22:45
you will get this information and let me
22:48
now add the log
22:50
out route here
22:56
So so right here you add
22:59
this post request for logout slash
23:06
logout So you provide this
23:12
request and here you simply call this
23:16
log out function which is available in
23:18
this library and then you clear out the
23:20
session
23:22
data everything
23:25
This will delete everything in the
23:27
session which is and redirect you to the
23:28
homepage and then we will simply call
23:31
this as log
23:35
out So that's all that we need to do and
23:39
for this you need to import this request
23:42
module as well because we are getting
23:44
this
23:47
request So this completes your project
23:50
and if you refresh now you will also see
23:52
a log out button unexpected identifier
23:57
route Oh sorry just make sure that you
24:00
put semicolon at and
24:02
then so
24:05
now so we have this log out button If
24:08
you click log out you will be redirected
24:11
and so now you are successfully log out
24:14
again you click you will
24:16
be So this is a simple authentication
24:20
system of Google that we saw in Laravel
24:22
11 using this socialite package All the
24:26
source code is given in the description
24:28
of this video guys and uh thank you very
24:30
much for watching this video and also
24:33
check out my website
24:35
freemediatools.com which contains
24:38
thousands of tools related to audio
24:40
video and
24:42
image and I will be seeing you in the
24:45
next video