Laravel 13 - How to Integrate Facebook Login Using Socialite.

Quick Overview

Step # 1 : Initialize and Configure a Laravel 13 Project.

composer global require laravel/installer

laravel new facebook 

• Starter Kit: Choose Yes to include a starter kit during the project setup.
• Authentication: Select Livewire to set up the authentication interface and supporting components.
• Authentication Provider: Use Laravel’s built-in authentication system to handle user authentication.
• Single-File Livewire Components: Choose Yes to organize each Livewire component’s logic and template within a single file.
• Teams Support: Select No, as team management is outside the scope of this project.
• Authentication Features: Select Registration to enable account creation for new users.
• Boost Features: Choose None by pressing Enter to skip optional Boost features.
• Third-Party AI Guidelines and Skills: Press Enter without selecting any options to skip these additions.
• Boost Integrations: Keep the default configuration and press Enter to proceed.
• AI Agent: Select Amp to configure the project for the Amp AI coding agent.
  
  

Step # 2 : Navigate to the Laravel Project Directory.

cd facebook

Step # 3 : Add Facebook Authentication Support to the 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();
});

#[Fillable(['name', 'email', 'password', 'facebook_id'])]

php artisan migrate:fresh

Step # 4 : Install Laravel Socialite for Facebook Login.

composer require laravel/socialite

Step # 5 : Configure Meta Developer Credentials for Facebook Authentication.

1. Click Create App to begin the application registration process.
   
   
   
   
2. Provide a name for your application and proceed to the next step. This name will be displayed to users during the Facebook login process.
   
   
   
   
3. Choose Authenticate and request data from users with Facebook Login as the use case, then continue.
   
   
   
   
4. For this demonstration, select I don't want to connect a business portfolio yet to proceed without linking a business portfolio.
   
   
   
   
5. On the Publishing Requirements screen, click Next to continue the setup.
   
   
   
   
6. Review the information displayed on the Overview page, then click Create App to finalize the initial configuration.
   
   
   
   
7. From the left-hand navigation menu, select Use Cases to access the available authentication options.
   
   
   
   
8. Find the Facebook Login use case and click Customize to configure its settings.
   
   
   
   
9. Locate the email permission and select Add to enable it, as this permission may not be included by default.
   
   
   
   
10. Check that the email permission's status is displayed as Ready for Testing before moving forward.
    
    
    
    
11. To retrieve your App ID and App Secret, navigate to App Settings → Basic using the sidebar. Both credentials are available on this page. For local development, optional details such as the app domain, privacy policy URL, and app icon can generally be left unconfigured unless Meta requires them for your setup.
    
    
    
    
    

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

FACEBOOK_APP_ID=your_facebook_app_id
FACEBOOK_APP_SECRET=your_facebook_app_secret
FACEBOOK_REDIRECT_URI=http://localhost:8000/auth/facebook/callback

Step # 6 : Implement Facebook Authentication in the SocialController.

php artisan make:controller SocialController

<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;
use Laravel\Socialite\Facades\Socialite;
class SocialController extends Controller
{
    public function facebookRedirect()
    {
        // Redirect the user to Facebook for authentication
        return Socialite::driver('facebook')->redirect();
    }
    public function loginWithFacebook()
    {
        // Retrieve the user's Facebook profile information
        $facebookUser = Socialite::driver('facebook')
            ->stateless()
            ->user();
        // Find an account using the Facebook ID or email address
        $user = User::where('facebook_id', $facebookUser->id)
            ->orWhere('email', $facebookUser->email)
            ->first();
        if ($user) {
            // Link the Facebook ID if it is not already associated
            if ($user->facebook_id !== $facebookUser->id) {
                $user->update([
                    'facebook_id' => $facebookUser->id,
                ]);
            }
        } else {
            // Create a new account using the Facebook profile details
            $user = User::create([
                'name' => $facebookUser->name,
                'email' => $facebookUser->email,
                'facebook_id' => $facebookUser->id,
                'password' => Hash::make(Str::random(32)),
            ]);
        }
        // Sign in the user and redirect to the dashboard
        Auth::login($user);
        return redirect('/dashboard');
    }
}

Step # 7 : Configure the Routes for Facebook Login.

use App\Http\Controllers\SocialController;
// Redirect users to Facebook for authentication
Route::get('/auth/facebook', [SocialController::class, 'facebookRedirect']);
// Handle the callback after Facebook authentication
Route::get('/auth/facebook/callback', [SocialController::class, 'loginWithFacebook']);

Step # 8 : Add the Facebook Login Button to the Register / Login View.

<!-- OR separator -->
<div class="flex items-center justify-center">
    <span class="px-3 text-sm text-gray-500 dark:text-gray-400">
        OR
    </span>
</div>
<!-- Facebook login button -->
<div class="flex items-center justify-center">
    <a
        href="{{ url('/auth/facebook') }}"
        class="flex w-full items-center justify-center rounded-lg bg-gray-200 px-4 py-2 font-semibold text-gray-800 hover:bg-gray-300 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700"
    >
        Login with Facebook
    </a>
</div>

Step # 9 : Verify Facebook Authentication in Your Laravel 13 Application.

php artisan serve

Conclusion