Implementing social account authentication is very popular these days. It is easy and powerful method for user authentication, social account authentication takes less effort from user for registration or login on your system. there is no need for the user to remember the username and password.
Table Of Content
1 Prerequisites
1.) PHP version of 8.2
2.) MySql
3.) Facebook Account
2 Introduction
In this article, I am going to show you how to implementation social account authentication to your Laravel application.
We’ll be using Laravel external libraries such as Socialite and Breeze Package.
Laravel provides a package to authenticate with OAuth providers using Laravel Socialite. Although, this package is not pre-installed in laravel.
Laravel Socialite supports authentication only for the following social account providers:
Facebook
Twitter
LinkedIn
Google
GitHub
GitLab
Bitbucket
Slack.
3 Create / Install a Laravel Project
3.1 Install Laravel Project
First, make sure your computer has a composer.
Use the following command to install new Laravel Project.
Upon logging in, the user's record will be stored in the database. This process involves accessing the .env file to input and define the database credentials.
We will use Laravel Breeze as an example of our existing authentication implementation.
4.1 Install Breeze Package
Use the following command to Install Laravel Breeze Package
composer require laravel/breeze --dev
After Composer has installed the Laravel Breeze package, you should run the breeze:install Artisan command. This command publishes the authentication views, routes, controllers, and other resources to your application.
php artisan breeze:install
php artisan migrate
npm install
npm run dev
4.2 Install Socialite Package
Use the following command to Install Laravel Socialite Package
composer require laravel/socialite
5 Create Facebook App Credentials
5.1 Login into Facebook Developers Portal
If you have Facebook Developer Account Go to https://developers.facebook.com/, else you can easily create one directly from the Facebook Developers Portal.
5.2 Create a Facebook App
Click on "Create App" Button and follow the prompts to create a new Facebook App
Create an App in the Facebook/Meta Admin
5.3 Configure OAuth Settings
In Following Screen select "Authenticate and request data from users with Facebook Login" Option
Fill the Details of the App in following Screen and Press " Create App " Button
In the Facebook App dashboard, navigate to " App Settings" Menu and then "Basic"
Now Copy App Id and App Secret to update in .env file and enter the website Domain URL in App Domains field, Again Scroll down in same screen to "Add Platform" details then Select Website and update Site URL.
5.4 Update App Information
Now go to "Use Cases" tab then click "Customize" Button and select "settings" option
Now fill the authorised redirect URIs. This is the URI that we will use to redirect user after they choose their Facebook account to login to our web. For example here I use http://127.0.0.1:8000/callback/facebook for the callback URI..
Client OAuth Settings Add OAuth Redirect URI in the Facebook/Meta Admin.
6 Configure Facebook App Credentials
6.1 Add the Facebook API Credentials in .env
Insert the Client ID and Client Secret key and redirect URI into the .env file, Which we obtained from previous step FACEBOOK_CLIENT_ID and FACEBOOK_CLIENT_SECRET. Additionally, include a new key in the .env file called FACEBOOK_REDIRECT_URI and populate it with the callback URI used in the Facebook API Console.
FACEBOOK_CLIENT_ID=Your Client ID
FACEBOOK_CLIENT_SECRET=Your Client Secret
FACEBOOK_REDIRECT_URI=http://127.0.0.1:8000/callback/facebook
6.2 Add the Facebook API .env key in config/services.php
Open the config/services.php file and Insert the Facebook OAuth Credentials
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('facebook_id')->after('password')->nullable()->unique();
});
}
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('facebook_id');
});
}
};
Use the following command to run the migration to update your database.
php artisan migrate
6.4 Update the User Model
In your User model , Include facebook_id in the fillable array of the User Model. app/Models/User.php
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name',
'email',
'password',
'facebook_id'
];
/**
* The attributes that should be hidden for serialization.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* Get the attributes that should be cast.
*
* @return array
*/
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}
}
?>
7 Create New Controller - FacebookLoginController
Now create a controller "FacebookSocialiteController" and add redirectToFacebook() and handleFacebookCallback() methods
Use the following artisan command to Create Controller.
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Models\User;
use Auth;
use Exception;
use Socialite;
class FacebookSocialiteController extends Controller
{
public function redirectToFacebook()
{
// redirect user to "login with Facebook account" page
return Socialite::driver('facebook')----->redirect();
}
public function handleCallback()
{
try {
// get user data from Facebook
$user = Socialite::driver('facebook')->user();
//dd($user);
// find user in the database where the social id is the same with the id provided by Facebook
$finduser = User::where('facebook_id', $user->id)->first();
if ($finduser) // if user found then do this
{
// Log the user in
Auth::login($finduser);
// redirect user to dashboard page
return redirect('/dashboard');
}
else
{
// if user not found then this is the first time he/she try to login with Facebook account
// create user data with their Facebook account data
$newUser = User::create([
'name' => $user->name,
'email' => $user->email,
'facebook_id' => $user->id,
'password' => bcrypt('my-facebook'), // fill password by whatever pattern you choose
]);
Auth::login($newUser);
return redirect('/dashboard');
}
}
catch (Exception $e)
{
dd($e->getMessage());
}
}
}
?>
8 Define a Route for Socialite Login with Facebook
Define routes for the FacebookSocialiteController in the web.php file routes/web.php
Route::get('auth/facebook', [FacebookSocialiteController::class, 'redirectToFacebook']); // redirect to facebook login
Route::get('callback/facebook', [FacebookSocialiteController::class, 'handleCallback']); // callback route after facebook account chosen
9 Update Login Blade File With Facebook Button
Create the Link in the login view to Show Facebook Sign-in Button resources/views/auth/login.blade.php
Use the following artisan command to Test the App.
php artisan serve
Visit the URL http://127.0.0.1:8000
12 Conclusion
That’s all we need to do.
Now the Facebook Sign-In Implementation completed in Laravel application with the help of Laravel Socialite and Breeze package.
