How to login with Facebook in Laravel application. If you have the same question, then get along; throughout this tutorial, we will learn how to login using Facebook social media account in Laravel using the Socialite package.
Laravel Socialite package allows you to implement a robust, eloquent interface to OAuth authentication with various social media platforms such as Facebook, Twitter, Google, LinkedIn, GitHub, GitLab, and Bitbucket.
It saves your time through its user-centric boilerplate social authentication mechanism.
Login with social accounts is a straightforward process and simultaneously enhances the user experience; nowadays, everybody knows a better user experience is the key to any digital product’s success.
Social login is a mechanism that propels the user’s expectation forward to access and register within the application.
Consequently, we are creating a simple feature to log in with Facebook in the Laravel application. Authentication user interface templates are required for this tutorial, and we are using Laravel Jetstream to streamline the Authentication UI process.
Laravel Jetstream is a magnificently crafted authentication scaffolding designed using Tailwind CSS; moreover, you can create auth templates with Livewire or Inertia scaffolding.
It offers login, registration, email verification, two-factor authentication, session management, API support for Laravel. Incredible, isn’t it?
Let’s start integrating Login with Facebook in the Laravel application.
Set Up Laravel Environment
Run composer command to install a new Laravel application:
composer create-project laravel/laravel --prefer-dist laravel-socialite-login-facebook-exampleEnter inside the project:
cd laravel-socialite-login-facebook-exampleAdd Database Details
Go to the .env file, define the database name, user name, and password of your database.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=If you are using MAMP local server in macOs; make sure to append UNIX_SOCKET and DB_SOCKET below database credentials in .env file.
UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sockSetting up Jetstream in Laravel
Install jetstream with following command:
composer require laravel/jetstreamExecute command to generate authentication templates such as login, register and email verification.
php artisan jetstream:install livewireNext, run below command.
npm installRun dev packages via node package manager.
npm run devRun command to migrate authentication properties.
php artisan migrateInstall Socialite Package in Laravel
Install socialite package in Laravel with the following command.
composer require laravel/socialiteOpen config/app.php, register socialite plugin in providers, and aliases array.
....
....
'providers' => [
....
....
LaravelSocialiteSocialiteServiceProvider::class,
],
'aliases' => [
....
....
'Socialite' => LaravelSocialiteFacadesSocialite::class,
],
....
....Add Facebook ID in Users Table
We need to relentlessly add the facebook id in users table.
php artisan make:migration add_fb_id_column_in_users_table --table=usersHead over to newly created file migrations/timestamp_add_fb_id_column_in_users_table.php file, add the fb_id column value.
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
class AddFbIdColumnInUsersTable extends Migration
{
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('fb_id')->nullable();
});
}
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('fb_id');
});
}
}Also, add the Facebook ID table value in app/Models/User.php file.
namespace AppModels;
use IlluminateContractsAuthMustVerifyEmail;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateFoundationAuthUser as Authenticatable;
use IlluminateNotificationsNotifiable;
use LaravelFortifyTwoFactorAuthenticatable;
use LaravelJetstreamHasProfilePhoto;
use LaravelSanctumHasApiTokens;
class User extends Authenticatable
{
use HasApiTokens;
use HasFactory;
use HasProfilePhoto;
use Notifiable;
use TwoFactorAuthenticatable;
protected $fillable = [
'name',
'email',
'password',
'fb_id',
];
protected $hidden = [
'password',
'remember_token',
'two_factor_recovery_codes',
'two_factor_secret',
];
protected $casts = [
'email_verified_at' => 'datetime',
];
protected $appends = [
'profile_photo_url',
];
}Add Facebook App ID and Secret
In order to login with Facebook, we need to create a Facebook app that you can do by going to Facebook Developer.
After creating a Facebook app id and the secret app, register in the config/services file.
return [
....
....
....
'facebook' => [
'client_id' => 'Facebook app id',
'client_secret' => 'Facebook add secret',
'redirect' => 'http://localhost:8000/auth/facebook/callback',
],
]Generate and Configure Controller
Next, generate a new controller.
php artisan make:controller SocialControllerOpen app/Http/Controllers/SocialController.php and place the following code.
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppModelsUser;
use Validator;
use Socialite;
use Exception;
use Auth;
class SocialController extends Controller
{
public function facebookRedirect()
{
return Socialite::driver('facebook')->redirect();
}
public function loginWithFacebook()
{
try {
$user = Socialite::driver('facebook')->user();
$isUser = User::where('fb_id', $user->id)->first();
if($isUser){
Auth::login($isUser);
return redirect('/dashboard');
}else{
$createUser = User::create([
'name' => $user->name,
'email' => $user->email,
'fb_id' => $user->id,
'password' => encrypt('admin@123')
]);
Auth::login($createUser);
return redirect('/dashboard');
}
} catch (Exception $exception) {
dd($exception->getMessage());
}
}
}Setting Up Route
Open routes/web.php file and define the routes.
use IlluminateSupportFacadesRoute;
use AppHttpControllersSocialController;
Route::get('auth/facebook', [SocialController::class, 'facebookRedirect']);
Route::get('auth/facebook/callback', [SocialController::class, 'loginWithFacebook']);Add Login with Facebook Button in Login View
Next, add Login with Facebook button in Login view template, so add the following code in views/auth/login.blade.php file.
<x-guest-layout>
<x-jet-authentication-card>
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
<x-jet-validation-errors class="mb-4" />
@if (session('status'))
<div class="mb-4 font-medium text-sm text-green-600">
{{ session('status') }}
</div>
@endif
<form method="POST" action="{{ route('login') }}">
@csrf
<div>
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')"
required autofocus />
</div>
<div class="mt-4">
<x-jet-label for="password" value="{{ __('Password') }}" />
<x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required
autocomplete="current-password" />
</div>
<div class="block mt-4">
<label for="remember_me" class="flex items-center">
<input id="remember_me" type="checkbox" class="form-checkbox" name="remember">
<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
</label>
</div>
<div class="flex items-center justify-end mt-4">
@if (Route::has('password.request'))
<a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }}
</a>
@endif
<x-jet-button class="ml-4">
{{ __('Login') }}
</x-jet-button>
</div>
{{-- Login with Facebook --}}
<div class="flex items-center justify-end mt-4">
<a class="btn" href="{{ url('auth/facebook') }}"
style="background: #3B5499; color: #ffffff; padding: 10px; width: 100%; text-align: center; display: block; border-radius:3px;">
Login with Facebook
</a>
</div>
</form>
</x-jet-authentication-card>
</x-guest-layout>Start the application.
php artisan serveTest the progress on the following URL:
http://127.0.0.1:8000/login
Summary
We have completed the Laravel Login with the Facebook tutorial.
Consequently, we showed you how to authenticate in the Laravel app for Facebook; however, you can login with Twitter, Google, LinkedIn, GitHub, GitLab, and Bitbucket using the Socialite package.
Also, we showed you how to make authentication UI in Laravel in no time using Laravel Jetstream. I hope you will like this tutorial and share it with others.
Download the complete code of this tutorial from GitHub.