๐ Instant Facebook Login Setup in Laravel 11 with Socialite ๐
In this comprehensive step-by-step tutorial, Iโll guide you through the process of integrating Facebook 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 Facebook's OAuth services.
โ
Setting Up Facebook OAuth Credentials in Developer Facebook:
Iโll show you how to set up your project in the Developer Facebook Console, configure the OAuth 2.0 Client IDs, and obtain the required credentials like the Client ID and Client Secret.
โ
Routing and Controller Setup for Facebook Login:
Next, weโll create the routes and controller methods to handle the Facebook login flow. This includes redirecting the user to Facebook'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 Facebook, 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
hello everyone welcome back to the
0:02
programming Fields I'm Umesh Rana in our
0:04
last video we implemented the social
0:07
login in larl 11 in which we added the
0:10
login with Google functionality we did
0:12
the project setup along with the larl
0:15
socialite package integration now in the
0:17
today's video we are going to implement
0:19
the Facebook login in our larl
0:21
application using larel socialite
0:23
package so by the end of this video you
0:26
will have a fully functioning app having
0:28
the Facebook login for your app
0:30
application so let's get started to the
0:32
Practical part quickly firstly we will
0:34
start with this login page customization
0:37
so we will have to add one more login
0:39
button and that will be login with
0:41
Facebook so let's come to the code
0:43
editor inside the resources views we
0:47
have the Au and we have the login blade
0:50
for the front end views we are using
0:53
laral Bridge package all right so
0:55
previously I added this login with
0:58
Google button here this is basically a
1:00
hyperlink now we will have to add one
1:02
more hyperlink for Facebook login so
1:05
what I want instead of adding the
1:07
buttons in the same div I will create
1:09
one more div after this div here so I
1:12
will copy this div class flax and I will
1:16
add it here now from here I will cut
1:19
this login with Google button and I will
1:21
add it inside this div okay so this will
1:25
be
1:26
our social login section if I will
1:29
refresh
1:30
we have the login with Google button
1:32
here now instead of this login with
1:34
Google text here I will add image so I
1:38
already downloaded some images for these
1:40
icons here we have the Facebook Google
1:43
LinkedIn Twitter Etc so I will add image
1:47
here instead of this text I will remove
1:49
this text here and inside this I will
1:52
add image SRC tag and I will fetch it
1:55
from
1:57
asset assets icons this will be our
2:03
Google okay and regarding this
2:06
background we don't need this okay let
2:09
me refresh once we have the large icon
2:12
so I will fix the width for all these
2:14
icons here so I will add one custom
2:17
class as
2:19
social link and I will add the style for
2:23
this class so as of now I will add this
2:26
style here just above this guest layout
2:33
all right and inside this social link we
2:36
have the image tag so for all the images
2:39
I will set width as let's suppose 30px
2:43
now let's come to the browser Let me
2:46
refresh yes this is fine now I will add
2:49
one more hyperlink for the Facebook
2:51
login so I will duplicate this
2:54
hyperlink this will be login with
2:57
Facebook I will change this icon to
3:01
assets icons we have the facebook.
3:04
JP okay let me refresh once we have the
3:08
background white here text white this is
3:12
not required adding X this will be three
3:16
okay this is fine and I will remove
3:19
justify
3:21
between okay this is fine we have the
3:24
login with Google login with Facebook
3:26
button I will add title attribute for
3:28
this
3:31
this will be
3:32
title login with Google and this will be
3:37
for login with Facebook let's refresh
3:41
and here we have the login with Google
3:43
and login with Facebook okay I will add
3:47
some space between these buttons so
3:49
better I will add in this
3:51
style social link and I will add
3:56
margin WR 5px okay let's
4:01
refresh we can add it to 10px yeah this
4:05
looks nice now so we have the login with
4:08
Google login with Facebook now we will
4:10
have to implement the Facebook login
4:12
here so firstly we will have to add the
4:14
Facebook redirection by clicking on this
4:16
Facebook button okay so I will come to
4:19
the code editor and here we can see
4:22
previously we were using this route o.
4:25
gooogle and currently we have to
4:27
implement this for Facebook so I don't
4:29
want want to create a separate route for
4:31
the redirection because later we will
4:33
have more login buttons here just like
4:36
we will have GitHub login we will have
4:38
LinkedIn we will have X all right so
4:41
instead of creating separate route for
4:43
this redirection I will create a common
4:46
route and I will just pass one flag here
4:49
okay so what I will do I will create a
4:52
route as Au do
4:55
redirection and I will pass this Google
4:58
as a parameter inside that and same
5:01
thing for this I will pass au.
5:03
redirection here I will
5:06
pass okay now I will copy this route
5:10
endpoint I will come to the web.php file
5:13
here we had created this route as o/g
5:17
Google and this was triggering this
5:20
Google login function so here I will
5:22
modify this function as
5:25
/ redirection and I will capture this as
5:30
a variable just like provider okay and
5:34
here I will rename this function from
5:37
Google log to Au provider redirect okay
5:42
I will change this name to Au do
5:46
redirection this is fine now I will copy
5:49
this function name I will come to the
5:53
soite controller here previously we set
5:57
this for Google redirection only now I
6:00
will rename this function to Au provider
6:02
redirect first and here I will capture
6:05
one variable as provider I will add dump
6:10
andai provider let me come to the
6:13
browser first Let me refresh now let me
6:16
try to click on login with Google button
6:19
we are getting provider as Google same
6:22
thing if I will try to click on Facebook
6:24
yes I'm getting that provider name so I
6:27
will pass this provider dynamically here
6:30
inside this
6:32
driver okay I will add one condition if
6:37
we have the
6:39
provider then this will be redirected
6:41
inside this socialite okay else I will
6:45
add about
6:47
44 now based on this provider name this
6:51
will be redirected on that page here I
6:53
will change this message as given
6:55
provider now if we scroll down we create
6:59
cre this function for authentication so
7:02
I will change this function to social
7:05
authentication inside this we will have
7:07
to pass the provider again all right now
7:10
I will change this function inside
7:11
web.php route now previously we added
7:15
this route name as au. Google callback
7:18
that we will have to change to a common
7:21
route name so that we can use this for
7:23
multiple social login previously we set
7:27
this only for the Google call back now
7:29
in the case if we want to use the same
7:32
route for the Facebook or other login
7:34
then we will have to make it common so
7:37
instead of au. Google callback I will
7:39
set this to au. callback only and here
7:43
in the route endpoint name I will change
7:46
this to
7:47
au/ call back and I will capture that
7:51
provider name all right now we will have
7:53
to modify the function name that we
7:55
already added as social authentication
7:58
now we will have to come inside tnb file
8:00
here we added the Google client ID
8:03
client secret and call back redirects so
8:05
previously we were using this route as /
8:09
Google callback okay so instead of this
8:12
/g gooogle callback I will keep this as
8:16
a dynamic something so I will capture
8:18
the provider here and I will add SL call
8:23
back so this route endpoint name will be
8:26
like au/ Google / callback and if we'll
8:31
check it for Facebook this will be /
8:34
facebook/ callback okay now we will come
8:37
to the
8:40
file here we added client ID client
8:43
secret and redirects for the Google and
8:47
in the call back redirects we added the
8:49
redirection URL so I will change this
8:52
route as o/g go/ callback okay now we
8:57
will have to create these credit for the
9:00
Facebook as well so I will add
9:03
Facebook client ID and we will have to
9:06
generate this credentials from
9:08
developer. facebook.com so let me Define
9:11
the variable first Cent
9:14
secret call
9:16
back redirects okay regarding the
9:20
callbacks
9:21
URL this will be
9:24
all/ Facebook call back now we will have
9:27
to generate the Facebook client ID and C
9:29
secret in the developer
9:31
facebook.com now let's come to the
9:33
browser let's refresh okay this is fine
9:38
now let's open the
9:41
developer.
9:44
facebook.com here you will have to log
9:46
to the registered Facebook
9:49
account here you have the email and
9:51
password option in order to log to the
9:54
Facebook account so just add your email
9:56
address and password and let's log to
9:58
the account
10:01
and after this successful login you will
10:03
have the my apps option in this top
10:05
right corner let's click on this once
10:08
you are landed on this my apps option
10:10
first time you won't have any
10:12
application created by default so you
10:14
will have to create a new app here let's
10:17
click on create
10:19
app and let's select I don't want to
10:21
connect a business portfolio yet let's
10:24
click on next here you will have to
10:26
choose the authenticate and request data
10:28
from us us with Facebook login let's
10:31
select this radio button if we'll expand
10:34
this so this will be used for
10:36
authenticating the users with the
10:38
Facebook login okay now let's click on
10:41
next here you'll have to provide the
10:43
application name so I will provide the
10:45
application name as programming fils
10:48
you'll have to provide the same email
10:50
address for your Facebook account after
10:53
entering the email address you'll have
10:55
to click on
10:58
next let's click on next
11:00
here in the last step you have the
11:03
option to finalize this by clicking on
11:06
this create app
11:12
button yes the app has been created now
11:16
you have the customization option for
11:17
the app here we have the ADD and
11:20
customize use cases so we can customize
11:23
the login button if we'll expand
11:26
this we will have to add the email
11:29
permission here so let's click on
11:33
ADD okay so the email permission is
11:36
added let's click on settings here
11:38
you'll have to provide that call back
11:40
URL okay so firstly you'll have to
11:43
scroll down and at the bottom you will
11:46
have to add the valid o o redirect Uris
11:50
so according to your application URL you
11:52
will have to provide that call back URL
11:54
and we have created the route as
11:57
Facebook call back okay let's copy this
12:00
and you'll have to add it here and in
12:02
the case if this inforce https is
12:06
enabled then by default it won't accept
12:09
the HTTP URL so you will have to add it
12:12
as
12:12
https okay now after adding this valid
12:16
wor redirect uis here you'll have to
12:18
click on Save
12:20
changes okay now let's scroll up and you
12:23
have to check the redirect URI so let's
12:27
paste it here you'll have to add https
12:30
let's click on check URI yes you can see
12:34
this is a valid redirect URI for the
12:36
application this is fine let's click on
12:39
Save changes again this is done now
12:42
you'll have to come in the app settings
12:45
let's click on this and inside this you
12:47
have the basic
12:49
settings inside the basic settings you
12:52
will have the app ID and app secret so
12:55
let's copy this app ID from here and
12:57
let's come to the application
12:59
inside this client ID you'll have to add
13:02
the app ID also you'll have to copy the
13:05
app secret from here let's copy it and
13:08
let's paste it here okay this is done
13:11
and here you'll have to provide the app
13:13
domains so we'll add https Local Host
13:19
8,000 okay let's click on Save
13:23
changes this is fine let's come to the
13:26
dashboard yes you are done now now let's
13:29
come to the code editor again and under
13:32
the config of the services.
13:34
PHP you'll have to create one more array
13:37
for the Facebook driver so let's copy
13:40
and paste it and let's change this to
13:43
Facebook and the key will be same as
13:45
client ID client secret and redirect
13:48
here we'll have to change the en
13:50
variables so we have the FB client
13:55
ID FB client secret and for the
13:58
redirection
14:00
we have the FB call back redirects okay
14:03
this is fine now let's come to the
14:05
socialite controller again here we'll
14:07
have to add the dump and die dollar
14:10
provider first so that we will check
14:13
given provider name now let's come to
14:15
the browser let's refresh the
14:17
application let's try to click on login
14:20
with
14:21
Facebook yes now this is redirected to
14:25
the Facebook login okay and you'll have
14:28
to confirm your profile profile if you
14:29
are already logged into the Facebook so
14:32
you'll have to select your profile as
14:33
your profile name I will
14:36
select and yes it redirected back to the
14:40
socialite controller and I'm getting
14:42
that driver name because in the URL
14:45
itself we have the / provider SL
14:49
callback so I'm getting that provider
14:51
name here now we will have to pass the
14:53
same provider dynamically so firstly I
14:56
will add if condition if we have the
14:59
provider then only this will allow to
15:02
login inside this driver I will pass the
15:06
dynamic provider here and I will keep
15:09
the entire codes inside this if block
15:13
only okay and in the else block again I
15:17
will abot this
15:19
application with
15:21
404 okay now I will scroll up now here I
15:24
will add social user okay I will add
15:31
dump and die social user let's come to
15:34
the browser let's
15:36
refresh yes we got the authenticated
15:40
data from the Facebook all right we have
15:43
the Facebook ID we have name email AAR
15:46
and other fields as well so we have
15:48
successfully authenticated with Facebook
15:51
now we will have to check if this user
15:53
exists in our users table then we will
15:57
have to make this authenticated login
15:59
else we will have to insert this user
16:01
record inside the users table so let's
16:04
modify the code
16:06
again here previously we were fetching
16:09
the Google ID in order to check if that
16:12
user already exists in the user table
16:15
now instead of this Google ID we will
16:18
have to create a common field for
16:20
managing all the providers
16:22
authentication okay so I will come to
16:25
the create user table migration under
16:27
the database folder
16:29
we have the migrations create users
16:32
table here previously we had created the
16:35
Google _ ID column and uh now we will
16:39
have to change this as o
16:41
provider okay and I will add one more
16:44
column as o provider id so in the First
16:48
Column I will store o provider name just
16:51
like if it is logged in through Google
16:54
or Facebook and in the second column I
16:57
will store that primary
16:59
that we are getting after the successful
17:01
authentication this one okay so let's
17:04
roll back this migration again so I will
17:06
type PHP artion migrate refresh so this
17:10
will drop all the migrations and this
17:13
will rerun the entire migration let's
17:15
hit
17:16
enter yes migrations have been rolled
17:20
back and it executed again now inside
17:23
the users table if we come to the
17:26
database SQ light inside the user table
17:29
we have the Au provider name and Au
17:33
provider id all right now we'll have to
17:36
come to the user
17:38
model and we'll have to add the fillable
17:41
property as Au
17:45
provider and Au provider id okay let's
17:49
close these files now let's come to the
17:51
socialite controller here we will have
17:53
to check the provider id so we'll have
17:56
to pass the column name as
18:00
or provider id okay and that we will
18:05
pass from this social
18:07
user all right else if it is not there
18:11
then I will create that user so this
18:14
will fetch from the social user name
18:17
social user email and here we will have
18:20
to change this as
18:22
o provider id and this will fetch from
18:26
the social user ID and all also we will
18:29
have to pass the Au provider that will
18:32
store the provider name as Google or
18:35
Facebook based on the social login type
18:38
just like if we clicked Google login or
18:40
if we clicked Facebook so I will add
18:43
dollar provider
18:45
here okay this is done and by default we
18:48
will create the random password as
18:51
password at theate 1 2 3 4 and here
18:54
regarding this return redirect I will
18:57
keep it common because anyhow after
19:00
login or after registering this will be
19:03
redirected to the dashboard page only so
19:05
we can keep it common okay now regarding
19:08
the password I received a comment from
19:11
one of our subscriber so his concern was
19:14
how the newly created user will know the
19:17
password Here we can achieve that in
19:19
different ways either after registering
19:21
the user we can send an email with that
19:25
password to that registered email
19:27
address so that the new newly created
19:29
user will know the password or after the
19:31
successful login we can add a page in
19:35
the dashboard page that will prompt to
19:37
change the password immediately after
19:39
the successful login okay so I'm not
19:41
going to implement that functionality as
19:43
of now that we will cover sometimes in
19:46
different project okay this is fine now
19:49
let's come to the browser Let me refresh
19:52
let me try to click on login with
19:54
Facebook yes this said you previously
19:57
logged in programming Fields with
19:59
Facebook this is basically our
20:01
application name now I will continue to
20:04
this login so I will click
20:07
continue and here this redirected back
20:10
to the dashboard page okay here we have
20:13
the profile and if we'll click on the
20:16
profile settings we have the username
20:18
and that registered email address now I
20:21
will log out the
20:23
application I will try to login again
20:26
with the
20:27
Facebook we have to continue with the
20:29
profile
20:31
again Yes again we have logged in and we
20:34
have redirected on the dashboard page
20:36
now if I will log out and if we try to
20:39
login through the password again so I
20:42
have the registered user and password as
20:45
password atate 1
20:47
234 yes I have successfully logged in
20:49
through the password as well okay this
20:52
is fine if I will log out and that's all
20:55
we have successfully set up the social
20:57
login and we have implemented the login
21:00
with Facebook in our Lille application
21:02
using socialite package if you found
21:04
this video helpful be sure to give it a
21:07
thumbs up and share it with your friends
21:09
and if you have any questions or
21:11
suggestions for the future videos don't
21:13
forget to drop that in the comment
21:15
section below and if you have not
21:17
subscribed to programming fields at
21:19
please do subscribe because that gives a
21:22
motivation to bring contents for you in
21:24
the next video we will continue with the
21:26
social authentication and we will
21:28
implement the other social login here
21:31
all right and after this demo I will
21:34
reset the credentials from here so
21:37
please don't try to use the credentials
21:38
again all right and if you need the
21:41
source code of this project you can
21:44
check out my GitHub profile I already
21:46
created the repository so you can access
21:48
that I will provide that repository Link
21:51
in the description so thanks for
21:54
watching see you soon in the next video
21:56
Until Then happy coding
21:59
[Music]
#Social Network Apps & Add-Ons
