Laravel 12 – How to Add Facebook Login Using Socialite and Livewire Auth.

Quick Overview

Step # 1 : Spin Up a New Laravel 12 Project with Livewire Authentication.

laravel new facebook

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

• Starter Kit: Select Livewire to enable Livewire powered authentication out of the box.
• Authentication Provider: Use Laravel’s default authentication system for a straightforward setup.
• Laravel Volt: Choose No, as Volt isn’t needed for this project.
• Testing Framework: Pick Pest, a modern and expressive testing framework.
• Frontend Dependencies: Select Yes so all necessary frontend packages are installed automatically.
  
  

Step # 2 : Move Into the Project Directory.

cd c:xampp/htdocs/facebook

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

        Schema::create('users', function (Blueprint $table) {
            $table->id();
            //Add facebook id column.
            $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:fresh

Step # 4 : Install Laravel Socialite.

composer require laravel/socialite

Step # 5 : Get Your Facebook App ID and App Secret.

1. Start by logging in to Meta for Developers at: https://developers.facebook.com/.
2. Click Create App to begin setting up a new application.
   
   
   
   
3. Enter a Name for your app (this is what users may see during login).
   
   
   
   
4. Choose Authenticate and request data from users with Facebook Login, then continue.
   
   
   
   
5. For this demo project, select I don’t want to connect a business portfolio yet.
   
   
   
   
6. On the Publishing Requirements screen, simply click Next.
   
   
   
   
7. Review the app details on the Overview page, then click Go to dashboard.
   
   
   
   
8. From the left sidebar, open Use Cases.
   
   
   
   
9. On the Use Cases Page click on Customize.
   
   
   
   
10. Add the email permission by clicking Add (it’s not enabled by default).
    
    
    
    
11. Make sure the email permission status shows Ready for Testing.
    
    
    
    
12. To get your APP_ID and APP_SECRET, go to the left menu, select App Settings, then click on Basic. On this page, you’ll find both your APP_ID and APP_Secret. For local testing, you can ignore optional fields such as app domain, privacy policy URL, or app icon.
    
    
    
    

    //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 the SocialController.

php artisan make:controller SocialController

<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
use Exception;
class SocialController extends Controller
{
    public function facebookRedirect()
    {
        // Send the user to Facebook’s authentication page
        return Socialite::driver('facebook')->redirect();
    }
    public function loginWithFacebook()
    {
        try {
            // Fetch the authenticated user details from Facebook
            $facebookUser = Socialite::driver('facebook')
                ->stateless()
                ->user();
            // Look for an existing user using Facebook ID or email
            $user = User::where('facebook_id', $facebookUser->id)
                ->orWhere('email', $facebookUser->email)
                ->first();
            if ($user) {
                // If the user exists but Facebook ID is missing, update it
                if ($user->facebook_id !== $facebookUser->id) {
                    $user->update([
                        'facebook_id' => $facebookUser->id,
                    ]);
                }
                Auth::login($user);
            } else {
                // Create a new user if none exists
                $user = User::create([
                    'name' => $facebookUser->name,
                    'email' => $facebookUser->email,
                    'facebook_id' => $facebookUser->id,
                    'password' => bcrypt('password'),
                ]);
                Auth::login($user);
            }
            // Send the user to the dashboard after successful login
            return redirect('/dashboard');
        } catch (\Throwable $th) {
            // You may log this exception for easier debugging
            throw $th;
        }
    }
}

Step # 7 : Define the Facebook Authentication 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 the Facebook Login Link to the Register / Login View.

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

Step # 9 : Test the Facebook Login Integration.

php artisan serve

Conclusion