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: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:54
terminal let's paste that command and
2:57
let's hit enter here this is installing
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: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: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:38
project you will have to provide the
7:40
project name here I will give the
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: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: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: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: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
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: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:24
Google call back redirects and here I
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: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: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
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: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: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: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: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:56
will authenticate the user through the
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: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: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: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: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: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: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: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: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: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
