inchirags@gmail.com Chirag's Laravel Tutorial https://www.chirags.in
*********************************************************************************************
Laravel 11 Socialite Login with Facebook Account
*********************************************************************************************
Step 1: Create laravel 11 using the below command.
composer create-project --prefer-dist laravel/laravel laravel_11_facebooklogin
Step 2: Install Laravel UI Package
Run the following command to install Laravel UI:
composer require laravel/ui
Step 3: Generate Authentication Scaffolding
Laravel UI provides frontend scaffolding with Vue, React, or Bootstrap. For this example, we'll use Bootstrap.
To install the authentication UI with Bootstrap, run:
php artisan ui bootstrap --auth
Step 4: Install Node Modules and Compile Assets
After generating the UI scaffolding, install the necessary frontend dependencies and compile the assets:
Install Node.js dependencies:
npm install
Compile the assets:
npm run dev
If you're in a production environment, use:
npm run build
Step 5: Install Laravel Socialite
Run the following command to install Laravel Socialite in your Laravel 11 project:
composer require laravel/socialite
Step 6: Configure Facebook App
Visit the Facebook Developers Console.
https://developers.facebook.com/
Create Facebook Account after creating an account you can copy the client ID and secret key.
Step 7: Update the .env File
Add the following lines to your .env file:
FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret
FACEBOOK_REDIRECT_URI=http://localhost:8000/auth/facebook/callback
Replace your-facebook-client-id, your-facebook-client-secret, and your-domain.com with the actual values.
Step 8: Add Socialite Configuration in config/services.php
Edit the config/services.php file and add the Google configuration:
'facebook' => [
'client_id' => env('FACEBOOK_CLIENT_ID'),
'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
'redirect' => env('FACEBOOK_REDIRECT_URI'),
],
Step 9: Define Route
Now, create a new route for laravel socialite.
routes/web.php
use App\Http\Controllers\FacebookController;
Route::controller(FacebookController::class)->group(function(){
Route::get('auth/facebook', 'redirectToFacebook')->name('auth.facebook');
Route::get('auth/facebook/callback', 'handleFacebookCallback');
});
Step 10: Create the Socialite Controller
Run the following command to generate a new controller:
php artisan make:controller FacebookController
Update the generated FacebookController:
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
{
/**
* 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()->intended('home');
}else{
$newUser = User::updateOrCreate(
['email' => $user->email],
[
'name' => $user->name,
'facebook_id'=> $user->id,
'avatar' => $user->getAvatar(),
'password' => bcrypt('admin@123')
]
);
Auth::login($newUser);
return redirect()->intended('home');
}
} catch (Exception $e) {
return redirect('/login')->withErrors(['error' => 'Something went wrong']);
}
}
}
}
Step 11: Update database configuration in .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_11_facebooklogin
DB_USERNAME=root
DB_PASSWORD=admin@123
Step 12: Update the User Model
1. Add the facebook_id and avatar column to the users table:
Create a migration:
php artisan make:migration add_facebook_id_to_users_table
2. Update the migration file:
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('facebook_id')->nullable()->unique();
$table->string('avatar')->nullable();
});
}
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn(['facebook_id', 'avatar']);
});
}
3. Run the migration:
php artisan migrate
4. Add the below code to the User model.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name',
'email',
'password',
'facebook_id',
'avatar'
];
/**
* The attributes that should be hidden for serialization.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* Get the attributes that should be cast.
*
* @return array
*/
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}
}
Step 13: Create a Login View
Design your login view (resources/views/auth/login.blade.php) with a "Login with Google" button (before <form> closing tag):
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Login') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="row mb-3">
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
<div class="row mb-0">
<div class="col-md-6 offset-md-4 mt-2">
<a class="btn btn-primary" href="{{ route('auth.facebook') }}" style="display: block;">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 32 32">
<path fill="#FFFFFF" d="M32 16.084c0-8.837-7.162-16-16-16S0 7.247 0 16.084c0 8.013 5.873 14.644 13.568 15.843v-11.22h-4.087v-4.623h4.087v-3.489c0-4.041 2.423-6.279 6.118-6.279 1.775 0 3.628.312 3.628.312v3.985h-2.046c-2.017 0-2.637 1.255-2.637 2.539v2.931h4.467l-.713 4.623h-3.754v11.22C26.127 30.728 32 24.097 32 16.084z"/>
</svg>
Login with Facebook
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Step 14: Test the Implementation
Start the Laravel development server:
php artisan serve
Navigate to
http://127.0.0.1:8000/login
and click on the Login with Facebook button.
After successful authentication, you should be redirected to /home.
For any doubts and query, please write on YouTube video comments section.
Note : Flow the Process shown in video.
Please, Subscribe and like for more videos:
https://www.youtube.com/@chiragstutorial
Don't forget to, Follow, Like, Share &, Comment
Thanks & Regards,
Chitt Ranjan Mahto "Chirag"
_____________________________________________________________________
Note: All scripts used in this demo will be available in our website.
Link will be available in description.
