This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

📣 Try the fastest hosting platform with pay-as-you-go pricing & 24/7 expert support! MIGRATE NOW →

Creating Social Login in Laravel using Socialite

Updated on June 7, 2021

5 Min Read

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:

  • Facebook
  • Twitter
  • LinkedIn
  • Github
  • Google
  • 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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Ahmed Khan

Ahmed was a PHP community expert at Cloudways - A Managed PHP Hosting Cloud Platform. He is a software engineer with extensive knowledge in PHP and SEO. He loves watching Game of Thrones is his free time. Follow Ahmed on Twitter to stay updated with his works.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now