Social login button are becoming an essential part of any site which perform user login and registration. Its saves users time, since they won’t need to fill the whole form they just sign up with their social profile and next time they can loggedin in website by a single click.
There are many different sites and packages which you can integrate on your site to provide social login functionality. Laravel has released its own package name Socialite which you can use in your projects. Currently socialite support following social logins:
- Github
- Bitbucket
In this tutorial I am going to integrate Socialite for integrating social login in Laravel. I am going to integrate Facebook login in this blog. You can easily integrate other social logins using the same technique which I will discuss in this blog. Let’s get started.
Installing and Setting Up Socialite
Now in your laravel project run the following command to install Laravel Socialite.
composer require laravel/socialite
Once the package is installed open ‘app/config.php’ file and add the following line in `providers` array.
Laravel\Socialite\SocialiteServiceProvider::class,
Now add the following line in `aliases` array.
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
Now Socialite is setup in your app. Let’s now handle our Login controller to handle social login request.
Related: How To Setup Laravel Login Authentication In Simple And Easy Steps
Modifying LoginController
In this tutorial I am keeping in mind that you have created an auth system using laravel auth command. Now open ‘app/Http/Controllers/Auth/LoginController.php’ file. Now add the following methods in it.
/**
* Handle Social login request
*
* @return response
*/
public function socialLogin($social)
{
return Socialite::driver($social)->redirect();
}
/**
* Obtain the user information from Social Logged in.
* @param $social
* @return Response
*/
public function handleProviderCallback($social)
{
$userSocial = Socialite::driver($social)->user();
$user = User::where(['email' => $userSocial->getEmail()])->first();
if($user){
Auth::login($user);
return redirect()->action('HomeController@index');
}else{
return view('auth.register',['name' => $userSocial->getName(), 'email' => $userSocial->getEmail()]);
}
}
In the above code we have created a `socialLogin` method which will redirect user to the appropriate social login page i.e. Twitter,Facebook,etc. The second method `handleProviderCallback($social)` will work as a callback function. The method first get the details of the user who have sign in using a social network then it checks whether the user is already exists in users table or not. If the user exists it authenticates it and redirect the user to home. If the user is not exists he will be redirected to register page along with his name and email. Now I have created methods to handle social logins let’s now create routes for it.
Creating Routes for Social Login in Laravel
Now open routes/web.php file and add the following routes in it.
Route::get('/login/{social}','Auth\LoginController@socialLogin')->where('social','twitter|facebook|linkedin|google|github|bitbucket');
Route::get('/login/{social}/callback','Auth\LoginController@handleProviderCallback')->where('social','twitter|facebook|linkedin|google|github|bitbucket');
Now we have set up routes let’ now update our login and register page to handle social login requests.
Updating Login Page
For social login buttons I am going to use Social Buttons for bootstrap. Now open resources/views/auth/login.blade.php and add a following div in form after csrf field.
<div class="form-group">
<label for="name" class="col-md-4 control-label">Login With</label>
<div class="col-md-6">
<a href="{{ url('login/facebook') }}" class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
<a href="{{ url('login/twitter') }}" class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
<a href="{{ url('login/google') }}" class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></a>
<a href="{{ url('login/linkedin') }}" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
<a href="{{ url('login/github') }}" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
<a href="{{ url('login/bitbucket') }}" class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
</div>
</div>
Updating Register Page
In register page we need to do two things. First we need to add Social Login Buttons and second we need to handle the user data comes from social logged in. First add the following div after csrf field.
<div class="form-group">
<label for="name" class="col-md-4 control-label">Register With</label>
<div class="col-md-6">
<a href="{{ url('login/facebook') }}" class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
<a href="{{ url('login/twitter') }}" class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
<a href="{{ url('login/google') }}" class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></a>
<a href="{{ url('login/linkedin') }}" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
<a href="{{ url('login/github') }}" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
<a href="{{ url('login/bitbucket') }}" class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
</div>
</div>
Now replace name and email form group div with these.
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
@if(!empty($name))
<input id="name" type="text" class="form-control" name="name" value="{{$name}}" required autofocus>
@else
<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
@endif
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
@if(!empty($email))
<input id="email" type="email" class="form-control" name="email" value="{{$email}}" required>
@else
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>
@endif
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
Now I have modified everything let’s now setup Facebook Sign In.
Setting Up Facebook Sign-in
Now first head to https://developers.facebook.com and create a new app. Once the app is created you will get a api key and secret.
Then you need to add a new Facebook Login product. And define your callback their. To learn more about it click here.
Now open app/services.php file and add the following line in it.
'facebook' => [ 'client_id' => '1120224634748024', //Facebook API 'client_secret' => '7303691d807eaff92bbb1657b96b1e', //Facebook Secret 'redirect' => 'http://laravel.localhost/login/facebook/callback', ],
Similar way you can add other social networks in it.
'github' => [ 'client_id' => 'af54e6bae9a4edfc6cbb', 'client_secret' => '95afc7b40e6aca6419a7623c34bb6d86cb2ac', 'redirect' => 'http://laravel.localhost/login/github/callback', ], 'twitter' => [ 'client_id' => '8JS1GvRflY5g9N3kZc0heYTqL', 'client_secret' => 'eYujptPLBAAzdHIz8hiqGgz4MkJTcmL1JAGEuEZsGU1MykjK', 'redirect' => 'http://laravel.localhost/login/twitter/callback', ],
Now we have done everything let’s now register a user using facebook.
Registering a User using Facebook
Now in your browser head to login or register page.
Now click on facebook button. You will be redirected to facebook. Once you accepted the permission you will be redirected to register page since the user is not registered. But you will notice that name and email is already been filled user only need to add its password.
Enter the password and click on register. You will be redirected to home. Now logout the user. And again go to login page. Now on login again click on facebook login button. Now you will be directly redirected to the homepage.
Summary:
In this article I have implemented Social Login in Laravel project using Socialite. Next, I used user Facebook profile to logged him and register them on the site.
Shahzeb Ahmed
Shahzeb is a Digital Marketer with a Software Engineering background, works as a Community Manager — PHP Community at Cloudways. He is growth ambitious and aims to learn & share information about PHP & Laravel Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]
