Facebook Login Integration in Laravel with Socialite

Over 70% of users prefer social login. Integrating Facebook login into Laravel boosts signup rates and lessens password fatigue, leading to better retention.

Key Points

73% of users opt for social login when it is offered, with Facebook being the most popular choice.
Sites offering a Facebook login experience a 34% rise in user registration conversions.
Social logins cut failed login attempts by up to 50%, boosting overall user satisfaction.

Integrating social login is a great way to enhance user experience in web app development and mobile app development. It simplifies the login process by allowing users to sign in using their existing social media accounts. In this article, we will guide you step-by-step to implement Facebook Login in Laravel using the Laravel Socialite package.

Step 1: Install Laravel Socialite

To begin, install Laravel Socialite, which handles OAuth authentication.

                                        composer require laravel/socialite

This package allows perfect integration with OAuth providers like Facebook, which is commonly used in both web and mobile app development projects.

Step 2: Create and Configure Facebook App

To authenticate via Facebook, you need to create a Facebook App:

Go to Facebook Developers
Create an account and then create a new app
Enable Facebook Login
Note down the App ID and App Secret

You'll use these credentials in your Laravel application.

Step 3: Add Facebook Credentials in Laravel

Add the following configuration in your .env file:

                                        FACEBOOK_CLIENT_ID=your_facebook_app_id
FACEBOOK_CLIENT_SECRET=your_facebook_app_secret
FACEBOOK_CALLBACK_URL=http://localhost:8000/auth/facebook/callback

Then update config/services.php with:

                                        return [
    'facebook' => [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'redirect' => env('FACEBOOK_CALLBACK_URL'),
    ],
];

Step 4: Add Facebook ID to Users Table

Create a migration to store the Facebook ID for each user:

                                        php artisan make:migration add_facebook_id_column

Then, modify the migration file:

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

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

Run the migration:

                                        php artisan migrate

Step 5: Update User Model

Update your User model to include the facebook_id column:

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

Ensure necessary traits are included:

                                        use HasApiTokens, HasFactory, HasProfilePhoto, Notifiable, TwoFactorAuthenticatable;

Step 6: Define Facebook Routes

Add the following routes to routes/web.php:

                                        use App\Http\Controllers\FacebookController;

Route::controller(FacebookController::class)->group(function () {
    Route::get('auth/facebook', 'redirectToFacebook')->name('auth.facebook');
    Route::get('auth/facebook/callback', 'handleFacebookCallback');
});

Step 7: Create FacebookController

Create a controller to handle the Facebook login logic:

                                        namespace App\Http\Controllers;

use Laravel\Socialite\Facades\Socialite;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Exception;

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::updateOrCreate(
                    ['email' => $user->email],
                    [
                        'name' => $user->name,
                        'facebook_id' => $user->id,
                        'password' => encrypt('123456dummy')
                    ]
                );

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

Step 8: Update Blade Login View

Add a "Login with Facebook" button in your login blade view:

                                        <div class="mt-6 text-center">
    <a href="{{ url('auth/facebook') }}" class="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
        <i class="fa fa-facebook-square mr-1" aria-hidden="true"></i> Login with Facebook
    </a>
</div>

You can place this below your existing login form for a seamless experience in your web app development interface.

Final Testing

Once all steps are complete:

Run your Laravel project using php artisan serve
Visit the login page
Click “Login with Facebook”
You’ll be redirected to Facebook for authentication
Upon successful login, you'll be redirected to the dashboard

Final Words

Integrating Facebook Login in Laravel not only simplifies user authentication but also boosts trust and usability, which is especially important for modern mobile and web app development. By using Laravel Socialite, you save time and ensure secure, standardised OAuth login flows.

Whether you're developing a mobile-first application or a comprehensive web app, social login is a valuable feature that boosts engagement and conversion rates.