How to Implement "Login with Facebook" in Laravel 11

This tutorial will guide you through the process of adding Facebook login functionality to your Laravel application.

Prerequisites

• Laravel project set up
• Composer installed
• Facebook Developer Account

Step 1: Create a Facebook App

1. Go to Facebook Developers
2. Click on "My Apps" and then "Create App"
3. Choose "Consumer" as the app type
4. Fill in the app details and create the app
5. In the app dashboard, note down your App ID and App Secret

Step 2: Install Laravel Socialite

Laravel Socialite provides an expressive, fluent interface to OAuth authentication with Facebook, Twitter, Google, LinkedIn, GitHub, GitLab and Bitbucket.
Install it via Composer:

composer require laravel/socialite

Step 3: Configure Socialite

Add the following to your config/services.php file:

'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
    'redirect' => env('FACEBOOK_REDIRECT_URI'),
],

Then, add these to your .env file:

FACEBOOK_CLIENT_ID=your_facebook_app_id
FACEBOOK_CLIENT_SECRET=your_facebook_app_secret
FACEBOOK_REDIRECT_URI=http://localhost:8000/login/facebook/callback

Step 4: Set up Routes

Add these routes to your routes/web.php:

use App\Http\Controllers\Auth\FacebookController;

Route::get('login/facebook', [FacebookController::class, 'redirectToFacebook'])->name('login.facebook');
Route::get('login/facebook/callback', [FacebookController::class, 'handleFacebookCallback']);

Step 5: Create FacebookController

Create a new controller:

php artisan make:controller Auth/FacebookController

Implement the controller:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class FacebookController extends Controller
{
    public function redirectToFacebook()
    {
        return Socialite::driver('facebook')->redirect();
    }

    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' => encrypt('123456dummy')
                ]);

                Auth::login($newUser);
                return redirect()->intended('dashboard');
            }
        } catch (\Exception $e) {
            dd($e->getMessage());
        }
    }
}

Step 6: Update User Model

Add facebook_id to the fillable array in your User model:

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

Step 7: Add Facebook ID to Users Table

Create a new migration:

php artisan make:migration add_facebook_id_to_users_table

In the new migration file:

public function up()
{
    Schema::table('users', function ($table) {
        $table->string('facebook_id')->nullable();
    });
}

public function down()
{
    Schema::table('users', function ($table) {
        $table->dropColumn('facebook_id');
    });
}

Run the migration:

php artisan migrate

Step 8: Add Login Button

In your login view, add a "Login with Facebook" button:

<a href="{{ route('login.facebook') }}" class="btn btn-primary">
    Login with Facebook
</a>