Here, I will show you how to use 8 sign-in via facebook. This post will give you a simple example of laravel 8 login with a facebook account. Explain it simply by logging in 8 jetstream via facebook. This tutorial will give you a simple example of logging in via facebook on laravel 8.

As we know social media has become the most popular thing in the world. everyone has a social account like gmail, facebook etc. i think most of them have a facebook account. So if in your app you sign in with the community then it'll be fine. you've got a lot of people contacting your website because most people don't want to complete a subscription or sign-in form. If there is a public login it would be better.

So if you want to log in and login with facebook account I will help you teach step by step. let's follow the tutorial and apply it.

Install Laravel 8

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

Install JetStream

composer require laravel/jetstream

now, we need to create authenticity using the bellow command. you can create basic login, email and email verification. if you want to create team management you will have to pass the add parameter. you can see disturbing commands:

php artisan jetstream:install livewire

Now, let's node js package:

npm install

let's run package:

npm run dev

now, we require to run migration command to create database table:

php artisan migrate

Install Socialite

composer require laravel/socialite

Create Facebook App

You have to go https://developers.facebook.com and create app for facebook login client id and secret. After create account you can copy client id and secret.

config/services.php

return [
    'facebook' => [
        'client_id' => 'app id',
        'client_secret' => 'add secret',
        'redirect' => 'http://localhost:8000/auth/facebook/callback',
    ],
]

Add Database Column

php artisan make:migration add_facebook_id_column

Migration

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
   
class AddFacebookIdColumn extends Migration
{
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('facebook_id')->nullable();
        });
    }
   
    public function down()
    {
        //
    }
}?>

app/Models/User.php

<?php
  
namespace App\Models;
  
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;
  
    protected $fillable = [
        'name',
        'email',
        'password',
        'facebook_id'
    ];
  
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];
  
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
  
    protected $appends = [
        'profile_photo_url',
    ];
}?>

Create Routes : app/Http/routes.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FacebookController;

  
Route::get('auth/facebook', [FacebookController::class, 'redirectToFacebook']);
Route::get('auth/facebook/callback', [FacebookController::class, 'handleFacebookCallback']);
?>

Create Controller : app/Http/Controllers/FacebookController.php

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
use Exception;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
    
class FacebookController extends Controller
{
  
    public function redirectToFacebook()
    {
        return Socialite::driver('facebook')->redirect();
    }
          
  
    public function handleFacebookCallback()
    {
        try {
        
            $user = Socialite::driver('facebook')->user();
         
            $finduser = User::where('facebook_id', $user->id)->first();
        
            if($finduser){
         
                Auth::login($finduser);
        
                return redirect()->intended('dashboard');
         
            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'facebook_id'=> $user->id,
                    'password' => encrypt('123456dummy')
                ]);
        
                Auth::login($newUser);
        
                return redirect()->intended('dashboard');
            }
        
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}?>

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

<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>
            </div>
            <div class="flex items-center justify-end mt-4">
                <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>