In this tutorial you will learn about the Laravel 8 Login with Facebook Account Example and its application with practical example.
In this Login with facebook in Laravel 8 example tutorial I’ll show you how to integrate facebook login in laravel 8 using socialite package. Integrating Facebook login in Laravel 8 using socialite 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 Login with Facebook Account Example
In this step by step tutorial, you will learn to integrate Facebook login with your laravel 8 application. Please follow the steps give below:
- Install Laravel 8 App
- Configure Database With App
- Configure Facebook App
- Install Socialite & Configure
- Add Field In Table Using Migration
- Install Jetstream Auth
- Build Routes
- Create Facebook Login Controller By Command
- Integrate FB Login Button In Login Page
- Start Development Server
Install Laravel 8
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel lara8blog |
Configure Database In .env file
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.
.env
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=lara8blog DB_USERNAME=root DB_PASSWORD= |
Configure Facebook App
Step 1:-
Go to Facebook’s developers site https://developers.facebook.com/ and log in with your Facebook account. There in Facebook developers Dashboard you have option to Create App. Lets create a Facebook Login App simply providing App Name and Contact Email.
Step 2:-
After creating the facebook app, go to setting->advanced and set redirect url
Step 3:-
Then, go to Facebook Login -> Settings and scroll down to “Valid OAuth Redirect URL” and set your callback URL
Step 4:-
After creating app, go to Settings -> Basic and get your newly created App ID and App Secret.
Now, go to config directory and open service.php file and add the client id, secret and callback url:
|
1 2 3 4 5 |
'facebook' => [ 'client_id' => 'xxxx', 'client_secret' => 'xxx', 'redirect' => 'http://127.0.0.1:8000/callback/facebook', ], |
Install Socialite Package via Composer
|
1 |
composer require laravel/socialite |
After Installing ‘socialite’ package, we need to add service provider and alias in config/app.php file as following.
config/app.php
|
1 2 3 4 5 6 7 8 9 |
'providers' => [ // Other service providers… Laravel\Socialite\SocialiteServiceProvider::class, ], 'aliases' => [ // Other aliases… 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ], |
Add Field In Table Using Migration
Now, use the following command to create a migration file to add a column in database table:
|
1 |
php artisan make:migration add_social_login_field |
Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –
|
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 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class AddSoicalLoginField extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function ($table) { $table->string('social_id')->nullable(); $table->string('social_type')->nullable(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::table('users', function ($table) { $table->dropColumn('social_id'); $table->dropColumn('social_type'); }); } } |
After successfully add field in database table. Then add fillable property in User.php model, which is found inside app/Models/ directory:
|
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 63 |
<?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', 'social_id', 'social_type' ]; /** * 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', ]; } |
Now, run following command to migrate database schema.
|
1 |
php artisan migrate |
Install Jetstream Auth
In this step, install jetstream laravel auth scaffolding package with livewire. We have provided a complete guide in this Laravel 8 Auth Scaffolding using Jetstream Tutorial.
Build Routes
After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.
routes/web.php
|
1 2 3 4 5 6 |
use Illuminate\Support\Facades\Route; use App\Http\Controllers\Auth\FacebookSocialiteController; Route::get('auth/facebook', [FacebookSocialiteController::class, 'redirectToFB']); Route::get('callback/facebook', [FacebookSocialiteController::class, 'handleCallback']); |
Create Facebook Login Controller
Now, lets create a controller for facebook login. Create a controller named FacebookSocialiteController using command given below –
|
1 |
php artisan make:controller FacebookSocialiteController |
Once the above command executed, it will create a controller file FacebookSocialiteController.php in app/Http/Controllers/ directory. Open the FacebookSocialiteController.php file and put the following code in it.
app/Http/Controllers/FacebookSocialiteController.php
|
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 |
<?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Socialite; use Auth; use Exception; use App\Models\User; class FacebookSocialiteController extends Controller { /** * Create a new controller instance. * * @return void */ public function redirectToFB() { return Socialite::driver('facebook')->redirect(); } /** * Create a new controller instance. * * @return void */ public function handleCallback() { try { $user = Socialite::driver('facebook')->user(); $finduser = User::where('social_id', $user->id)->first(); if($finduser){ Auth::login($finduser); return redirect('/home'); }else{ $newUser = User::create([ 'name' => $user->name, 'email' => $user->email, 'social_id'=> $user->id, 'social_type'=> 'facebook', 'password' => encrypt('my-facebook') ]); Auth::login($newUser); return redirect('/home'); } } catch (Exception $e) { dd($e->getMessage()); } } } |
Integrate FB Login Button In Login Page
Now, we will add facebook login button into login.blade.php file. So, open login.blade.php, which is found inside resources/views/auth/ directory:
|
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 |
<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 value="{{ __('Email') }}" /> <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus /> </div> <div class="mt-4"> <x-jet-label value="{{ __('Password') }}" /> <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" /> </div> <div class="block mt-4"> <label class="flex items-center"> <input 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> <a href="{{ url('auth/faebook') }}" style="margin-top: 0px !important;background: green;color: #ffffff;padding: 5px;border-radius:7px;" class="ml-2"> <strong>Facebook Login</strong> </a> </div> </form> </x-jet-authentication-card> </x-guest-layout> |
Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://localhost:8000/ |
