Laravel Socialite Facebook Login

In this post i am going to explain about Laravel Socialite Authentication using Facebook.

To Start with follow the below steps.

STEP 1

Install Laravel Socialite Package using composer.



composer require laravel/socialite

NOTE: If Using Laravel lower than version 8 Include Package in Providers.
In config/app.php file add the below provider



Laravel\Socialite\SocialiteServiceProvider::class,

Scroll Down to aliases section and add below code



'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Step 2

Include Facebook Service in config/services.php file.



'facebook' => [
        'client_id' => '', //USE FROM FACEBOOK DEVELOPER ACCOUNT
        'client_secret' => '', //USE FROM FACEBOOK DEVELOPER ACCOUNT
        'redirect' => 'https://examplelaravel8.test/facebook/callback/'
    ],

STEP 3

Here, you have to create Facebook app so that you can get a client_id and client_secret from Facebook.

You can do this by going to Facebook’s developers URL

and log in with your Facebook account.

Go to My Apps, proceed to Add New App

STEP 4

Create a new controller to handle socialite action. Run below command to generate a new controller



php artisan make:controller FaceBookController

Update FacebookController With Code Below Which have 2 Function To Redirect and To handle Callback.



<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Laravel\Socialite\Facades\Socialite;

class FaceBookController extends Controller
{
/**
 * Login Using Facebook
 */
 public function loginUsingFacebook()
 {
    return Socialite::driver('facebook')->redirect();
 }

 public function callbackFromFacebook()
 {
  try {
       $user = Socialite::driver('facebook')->user();

       $saveUser = User::updateOrCreate([
           'facebook_id' => $user->getId(),
       ],[
           'name' => $user->getName(),
           'email' => $user->getEmail(),
           'password' => Hash::make($user->getName().'@'.$user->getId())
            ]);

       Auth::loginUsingId($saveUser->id);

       return redirect()->route('home');
       } catch (\Throwable $th) {
          throw $th;
       }
   }
}

STEP 5

Add Facebook authentication routes



// Facebook Login URL
Route::prefix('facebook')->name('facebook.')->group( function(){
    Route::get('auth', [FaceBookController::class, 'loginUsingFacebook'])->name('login');
    Route::get('callback', [FaceBookController::class, 'callbackFromFacebook'])->name('callback');
});

STEP 6

ADD Facebook Button on Login Page resources/views/auth/login.blade.php



 <a href="{{ route('facebook.login') }}" class="btn btn-facebook btn-user btn-block">
   <i class="fab fa-facebook-f fa-fw"></i>
   Login with Facebook
</a>

STEP 7

Add facebook_id Column in Users table, create a migration be command below



php artisan make:migration add_facebook_id_in_users_table

Add Below Code in Migration file



 /**
 * Run the migrations.
 *
 * @return void
 */
 public function up()
 {
    Schema::table('users', function (Blueprint $table) {
        $table->string('facebook_id')->nullable();
    });
 }

 /**
 * Reverse the migrations.
 *
 * @return void
 */
 public function down()
 {
   Schema::table('users', function (Blueprint $table) {
       $table->dropColumn('facebook_id');
   });
 }

and run migration



php artisan migrate

STEP 8

Update The User Model Fillable Property in Models/User.php



protected $fillable = [
        'name',
        'email',
        'password',
        'status',
        'facebook_id'
];

Finally Go To Login Page And Try Accessing Login With Facebook Button.

If you get any issue while integrating it, do comment your problems.

Get Code on Techtool Github

You can watch this video I have explained this.

Thank You for Reading

Reach Out To me.
Twitter
Instagram
Facebook

Blog