0:00
hey there welcome back to the
0:01
programming Fields I'm UMES Rana and in
0:04
this video we are continuing our lar
0:07
socialite Series so far in this playlist
0:09
we have already covered up Google and
0:11
Facebook login Integrations now today we
0:14
are going to simplify authentication by
0:16
integrating GitHub login into our larl
0:19
application and for this I will be using
0:22
the powerful social light package if you
0:24
have been looking for a way to
0:25
streamline the login process make your
0:28
app more user friendly and and allow
0:30
your users to login with their favorite
0:33
social media accounts then you are in
0:35
the right place whether you are building
0:37
a small project or a large scale
0:39
application GitHub login is an
0:42
incredibly useful feature that can save
0:44
your users time and effort they won't
0:47
need to remember it another password and
0:49
you won't need to manage those extra
0:51
credentials plus it gives your app a
0:54
modern age with a fast and secure way to
0:56
authenticate users now I'm going to work
0:59
you through everything step by step from
1:01
setting up your GitHub oo app to
1:04
integrating it easily into your larl
1:06
application don't worry if you are new
1:08
to oo or haven't worked with socialite
1:11
before I will break it all down in easy
1:14
to follow way so by the end of this
1:16
tutorial you will have GitHub login
1:18
working like a charm in your application
1:21
just like we already implemented with
1:23
Google and Facebook I will cover
1:25
everything like configuring your app to
1:27
adding that login with GitHub button in
1:29
your your user interface and even
1:31
managing users who login with multiple
1:34
accounts so whether you are a beginner
1:36
or an experienced lar developer this
1:39
tutorial will have something for you and
1:41
if you're ready to level up your apps
1:43
authentication system and give your
1:45
users a seamless login experience let's
1:48
dive right into it so in the first step
1:51
I will add a GitHub login button here so
1:54
I will come to the login
1:57
blade here similar to login with go
1:59
Google and Facebook I will add one more
2:02
button so I will simply copy and paste
2:04
it I will change this to GitHub and this
2:07
title will be login with GitHub okay in
2:11
the last video we created a dynamic
2:13
route and based on the login provider
2:16
this will capture that automatically so
2:19
here in this route function I'm calling
2:21
this au. redirection route and here I
2:24
will have to pass the parameter So
2:26
currently I'm integrating the GitHub
2:27
login that's why we will have to pass
2:30
GitHub here okay and we will have to
2:33
change this image here so I already have
2:35
the GitHub icon if I will come to the
2:38
public folder inside assets I have
2:41
GitHub PNG image so I will add GitHub do
2:46
PNG okay let's come to the browser let's
2:50
refresh yeah we have the GitHub login
2:54
now in the next step we will have to
2:56
create the O application in the GitHub
2:59
account so here I have already logged
3:01
into my GitHub account and in the
3:04
profile option if we come to the
3:06
settings and inside the settings if you
3:11
down you will have this developer
3:13
settings okay let's click on this
3:16
developer settings here you will have o
3:19
apps let's click on this option by
3:22
default you want have any application
3:24
created here first time you'll have to
3:27
create it by clicking on new oo app
3:31
this therea you'll have to provide the
3:33
application name so I will keep the
3:35
application name as programming Fields
3:39
next you will have to pass the homepage
3:40
URL as of now my application is running
3:43
in the local host and this is running on
3:46
the Local Host 8,000 Port so I will copy
3:50
and I will add that URL here and I will
3:52
have to preed http colon slash and then
3:59
next this is application description and
4:02
this is optional thereafter you'll have
4:05
to provide the authorization call back
4:07
URL so for the authorization call back
4:09
URL we have created a common route in
4:12
the web.php if we'll come to the
4:15
application web.php we have a common
4:18
route as au/ Dynamic provider name and
4:22
then call back okay so we will have to
4:25
provide this application call back URL
4:30
and come to the browser here in the
4:32
authorization call back let's add HTTP
4:36
colon Local Host 8,000 SL and then paste
4:43
that call back URL and here instead of
4:46
Provider I will pass GitHub okay this is
4:50
fine now let's click on register
4:53
application let's wait to complete this
4:55
registration yes the application has
4:58
been created and generated this client
5:00
ID and we will have to generate the
5:03
client Secret by clicking on this
5:05
generate client secret button so firstly
5:08
let's copy this client ID and come to
5:11
application and we will have to
5:13
configure it in theb file of this
5:16
application so similar to Google and
5:18
Facebook we will have to create variable
5:20
for the GitHub so I will
5:23
create GitHub client ID and I will paste
5:26
it next we need GitHub client Secret
5:31
and that we will have to create there so
5:34
browser and let's click on generate a
5:37
new client secret yeah it generated the
5:40
client secret let's copy come to the
5:42
application again let's paste it here
5:45
now next we will have to add
5:52
redirect and we can copy this URL let's
5:56
paste it and instead of all/ Facebook
6:00
this will be out/ getup that's it we
6:03
have configured the credentials in the
6:06
EnV file now we will have to capture
6:08
these credential in the configuration
6:11
and there we will have to add the
6:13
provider so let's come to the config
6:16
services. PHP here inside this driver
6:19
array we will have to add one more array
6:22
for the GitHub okay and this driver name
6:25
will be GitHub now inside this array we
6:29
will have to capture the GitHub
6:31
credentials so I will capture GitHub
6:34
client ID next we will have to capture
6:39
secret and also get up call back
6:42
redirects okay this is done now let's
6:45
come to the socialite controller because
6:48
for handling the social authentication
6:50
we created a controller as socialite
6:53
controller okay inside this controller
6:56
we have created two common functions one
6:59
for redirection that means based on the
7:02
given provider this will redirect to
7:04
that provider okay and after redirecting
7:07
to that provider it will authenticate
7:10
that user and once that user is
7:13
authenticated that will be redirected
7:15
back to the Callback URL and inside that
7:18
callback URL we have handled through
7:20
this function so this will land on this
7:23
function and inside this function again
7:26
we have captured that provider and based
7:28
on that provider this will return that
7:31
provider user so let's suppose if you're
7:33
trying to login with Google this will
7:36
return that authenticated user data from
7:38
the Google and similarly we are trying
7:41
to login through the GitHub now so if I
7:43
will add dump and I social user and it
7:47
will save and let's come to the browser
7:50
now come to the application and let's
7:52
refresh it here now let's try to click
7:56
GitHub so here it is trying to redirect
7:59
okay and this redirected to the GitHub
8:02
and here it is asking to authorize the
8:04
current user for the authentication if
8:07
you will authorize this will return
8:09
return that authenticated user data we
8:12
have ID nickname and the profile details
8:15
here okay now let's come to the
8:17
application let's remove this dump and
8:19
die here inside this function this will
8:22
check if we are getting that
8:24
authenticated user data then this will
8:27
check from the users table if that user
8:30
data exist in that this will make that
8:33
user to login else this will register
8:36
that user and it will insert that user
8:39
data in the users table and after
8:42
successful registration again this will
8:45
make log to that user okay this is fine
8:49
and at last this will redirect to the
8:51
dashboard route after the successful
8:54
login so we have removed dump and die
8:57
and if will come to the browser and and
8:59
it will go back and let's try to click
9:01
on login with GitHub again this is
9:04
authenticating yes now we have
9:06
successfully logged into the application
9:09
and we have redirected to the dashboard
9:11
route after the successful
9:12
authentication here we have the profile
9:14
settings if we'll click on this we have
9:17
the profile information okay and again
9:21
this is coming from the authenticated
9:23
user data from the GitHub if we log out
9:26
and it will come to the application and
9:28
it will verify inside the database so
9:31
inside the database.sql we have a
9:33
registered user here and the provider is
9:37
GitHub okay this is done so this is
9:42
properly and that's it you have now
9:45
added GitHub login to your larel
9:47
application with each using socialite
9:49
package by enhancing your login options
9:52
you have made life easier to your users
9:55
and that's what great development is all
9:57
about if you enjoyed this video and
9:59
learn something new make sure to smash
10:02
that like button hit subscribe and ring
10:05
the bell so you don't miss out on future
10:07
tutorials if you got any questions or
10:10
need help drop them in the comments
10:12
below and I will be sure to get back to
10:14
you on that also be sure to check out
10:17
the next video in our larel socialite
10:19
Series where we will cover even more
10:22
exciting Integrations like LinkedIn X
10:25
bit bucket and more so thanks for tuning
10:28
in keep up the great work and I will
10:31
catch you in the next video Until Then
