In this tutorial you will learn about the Laravel 8 Socialite Login with Facebook Tutorial with Example and its application with practical example.
In this Laravel 8 Socialite Login with Facebook Tutorial with Example tutorial I’ll show you how to implement login with facebook in laravel 8 using Socialite and Jetstream package. Integrating login with facebook in Laravel 8 using Socialite and Jetstream package is much easier. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application.
Laravel 8 Socialite Login with Facebook Tutorial with Example
In this step by step tutorial, you will learn to integrate Facebook login in your laravel 8 application using Socialite and Jetstream. Please follow the steps give below:
Install Laravel
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project laravel/laravel --prefer-dist laravel-socialite-login-facebook-example |
Switch into the project directory using following command.
|
1 |
cd laravel-socialite-login-facebook-example |
Add Database Details
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=database_name DB_USERNAME=root DB_PASSWORD= |
Setting up Jetstream in Laravel
In this step we will Install Laravel Jetstream Package via Composer using following command:
|
1 |
composer require laravel/jetstream |
Run command to generate authentication templates such as login, register and email verification.
|
1 |
php artisan jetstream:install livewire |
Next, run below command.
|
1 |
npm install |
Run dev packages via node package manager.
|
1 |
npm run dev |
Run command to migrate authentication properties.
|
1 |
php artisan migrate |
Install Socialite Package in Laravel
In this step we will Install Socialite Package via Composer using following command:
|
1 |
composer require laravel/socialite |
Open config/app.php, register socialite plugin in providers, and aliases array.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.... .... 'providers' => [ .... .... Laravel\Socialite\SocialiteServiceProvider::class, ], 'aliases' => [ .... .... 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ], .... .... |
Add Facebook ID in Users Table
Now, in this step we will create migration file. Please run the following command:
|
1 |
php artisan make:migration add_fb_id_column_in_users_table --table=users |
Head over to newly created file migrations/timestamp_add_fb_id_column_in_users_table.php file, add the fb_id column value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class AddFbIdColumnInUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function (Blueprint $table) { $table->string('fb_id')->nullable(); }); } /** * Reverse the migrations. * * @return void */ 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?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; use Laravel\Fortify\TwoFactorAuthenticatable; use Laravel\Jetstream\HasProfilePhoto; use Laravel\Sanctum\HasApiTokens; class User extends Authenticatable { use HasApiTokens; use HasFactory; use HasProfilePhoto; use Notifiable; use TwoFactorAuthenticatable; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'name', 'email', 'password', 'fb_id', ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = [ 'password', 'remember_token', 'two_factor_recovery_codes', 'two_factor_secret', ]; /** * The attributes that should be cast to native types. * * @var array */ protected $casts = [ 'email_verified_at' => 'datetime', ]; /** * The accessors to append to the model's array form. * * @var array */ protected $appends = [ 'profile_photo_url', ]; } |
Add Facebook App ID and Secret
After creating a Facebook app id and the secret app, register in the config/services file.
|
1 2 3 4 5 6 7 8 9 10 |
return [ .... .... .... 'facebook' => [ 'client_id' => 'Facebook app id', 'client_secret' => 'Facebook add secret', 'redirect' => 'http://localhost:8000/auth/facebook/callback', ], ] |
Generate and Configure Controller
Now, lets create a controller named SocialController using command given below –
|
1 |
php artisan make:controller SocialController |
Open app/Http/Controllers/SocialController.php and place the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\User; 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\SocialController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<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.
|
1 |
php artisan serve |
Test the progress on the following URL:
|
1 |
http://127.0.0.1:8000/login |
