In today’s world, users prefer faster and easier ways to log in instead of filling lengthy registration forms each time they register to new platform. Login with Facebook in Laravel 12 helps simplify this process by allowing users to access your application with their Facebook account in just a few clicks. Here, it will utilize Facebook’s developer API to provide smooth authentication process in Laravel 12.
By integrating a Login with Facebook in your Laravel application, you don’t have to worry about verify user’s into registration process. Facebook will verify user is genuine or not. This not only simplifies the process for them but also provides you with verified email addresses, providing security and reliability of user. Let’s dive into how you can set this up Login with Facebook in your Laravel 12 application.
Installing Laravel Socialite Package
The Laravel Socialite package make easy to integrate many social media authentications like Google, Facebook, Twitter, Linkedin, Github and many more. You can checkout all the available Socialite drivers at online.
To intregrate Login with facebook in Laravel 12 application, you need to install Socialite package. You can install it using composer command like below:
composer require laravel/socialiteTypically, you don’t need to configure anything into Laravel 12 application but if you are using older version of Laravel framework then you have to register it’s service provider.
API Key Generation for Facebook
To Implement Login with Facebook authentication workflow, you need Facebook App ID and App Secret. This credentials act like a username and password for your Laravel application.
We have a comprehensive, step-by-step guide that walks you through creating a Facebook App, configuring the necessary settings, and obtaining your API keys. Please follow our detailed tutorial on How to Generate Facebook App ID and App Secret to get your credentials. Once you get your credentials, add them to your .env file as shown below:
FACEBOOK_CLIENT_ID=YOUR_CLIENT_ID
FACEBOOK_CLIENT_SECRET=YOUR_CLIENT_SECRET
FACEBOOK_REDIRECT_URI=YOUR_WEBSITE_DOMAIN/auth/facebook/callbackLogin with Facebook In Laravel 12
Now you have all required details to start implementing facebook Login into your laravel application using socialite package.
Configure Services
Instead of using environment value directly from env file, let’s move them into configuration for better performance and best practice.Open the config/services.php file. Add the Facebook OAuth credentials you obtained in the previous step:
<?php
return [
// Other Services ..
'facebook' => [
'client_id' => env('FACEBOOK_CLIENT_ID'),
'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
'redirect' => env('FACEBOOK_REDIRECT_URI'),
],
];Setting Up Database for Facebook Login
Facebook provides a unique ID for every user. We need a place to store this ID in our database to associate a user’s account with their Facebook profile. First, we have to add these columns into our database table. Let’s create a migration to add a facebook_id column to our users table.
php artisan make:migration add_facebook_columns_to_users_table --table=usersIt will create new migration file. You have to modify it for adding facebook id and token into it like below example:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->string('facebook_id')->nullable();
$table->string('facebook_token')->nullable();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn(['facebook_id', 'facebook_token']);
});
}
};Next thing you need to do is add this newly added properties into your User model so we can use it for mass assignments. Open your mode and add keys.
protected $fillable = [
'name',
'email',
'password',
'facebook_id',
'facebook_token',
];You can have different numbers of additional columns as per your application but add these 2 columns into your model. Finally, run the migration to apply the changes to your database:
php artisan migrateCreate the Facebook Authentication Controller
Let’s create controller which specifically handles Facebook authentication using Laravel Socialite. Open your terminal and enter below command to generate Facebook Controller:
php artisan make:controller FacebookControllerThen open app/Http/Controllers/FacebookController.php and add the following code:
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
class FacebookController extends Controller
{
public function redirectToFacebook()
{
return Socialite::driver('facebook')->stateless()->redirect();
}
public function handleFacebookCallback()
{
$facebookUser = Socialite::driver('facebook')->stateless()->user();
dd($facebookUser);
$user = User::updateOrCreate(
['facebook_id' => $facebookUser->id],
[
'name' => $facebookUser->name,
'email' => $facebookUser->email,
'facebook_token' => $facebookUser->token,
]
);
Auth::login($user);
return redirect()->route('home');
}
}Here, we have added two methods, The redirectToFacebook method will redirect user to facebook login or account selection page. However, the handleFacebookCallback will be called when Facebook authenticates user and redirect it to our defined URL. This URL is configured while Facebook app generation process.
Facebook authentication routes
We need two routes. The first route will redirect the user to Facebook’s authentication page. The second route is where Facebook will send the user back after they approve the login request. We have already added this logic into our controller.
Open your routes/web.php file and add these two routes:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FacebookController;
Route::get('auth/facebook', [FacebookController::class, 'redirectToFacebook']);
Route::get('auth/facebook/callback', [FacebookController::class, 'handleFacebookCallback']);Login with Facebook Button to Your View
The final step is to give users a way to initiate the login process. Open your login view file, which is typically resources/views/auth/login.blade.php, and add a link or button code. This button will initiate Facebook login flow into your Laravel application.
<a
href="{{ url('auth/facebook') }}"
class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal">
Login With Facebook
</a>In this above example, we have added simple button with label and some styles to look as button. You can customize this part as per your requirement. It just send user to Facebook platform and allow user to login to their account or select if already logged in.
Testing Flow
To test this feature, you need run local development server using below command:
php artisan serveIt will start local server. Now you can access your Laravel 12 application on browser. Navigate to login page and click on Login with Facebook button.
Once, you click on that button it will redirect to Facebook platform and ask you to login to their account or select account if you are already logged in. Then Facebook will redirect user to your redirect URL and there you will authenticate user into laravel system.
Conclusion
Integrating Login with Facebook in Laravel 12 using Socialite makes user authentication smooth and modern. Instead of lengthy registration steps, users can access your app in seconds through their Facebook accounts. This helps to improve user experience and increase signups.
If you’re looking to extend your app with more social login options, don’t miss our detailed guide on Laravel Google Login Using Socialite. It walks you through every step to integrate Google authentication seamlessly into your Laravel application.