Laravel 8 Socialite Login with Facebook Account Example

Hello Artisan,

In this laravel socialite tutorial, I will share with you that how to log in with Facebook in laravel by using laravel socialite package. In this laravel 8 login with Facebook tutorial, you will learn it from scratch so that you can understand source code better.

So if you are new to Laravel socialite and first time going to create this login system using Facebook in laravel, then this is the perfect example tutorial for you. Here, in this example we will see how to works laravel 8 login with Facebook.

This Laravel facebook login post will give you a simple example of laravel 8 login with a Facebook account. I have already created three tutorials on this topic like login with google, login with GitHub, and login with Twitter in Laravel using laravel socialite package.

So before starting this tutorial, you can read this article. 

Recommended: Laravel 8.x Login with Facebook Google Twitter and Github

You know that almost every application now using socialite login system in their application like Facebook login, google login, Twitter, etc login system. I think most of them have a Facebook account. So if your application has a login with Facebook then it becomes awesome.

You got more people to connect with your website because most people do not want to fill sign up or sign in form. So let's start laravel 8 Facebook login system example tutorial.

Step 1: Download Laravel 8

In this first step, if you haven't laravel 8 application setup then we have to get a fresh laravel 8 application. So run the below command and get a clean fresh laravel 8 application.

composer create-project --prefer-dist laravel/laravel facebook

Step 2: Install JetStream

You can avoid jetstream, but in this laravel Facebook login system, I am going to use jetstream. Now, in this step, we need to use the composer command to install jetstream, so let's run the bellow command and install the bellow library.

composer require laravel/jetstream
php artisan jetstream:install livewire
npm install
npm run dev
php artisan migrate

Run above all those commands one after another to get beautiful ui.

Step 3: Install Socialite

In the first step, we will install Socialite Package that provides API to connect with Facebook account. So, first, open your terminal and run bellow command:

composer require laravel/socialite

Step 4: Create Facebook Client Id

You have to go to developers facebook and create an app for Facebook login client id and secret. after creating an account you can copy the client id and secret.

Now you have to set app id, secret, and call back URL in config file so open config/services.php and set id and secret this way:

config/services.php

return [
    ....
    'facebook' => [
        'client_id' => 'app id',
        'client_secret' => 'add secret',
        'redirect' => 'http://localhost:8000/auth/facebook/callback',
    ],
]

Step 4: Add Database Column

In this step first, we have to create migration for add facebook_id in your user table. So let's run bellow command:

php artisan make:migration add_facebook_id_column

Recommended: Laravel 8 Socialite Login with Google Example

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
   
class AddFacebookIdColumn extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('facebook_id')->nullable();
        });
    }
   
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

Update mode like this way:

app/Models/User.php

namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;
  
class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use Notifiable;
    use TwoFactorAuthenticatable;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'facebook_id'
    ];
  
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];
  
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
  
    /** 
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];
}

Step 5: Add Routes

After adding the facebook_id column first we have to add a new route for Facebook login. so let's add the below route in the routes.php file.

app/Http/routes.php

use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FacebookController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('auth/facebook', [FacebookController::class, 'redirectToFacebook']);
Route::get('auth/facebook/callback', [FacebookController::class, 'handleFacebookCallback']);

Step 6: Create Controller

After adding the route, we need to add a method of Facebook auth that method will handle Facebook callback URL and etc, first put below code on your FacebookController.php file.

app/Http/Controllers/FacebookController.php

namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
use Exception;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
    
class FacebookController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function redirectToFacebook()
    {
        return Socialite::driver('facebook')->redirect();
    }
          
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function handleFacebookCallback()
    {
        try {
        
            $user = Socialite::driver('facebook')->user();
         
            $finduser = User::where('facebook_id', $user->id)->first();
        
            if($finduser){
         
                Auth::login($finduser);
        
                return redirect()->intended('dashboard');
         
            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'facebook_id'=> $user->id,
                    'password' => bcrypt('123456')
                ]);
        
                Auth::login($newUser);
        
                return redirect()->intended('dashboard');
            }
        
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

Step 7: Add Facebook Login Button

Ok, now, at last, we haveto add blade view so first create a new file login.blade.php file and put bellow code:

resources/views/auth/login.blade.php

Recommended: Laravel 8 Login and Registration Example with Github

All are set to go. You can test now. Hope it can help you.