Login with Laravel 8 and Socialite, Facebook

Laravel 8 Facebook Login Authentication

Step 1: Install Laravel 8

First, install a new Laravel application by running the command:

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

Install UI

Run the following commands to install UI authentication:

composer require laravel/ui
php artisan ui vue --auth

Step 2: Update Your Database Credentials

Update your database credentials in the .env file located in the project root:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_custom_auth
DB_USERNAME=root
DB_PASSWORD=#your_database_password
FACEBOOK_CLIENT_ID="your_facebook_id"
FACEBOOK_CLIENT_SECRET="your_secret"

Step 3: Create Laravel Authentication

Run the following command to generate authentication scaffolding:

php artisan make:auth

Step 4: Install Socialite Package

Run the following commands to install the Laravel Socialite package:

composer require laravel/socialite
composer self-update --2

Update config/services.php

Add the following code:

'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
    'redirect' => 'http://localhost/Login_Socialite/public/login/facebook/callback',
],

Step 5: Get Facebook App Credentials

1. Go to Facebook Developer and create an app.

2. Copy your App ID and App Secret and update the .env file.

3. Under Products, select Web and add your website URL: https://localhost:8000.

4. Under Facebook Login → Settings, add your callback URL: https://localhost:8000/callback.

Step 6: Run Migrations

Modify the users table in database/migrations/create_users_table.php:

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->string('provider_id')->nullable();
        $table->text('avatar')->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->rememberToken();
        $table->timestamps();
    });
}

Run the migration command:

php artisan migrate

Step 7: Define Routes

Update routes/web.php with Facebook login routes:

Route::get('/', function () {
    return view('auth.login');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('login/facebook', [App\Http\Controllers\Auth\LoginController::class, 'redirectToFacebook'])->name('login.facebook');
Route::get('login/facebook/callback', [App\Http\Controllers\Auth\LoginController::class, 'handleFacebookCallback']);

Step 8: Create LoginController

Generate the controller:

php artisan make:controller LoginController

Update app/Http/Controllers/Auth/LoginController.php:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class LoginController extends Controller
{
    public function redirectToFacebook()
    {
        return Socialite::driver('facebook')->redirect();
    }

    public function handleFacebookCallback()
    {
        $user = Socialite::driver('facebook')->user();
        $this->_registerOrLoginUser($user);
        return redirect()->route('home');
    }

    protected function _registerOrLoginUser($data)
    {
        $user = User::where('email', $data->email)->first();
        if (!$user) {
            $user = new User();
            $user->name = $data->name;
            $user->email = $data->email;
            $user->provider_id = $data->id;
            $user->avatar = $data->avatar;
            $user->save();
        }
        Auth::login($user);
    }
}

Step 9: Add Facebook Login Button in login.blade.php

Update resources/views/auth/login.blade.php:

<div class="row mx-gutters-2 mb-4">
    <div class="col-sm-12">
        <a href="{{ route('login.facebook') }}">
            <button type="button" class="btn btn-block btn-facebook">
                <i class="fa fa-facebook mr-2"></i> Facebook
            </button>
        </a>
    </div>
</div>

Step 10: Run Laravel Development Server

Run the following command to start the development server:

php artisan serve

Now, navigate to:

http://localhost/laravel_login_facebook/public/

Your Facebook login authentication is now set up and ready to use!