Laravel 11 Google Login Integration – Step By Step Guide with Socialite | Login with Google
Nov 5, 2024
🚀 Laravel 11 Google Login Integration – Step By Step Guide with Socialite 🚀
In this comprehensive step-by-step tutorial, I’ll guide you through the process of integrating Google Login into your Laravel 11 application using Laravel Socialite. Laravel Socialite is an incredibly powerful package that simplifies authentication with popular social platforms like Google, Facebook, Twitter, GitHub, and more. By the end of this video, you’ll have a fully functional, secure Google OAuth login system integrated into your Laravel app.
Whether you’re building a new app or adding a Google login feature to an existing Laravel project, this video will help you understand every detail of the process.
🚀 What You'll Learn in This Tutorial:
✅ Installing and Configuring Laravel Socialite:
First, we’ll start by installing the Socialite package in your Laravel 11 application and properly configuring it to work with Google’s OAuth services.
✅ Setting Up Google OAuth Credentials in Google Cloud Console:
I’ll show you how to set up your project in the Google Cloud Console, configure the OAuth 2.0 Client IDs, and obtain the required credentials like the Client ID and Client Secret. We’ll also ensure your OAuth consent screen is set up correctly to allow users to log in with their Google accounts.
✅ Routing and Controller Setup for Google Login:
Next, we’ll create the routes and controller methods to handle the Google login flow. This includes redirecting the user to Google’s login page, handling the callback, and processing the authentication data.
✅ Managing User Data and Login/Registration Flows:
We’ll go over how to handle user data from Google, including creating or updating user records in your database, managing the session, and checking if the user is logging in for the first time or returning.
Show More Show Less View Video Transcript
0:00
hey everyone welcome back to the
0:01
programming Fields I'm UMES Rana and in
0:04
the today's video we are diving into
0:06
something really exciting how to
0:08
integrate the social login specifically
0:10
in today's video we will implement the
0:12
Google login in your larl application
0:15
using laral socialite package the
0:17
socialite package makes it super easy to
0:20
authenticate users through popular
0:22
services like Google Facebook X LinkedIn
0:28
GitHub and more by the end of this video
0:31
you will have a fully functioning Google
0:33
login for your application and for this
0:36
we are using Lille 11 here but this
0:39
should work with earlier versions too so
0:41
let's get started but before we dive in
0:44
make sure you have subscribed to the
0:46
programming fields and hit the Bell icon
0:48
so you never miss any update from
0:50
programming Fields all right let's get
0:53
started by installing a FR laril 11
0:55
project however it is not needed if you
0:58
already have a Lille 11 project project
1:00
setup so quickly I will come to the
1:02
terminal and here I will install laral
1:05
11 application so I will type laral new
1:09
socialite app and for this application I
1:13
will choose a starter kit as laral
1:16
Bridge so I will select and I will hit
1:18
enter and for the bridge stack I will
1:21
choose Blade with alpine I won't choose
1:23
dark mode support so I will select no
1:26
and I will continue regarding the
1:28
testing framework I will choose paste
1:31
and I don't want to insize any G
1:32
repository as of now so I will go with
1:35
no and here the lar 11 application
1:38
installation has been started so let's
1:41
wait for a couple of seconds to finish
1:43
the
1:45
installation now regarding the database
1:47
it is asking which database you want to
1:49
choose I will select SQ light by default
1:53
and as of now I don't want to run the
1:55
default migration so I will select
1:58
no yes now it started installing Bridge
2:02
authentication and thereafter it
2:04
installed laral paste for the testing
2:07
framework and for the front end
2:09
dependencies this will install node
2:12
modules yes so the project setup has
2:14
been done now let's s into the project
2:17
folder and let's open this in the vs
2:19
code editor yes the project has been
2:22
opened in the vs code editor okay now
2:26
let's quickly start the application so I
2:28
will open the terminal here here and I
2:30
will type PHP artion serve the project
2:35
has been started on 8,000 Port now in
2:37
the next step we will have to install
2:39
the larl socialite package so let's come
2:42
to the official documentation of larl
2:45
and here under the socialite section if
2:48
we scroll down here we have the
2:50
installation command so let's copy this
2:53
let's come to the
2:54
terminal let's paste that command and
2:57
let's hit enter here this is installing
2:59
laral socialite
3:01
package yes the package has been
3:03
installed let's come to the project
3:05
folder and let's verify this so let's
3:08
search for the composer. Json
3:11
file here we have the laral socialite
3:13
package this is done now in the next
3:16
step we will access our application so
3:19
let's come to the browser and if we'll
3:21
try to access Local Host 8,000 this will
3:25
throw error because we have not executed
3:27
the default migration set Lal brige
3:30
package needs the database tables as
3:33
sessions in order to manage the
3:35
authentication session so we will have
3:37
to execute the default migrations at
3:40
this time so I will type PHP artion
3:43
migrate this said the database is not
3:46
created would you like to create I will
3:48
say yes and I will hit enter it created
3:52
the database.sql file and here it
3:55
executed the default migrations let's
3:57
come to the browser now let
4:00
refresh yes it loaded the larl homepage
4:04
here we have the login and register
4:05
option so larel brege provided default
4:09
register and login view all right but in
4:12
today's video we are not going to use
4:14
the authentication using laral Bridge
4:17
package instead we will use the
4:19
socialite login login with Google so
4:22
here I will have to add one more login
4:25
link that will redirect to the Google
4:27
login so inside this login page I will
4:30
add one more hyperlink here so let's
4:32
come to the code editor under the
4:35
resources views folder we have the Au
4:38
folder here inside this Au we have the
4:41
login. blade if you scroll down here
4:44
inside this div we have the for good
4:47
password and login button so here I will
4:50
add one more hyperlink just before this
4:52
for good
4:54
password and I will give title as login
4:58
with Google and inside this class I will
5:02
add Tailwind CSS classes here I will add
5:05
inline block addding X of 6 padding y of
5:11
two text white and here I will add
5:15
background color as a red so I will add
5:18
BG red 600 and also I will add rounded
5:22
border so I will add rounded LG and we
5:26
can add sadow class all right this is
5:29
fine let's come to the browser Let me
5:32
refresh yeah we have the button as login
5:35
with Google and here this design is
5:37
overlapping due to this small card so
5:40
here I will increase this card width of
5:43
this login page so let's come to the
5:45
code editor and inside this views folder
5:48
we have the layouts folder if we'll
5:50
expand this we have the guest layout
5:53
here so all the views which are not
5:56
related to authentication these are
5:58
rendered over this GI guest blade slot
6:00
so here we have the class added as SM
6:04
Max width MD I will change this to LG so
6:08
this will increase the width of that
6:10
card and if we refresh yes this
6:13
increased the card width here now
6:15
regarding these buttons we need some
6:18
spaces among these buttons so if we come
6:20
inside this login blade again here these
6:23
all buttons are added inside this flax
6:27
and this has class added as justify and
6:29
and so instead of justify end I will add
6:33
justify between this is fine let's
6:36
refresh now yeah we have spaces among
6:39
these buttons now we will have to
6:41
implement the login with Google
6:43
functionality so that when we will click
6:45
on this login with Google button this
6:48
will open the Google authentication and
6:50
after the successful authentication from
6:52
the Google a call back will happen and
6:55
that will again redirect back to this
6:57
application so in order to ex Ute this
7:00
firstly we will have to generate the API
7:02
credentials from the Google developer
7:04
console so let's open the Google
7:06
developer
7:08
console let's click on this Google Cloud
7:11
console here you will have to log to
7:13
your registered Google
7:17
account and after the successful login
7:20
you'll be redirected on this welcome new
7:22
page now in The Next Step you will have
7:24
to create or select a project so inside
7:27
this drop down you have have an option
7:30
to select a project but if you don't
7:32
have any project created you'll have to
7:35
create a new project from here so let's
7:37
click on new
7:38
project you will have to provide the
7:40
project name here I will give the
7:42
project name
7:44
as programming
7:46
fils O app now regarding the location
7:52
this is chosen under no organization
7:54
let's click on create so this is
7:56
creating the project all right again if
8:00
you'll click on this drop down here you
8:02
can see the project has been created if
8:05
you'll click on
8:06
this now we have selected this project
8:09
now here you will have to click on this
8:11
hamburger menu under this API and
8:14
services we have the credentials option
8:17
let's click on this here we don't have
8:19
any credentials created by default so
8:21
you'll have to create a new credentials
8:23
from this create credentials option
8:25
let's click on this here we will have to
8:27
create o client ID so let's click on
8:30
this o client
8:32
ID now you'll have to configure the
8:35
consent screen let's confirm this here
8:38
you will have to choose the user type
8:40
internal or external if you want to set
8:43
it only for your organization you can
8:46
set it internal as of now I will choose
8:49
external I will click on create now you
8:52
have the oo consent a screen let's
8:54
provide the app name as I will set
8:58
programming fields
8:59
you will have to provide any email
9:01
address I will choose the email address
9:04
logo is optional also you'll have to
9:07
provide the developer contact
9:08
information I will enter the same email
9:10
address here save and
9:13
continue now in the next step we have
9:15
the Scopes so I will keep this default
9:19
and I will click on Save and continue
9:21
now regarding the users I don't want to
9:23
add any users from here so I will keep
9:26
this default and I will click on Save
9:28
and continue we have the final preview
9:30
of this o consenter screen let's click
9:33
on back to dashboard okay this is
9:35
completed now let's click on credentials
9:38
again let's click on create credentials
9:41
and here let's choose o client ID again
9:45
now we have the drop down option we will
9:46
have to choose application type here we
9:49
are going to create web application to
9:51
manage the social login so I will choose
9:54
web application you can change this name
9:57
I will keep the same as web client one
10:00
okay now we have the add URI option here
10:04
in the URI option you will have to
10:06
provide the application URL for which
10:09
you want to make browser request so in
10:12
our case our application URL is running
10:14
on the Local Host 8000 so I will provide
10:17
this Local Host 88000 URL here so I will
10:20
add URI as HTTP col
10:24
SL Local Host colon 8000 so this is our
10:28
base URL of this Local Host application
10:31
in case your application is deployed on
10:33
your web server then you can provide
10:35
that domain name here now in the next
10:38
step we have to add the authorized
10:40
redirect URI so this will be basically
10:43
our call back URLs on which the Google
10:46
will redirect after this successful
10:48
authentication so we will have to create
10:51
a route in our application and we will
10:53
have to provide that route URL here so I
10:56
will add URI as
11:00
HTTP Local Host
11:03
8,000 and here I will provide one route
11:07
URL let's suppose o and uh I will add
11:11
Google call back you can provide any
11:13
route here based on your application but
11:16
you'll have to make sure you'll have to
11:18
add the same route in your application
11:20
as well so that after the successful
11:23
authentication Google will understand
11:25
that where it should redirect let's
11:28
click on create yes it generated the
11:30
client ID and client secret you can
11:33
download this Jon from here now in the
11:36
next step we will have to add these
11:38
credentials in our application
11:40
configuration so what I will do I will
11:43
simply copy this client ID I will come
11:45
to the application now I will come to
11:48
the file and if Will scroll down and
11:52
here I will add a few variables for the
11:55
configuration so I will add Google
11:59
client ID and I will paste that okay
12:03
next we will have to create
12:06
Google client
12:08
secret I will come to the developer
12:10
console again I will copy this client
12:13
secret and I will paste it here okay now
12:17
we will have to create one more variable
12:19
and that will be for our call back URL
12:22
so I will add
12:24
Google call back redirects and here I
12:29
will provide
12:31
HTTP Local Host 8000
12:35
o/ Google callback and if you remember
12:39
while creating the O client ID I had
12:42
added the same callback URL in the
12:44
Google developer console okay so this is
12:47
all you need to configure the Google
12:49
authentication thing so we have added
12:51
these all credentials in the EnV file
12:54
now we will have to use these
12:55
credentials while making the O request
12:58
to the Google so before making that
13:00
we'll have to come under the config
13:02
folder here we have the services. PHP
13:04
configuration inside this if you scroll
13:07
down here we have the list of arrays so
13:10
inside this array I will create one
13:13
configuration for the Google okay here
13:17
we will have to add client
13:19
ID and we will fetch that client ID from
13:22
the ENB file and we have the Google
13:26
client ID there next we will have to add
13:29
client secret and that I will fetch it
13:32
from Google client secret lastly we will
13:36
have to add the redirect key and again I
13:39
will fetch this from EnV itself so we
13:42
have the Google call back redirects
13:45
variable you'll have to make sure you
13:47
are keeping the same Keys here in this
13:50
array so you'll have to keep client ID
13:53
client secret and redirect if you'll
13:56
come to the official documentation of
13:57
larain
13:59
and if you scroll down here you will
14:01
have to add the array in the same format
14:05
client ID client secret and redirect
14:08
okay now it totally depends on you
14:11
either you can create the credentials in
14:13
the EnV file or you can add those
14:16
credentials directly in the
14:18
configuration of this Services file but
14:20
this will be more convenient if you add
14:22
the credentials in the ENB itself so
14:25
that you can change this anytime when
14:27
this is needed and every time you don't
14:29
have to come inside this configuration
14:31
of this service file and please don't
14:34
try to use this credentials because
14:36
anyhow after this application setup I
14:38
will remove that application from this
14:41
Google okay so you won't be able to use
14:43
the credentials again now let's come to
14:46
the next step we have configured the
14:49
credentials here now in the next step we
14:52
will have to add the redirect
14:53
functionality in this login with Google
14:56
hyperlink
14:59
so here I will add one route as let's
15:03
suppose au. Google and we will have to
15:06
Define this route in the web.php file so
15:09
I will come to the web.php file and here
15:13
I will create one route as route colon
15:16
colon get I will add
15:20
o/g Google okay and we need a controller
15:24
in which we can Define some functions in
15:27
order to manage the Google login I will
15:30
create a new controller so I will type
15:32
PHP artion make controller I will give
15:37
the controller name as socialite
15:39
controller let's hit enter yes the
15:42
controller has been created now I will
15:45
import that controller so I will add so
15:48
slight controller colon colon class and
15:52
I will add the function name
15:54
as Google login okay and I will add the
15:59
named route
16:00
as au. Google because we have already
16:04
configured this route name inside this
16:07
login with Google URL this is fine now
16:10
we will have to come inside the
16:11
socialite Au
16:14
controller and we will have to create a
16:17
function public function Google
16:21
login okay now inside this function we
16:24
will have to add a redirection to the
16:26
Google based on the socialite Drive
16:28
driver so we will have to
16:31
return social light and we will have to
16:35
import this package from laral socialite
16:38
faad socialite inside this return
16:41
socialite we will use the driver
16:44
function and inside this driver we will
16:46
have to provide the driver name So
16:48
currently we are implementing the Google
16:51
login so we will have to provide the
16:54
Google here and we will call the
16:56
redirect function okay this is fine so
16:59
this function is for redirecting to
17:01
Google
17:05
only this function will redirect to
17:10
Google and this does not need any
17:14
parameter okay this is fine now if you
17:17
come to the browser if we refresh and if
17:20
we'll try to click on login with Google
17:22
you can see this redirected to the
17:25
accounts.google.com
17:26
and this is trying to make the O request
17:29
to the Google and here you will have to
17:31
choose the Google account through that
17:34
you want to authenticate and after the
17:36
successful authentication this will
17:38
again redirect back to your application
17:40
so you will have to handle that request
17:42
as well so firstly we will handle that
17:44
request so let's come to the application
17:47
and we will have to Define that route
17:49
here that we already configured in the
17:51
Google developer console so I will
17:54
create one more route as route colon
17:56
colon get and here I will add the
17:59
endpoint name as Au Google call back and
18:04
again we will have to add the function
18:06
in the same controller so what I will do
18:09
I will create the controller group
18:13
routes okay I will add group function
18:18
and I will add these two routes inside
18:20
this so I will move these routes inside
18:23
this I will remove
18:26
this now regarding the second route we
18:29
will have to Define one more function
18:31
as Google authentication and here I will
18:34
provide the route name as au. Google
18:39
callback now let's copy this function
18:41
name let's come inside this socialite
18:43
controller let's define this function as
18:47
public function Google authentication
18:51
okay I will add The annotation this
18:54
function
18:56
will authenticate the user through the
19:00
Google
19:01
account this does not need any
19:04
parameter okay now inside this function
19:07
we will have to get the authenticated
19:09
user data so for that we will have to
19:12
call the socialite driver function again
19:15
here we will have to provide the driver
19:18
name as Google and then we will have to
19:21
call the user function and uh I will
19:25
capture this in a variable as Google
19:28
user user this is fine and I will add
19:31
dump and die dollar Google user here we
19:35
will check if we are getting the
19:38
authenticated user data from the Google
19:41
so let's come to the application let's
19:43
go back let's refresh let's try to click
19:46
on login with
19:48
Google now let's choose your Google
19:50
account I will select my Google account
19:53
here and after selecting here it ask to
19:56
sign in with the Google confirmation I
19:58
will continue so after the successful
20:01
authentication here it returned the
20:03
users data from the Google firstly we
20:06
have the Google ID here the Google
20:09
generated the unique ID for this user
20:12
authentication here we have the name
20:14
email and the user details okay so after
20:17
the successful login we have to capture
20:20
this Google ID and we will have to store
20:22
this in our users table so that on every
20:25
Google authentication this will check if
20:28
this Google ID exist in our users table
20:31
then it won't insert that user in the
20:33
users table instead this will directly
20:36
login that user so first time this will
20:39
insert that user if that user does not
20:42
exist in the users table okay so in
20:45
order to store this Google ID we will
20:47
have to create a new column in our users
20:50
table so let's come to the code editor
20:52
inside the users table migration I will
20:55
add one more column as dollar table
21:01
string Google ID and by default I will
21:05
set this to nullable okay and now I will
21:09
rerun the migration so I will come to
21:11
the terminal I will type PHP
21:14
Artis migrate
21:17
refresh okay this added the migration
21:22
and if we'll check in the database dosq
21:24
light inside the users table we have the
21:28
Google ID added now let's come to the
21:31
controller again and here we will have
21:33
to capture that Google ID so here what I
21:37
will do I will check from the user table
21:40
so I will import user
21:43
model
21:45
where Google ID is Google user ID all
21:52
right that means from the users table
21:54
Google ID I will check if we have same
21:57
Google ID that is coming from Google
22:00
authentication then I will make that
22:02
user to authenticated login else we will
22:05
have to create that user so I will use
22:08
first function here and I will store
22:10
this in a variable as dollar user okay I
22:14
will add if condition if the user exists
22:17
in the user table then I will use Au
22:20
function we'll have to use the O
22:23
function and I will use the login
22:26
function and here I will have to import
22:28
the this o facad so I will use
22:32
illuminate support facades o
22:37
okay and inside this Au login function I
22:41
will pass this user all right so if the
22:44
user data exists in the user table then
22:47
this will make that user to
22:48
authenticated login and after the
22:51
successful login we will have to
22:53
redirect to the dashboard page so we
22:56
already have the dashboard route
22:57
provided by L will Bridge so I will use
23:01
return
23:02
redirect
23:04
route dashboard all right now if that
23:08
user does not exist in the user table
23:11
then we will have to add the else
23:13
condition and inside the else condition
23:16
we will have to insert that user data
23:18
okay so we will have to create the user
23:21
data array here so I will call user
23:23
model create function again inside this
23:26
array I will add
23:29
name as we are getting the name from the
23:32
Google user if we'll check the data here
23:36
we have the name field we have the email
23:39
all right so according to this we can
23:41
store name and email inside the users
23:44
table if you need to store AAR you can
23:47
store that let's continue this so I will
23:50
create name and this will come from the
23:53
Google user name field next we have
23:56
email field and that will we will store
23:59
from Google user email address also we
24:03
will have to create a dummy password for
24:05
that user so I will use has facad and I
24:10
will call the make
24:12
function we have the has facad imported
24:15
here I will pass password as a Dy
24:21
password okay and also we will have to
24:23
store the Google ID that we have created
24:27
a new column here
24:28
and this will be captured from the
24:31
Google user primary ID and if we check
24:35
here we have the Google ID okay this is
24:38
fine and after creating this user record
24:42
again we will have to make this user to
24:45
login so I will capture this in a
24:47
variable as user data I will check if we
24:53
have the user data again again I will
24:56
call Au login function here
24:58
and inside this I will pass this user
25:01
data and also we will have to redirect
25:05
this user to the same dashboard route
25:09
all right this is done now let's remove
25:12
this dump and die here and I will keep
25:15
this entire function in a TR catch
25:19
block and I will use this
25:22
exception okay let me cut these lines
25:26
from here and I will keep this is inside
25:29
this Tri block and here I will add dump
25:32
and die dollar e okay this is fine and
25:37
before executing this we will have to
25:39
add the Google ID column in the fillable
25:42
property inside the user model so if
25:45
you'll come inside the app models
25:48
user.php here you'll have to add that
25:51
fillable property as Google ID now let's
25:55
save come to the browser let's go back
25:58
let's refresh this page and let's try to
26:00
click on login with Google Now this is
26:04
authenticating yes and after the
26:06
successful authentication here we can
26:08
see this user has redirected to the
26:11
dashboard page and here in the profile
26:13
option we are getting the profile name
26:16
and email address and these details are
26:19
coming after the authentication from the
26:21
Google because we have not created any
26:24
user manually after the successful
26:26
authentication this has Reg registered
26:28
the user in the users table and if we
26:32
check the database. sqlite here we have
26:35
the registered user name email and we
26:38
have the Google ID stored here okay
26:41
let's come to the browser let's log out
26:44
let's try to click on login again and
26:47
again I will click on login with
26:50
Google yes this automatically logged in
26:54
that user and if we check the users
26:56
table
26:59
it has not created second entry of that
27:02
user because that user and that Google
27:05
ID already exist in the user table okay
27:09
now if will try to login through the
27:11
password because we already registered
27:13
that user and if we'll click on login I
27:17
will provide that email address here
27:20
also I will have to provide that
27:21
password and we added the password as
27:24
password at theate 1 2 3 4 let me copy
27:28
and paste it here and if we click on
27:30
login yes we have logged in through the
27:33
password as well now if we log out the
27:36
application and here if you sign out
27:38
from
27:40
chrome okay and if you refresh the
27:43
application and if you try to click on
27:45
login again let's choose the login with
27:47
Google here it asked for the account
27:50
that you want to use for the
27:53
authentication purpose and if you'll
27:55
select that account you will have to
27:57
enter the password for that and after
28:00
entering the password if I will click on
28:02
next this is authenticating and again
28:05
you'll have to confirm the sign
28:08
in yes again I have logged into that
28:11
application okay and that's all we have
28:14
successfully set up Social login with
28:17
Google in our larl application using
28:19
socialite it's that easy if you found
28:22
this video helpful be sure to give it a
28:25
thumbs up and share it with your
28:27
developer friends also if you have any
28:29
questions or suggestion for the future
28:31
videos don't forget to drop a comment
28:33
below and also don't forget to subscribe
28:36
to the programming Fields Channel and
28:38
hit the notification Bell to stay
28:40
updated with more tutorials in the next
28:43
video we will explore how to integrate
28:45
Facebook login using socialite so stay
28:48
tuned for that
28:51
[Music]
#Programming
#Social Network Apps & Add-Ons
