Laravel 11 - How to integrate Facebook Login

Quick Overview

Step # 1 : Create fresh Laravel project with Breeze Authentication.

laravel new facebook

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

1. Would you like to install the starter kit? — Choose Breeze
2. After selecting Breeze, you'll be asked to choose your stack. — Choose Blade
3. After selecting Blade, you'll be asked for dark mode support. — Choose no
4. After selecting No, you'll be asked about testing framework. — Choose Pest
5. After selecting Pest, you'll be asked if you want to initialize git repo. — Choose no
6. After selecting no, you'll be asked to select the database for your application. — Choose mysql
7. After selecting MySql, you'll be asked if you want to run the default database migration. — Choose no
   
   

Step # 2 : Access the project.

cd c:xampp/htdocs/facebook

Step # 3 : Modify the Users Table & User Model.

        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('facebook_id')->nullable();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });

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

php artisan migrate

Step # 4 : Install Socialite package.

composer require laravel/socialite

Step # 5 : Obtain Your Facebook APP_ID and APP_SECRET.

Click Go to Dashboard.



Navigate to Use Cases, and click Customize.

To get your APP_ID and APP_SECRET, go to the left menu, select App Settings, then click on Basic. On the settings page, you'll find both APP_ID and APP_SECRET. For testing purposes, you can skip filling in optional details like domain, app icon, etc.

    //Facebook Login
    'facebook' => [
        'client_id' => env('FACEBOOK_APP_ID'),
        'client_secret' => env('FACEBOOK_APP_SECRET'),
        'redirect' => env('FACEBOOK_REDIRECT_URI'),
    ],

FACEBOOK_APP_ID="Define your app id here"
FACEBOOK_APP_SECRET="Define your app secret here"
FACEBOOK_REDIRECT_URI="http://localhost:8000/auth/facebook/callback"

Step # 6 : Create SocialController.

php artisan make:controller SocialController

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Socialite;
use Auth;
class SocialController extends Controller
{
    public function facebookRedirect()
    {
        // Redirect to Facebook for authentication
        return Socialite::driver('facebook')->redirect();
    }
    public function loginWithFacebook()
    {
        try {
            // Retrieve user from Facebook
            $facebookUser = Socialite::driver('facebook')->stateless()->user();
            // Attempt to find an existing user by Facebook ID or email
            $existingUser = User::where('facebook_id', $facebookUser->id)
                ->orWhere('email', $facebookUser->email)
                ->first();
            if ($existingUser) {
                // Update Facebook ID if the user was found by email
                if ($existingUser->facebook_id !== $facebookUser->id) {
                    $existingUser->facebook_id = $facebookUser->id;
                    $existingUser->save();
                }
                Auth::login($existingUser);
            } else {
                // Create a new user
                $createUser = User::create([
                    'name' => $facebookUser->name,
                    'email' => $facebookUser->email,
                    'facebook_id' => $facebookUser->id,
                    'password' => bcrypt('password'), // Hashing the password
                ]);
                Auth::login($createUser);
            }
            // Redirect to the dashboard without the fragment
            return redirect()->to('/dashboard'); // Ensure this is the direct path to your dashboard
        } catch (\Throwable $th) {
            // Handle the exception or log it
            throw $th; // Consider logging the exception for debugging
        }
    }
}

Step # 7 : Set Up routes.

use App\Http\Controllers\SocialController;
// Route to redirect to Facebook for authentication
Route::get('auth/facebook', 'App\Http\Controllers\SocialController@facebookRedirect');
// Route to handle the callback from Facebook after authentication
Route::get('auth/facebook/callback', 'App\Http\Controllers\SocialController@loginWithFacebook');

Step # 8 : Add Facebook login href to your Register/Login blade.

<!-- Register button -->
<!-- Separator OR section -->
<div class="text-center mt-4">
    <span class="text-sm text-gray-600">OR</span>
</div>
<!-- Login with Facebook button -->
<div class="flex items-center justify-center mt-4">
    <x-secondary-button>
        <a href="{{ url('auth/facebook') }}">
            Login with Facebook
        </a>
    </x-secondary-button>
</div>

Step # 9 : It's time to test.

php artisan serve

Conclusion