In this tutorial you will learn about the Login with Facebook in Laravel 8 with Socialite and Jetstream and its application with practical example.
In this Login with Facebook in Laravel 8 with Socialite and Jetstream tutorial I’ll show you how to integrate facebook login in laravel 8 using Socialite and Jetstream package. Integrating Facebook login 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.
Login with Facebook in Laravel 8 with Socialite and Jetstream
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:
Step 1 : 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 blog |
Step 2 : Database Configuration
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=here your database name(blog) DB_USERNAME=here database username(root) DB_PASSWORD=here database password(root) |
Step 3 : Install Jetstream
In this step we will Install Laravel Jetstream Package via Composer using following command:
|
1 |
composer require laravel/jetstream |
Now, you have to install livewire with jetstream. Use the following command to install livewire with jetstream in laravel application:
|
1 |
php artisan jetstream:install livewire |
Install necessary NPM dependency:
|
1 |
npm install |
Start node development server:
|
1 |
npm run dev |
Now, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan migrate |
Step 4 : Install Socialite
In this step we will Install Socialite Package via Composer using following command:
|
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 10 11 12 13 |
.. 'providers' => [ .... Laravel\Socialite\SocialiteServiceProvider::class, ], 'aliases' => [ .... 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ], .... |
Step 5: Create 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 6 7 8 |
return [ .... 'facebook' => [ 'client_id' => 'app id', 'client_secret' => 'add secret', 'redirect' => 'http://localhost:8000/auth/facebook/callback', ], ] |
Step 6: Add Database Column
|
1 |
php artisan make:migration add_facebook_id_column_in_users_table --table=users |
database/migrations/2020_09_18_052105_add_facebook_id_column_in_users_table.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 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class AddFacebookIdColumn extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function ($table) { $table->string('facebook_id')->nullable(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::table('users', function ($table) { $table->dropColumn('facebook_id'); }); } } |
Now, you need to update User model as following:
app/Models/User.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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<?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', 'facebook_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', ]; public function addNew($input) { $check = static::where('facebook_id',$input['facebook_id'])->first(); if(is_null($check)){ return static::create($input); } return $check; } } |
Step 7: Create Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 |
use App\Http\Controllers\Auth\FacebookController; Route::get('auth/facebook', [FacebookController::class, 'redirectToFacebook']); Route::get('auth/facebook/callback', [FacebookController::class, 'handleFacebookCallback']); |
Step 8: Create Controller
Now, lets create a controller named FacebookController using command given below –
|
1 |
php artisan make:controller FacebookController |
Now, go to app/http/controllers/ directory and open FacebookController.php. Then put the following code into your FacebookController.php file
app/Http/Controllers/FacebookController.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 61 62 63 64 |
<?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Illuminate\Http\Request; use App\Models\User; use Validator; use Socialite; use Auth; use Exception; class FacebookController extends Controller { /** * Create a new controller instance. * * @return void */ public function redirectToFacebook() { return Socialite::driver('facebook')->redirect(); } /** * Create a new controller instance. * * @return void */ public function handleFacebookCallback() { try { $user = Socialite::driver('facebook')->user(); $finduser = User::where('facebook_id', $user->id)->first(); if($finduser){ Auth::login($finduser); return redirect('/dashboard'); }else{ $newUser = User::create([ 'name' => $user->name, 'email' => $user->email, 'facebook_id'=> $user->id, 'password' => encrypt('123456dummy') ]); Auth::login($newUser); return redirect('/dashboard'); } } catch (Exception $e) { dd($e->getMessage()); } } } |
Step 9: Update Blade File
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:
resources/views/auth/login.blade.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 |
<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 class="ml-1 btn btn-primary" href="{{ url('auth/facebook') }}" style="margin-top: 0px !important;background: blue;color: #ffffff;padding: 5px;border-radius:7px;" id="btn-fblogin"> <i class="fa fa-facebook-square" aria-hidden="true"></i> Login with Facebook </a> </div> </form> </x-jet-authentication-card> </x-guest-layout> |
Step 10: 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 |
localhost:8000/login |
