Login with Facebook, Google, and GitHub Using Laravel Socialite : Complete Guide

Social login is a powerful feature that enhances user experience by allowing users to sign in using their existing social media accounts (like Google, Facebook, or GitHub). In this tutorial, we’ll walk through integrating social authentication into a Laravel application using Laravel Socialite. Let’s get started!

Why Use Social Login?

• Reduces registration friction for users.
• Eliminates the need to remember another password.
• Increases sign-up conversion rates.

Prerequisites

1. PHP and Composer installed locally.
2. A Laravel project setup.
3. Basic knowledge of Laravel MVC structure.

Step 1: Create Credentials and App 

Create Facebook App Credentials by following below article

Create GitHub OAuth Credentials by following below article

Create Google Login Credentials (Google OAuth) by following below article

Step 2: Set Up a Laravel Project

You can create a new Laravel project using either the Laravel installer or Composer:

• Option 1: Laravel Installer

  laravel new social-login

• Option 2: Composer

  composer create-project laravel/laravel social-login

Step 3: Navigate to Your Project Directory

cd social-login

Step 4: Modify/Create Migration for Social Auth

To store social provider IDs (e.g.,  google_provider_id, facebook_provider_id), modify your users table:

1. Create a new migration or You can edit your existing migration:

   php artisan make:migration add_provider_columns_to_users_table

2. Edit the migration file:

   public function up(): void
       {
           Schema::create('users', function (Blueprint $table) {
               $table->id();
               $table->string('name');
               $table->string('email')->unique();
               $table->timestamp('email_verified_at')->nullable();
               $table->string('password')->nullable();
               $table->string('image')->nullable();
               $table->string('facebook_provider_id')->nullable();
               $table->string('google_provider_id')->nullable();
               $table->rememberToken();
               $table->timestamps();
           });
       }

Step 5: Run Migrations

Update/Migrate your database schema:

php artisan migrate

Step 6: Configure Socialite Credentials

1. Add credentials to .env:

   GOOGLE_CLIENT_ID=your_client_id
   GOOGLE_CLIENT_SECRET=your_client_secret
   FACEBOOK_CLIENT_ID=your_client_id
   FACEBOOK_CLIENT_SECRET=your_client_secret
   GITHUB_CLIENT_ID=your_client_id
   GITHUB_CLIENT_SECRET=your_client_secret

2. Update config/services.php:

   'google' => [
           'client_id' => env('GOOGLE_CLIENT_ID'),
           'client_secret' => env('GOOGLE_CLIENT_SECRET'),
           'redirect' => env('APP_URL').'/login/google/callback',
       ],
   'facebook' => [
           'client_id' => env('FACEBOOK_CLIENT_ID'),
           'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
           'redirect' => env('APP_URL').'/login/facebook/callback',
       ],
   'github' => [
           'client_id' => env('GITHUB_CLIENT_ID'),
           'client_secret' => env('GITHUB_CLIENT_SECRET'),
           'redirect' => env('APP_URL').'/login/github/callback',
       ],

Note: Ensure your OAuth provider’s dashboard includes the call-back URL (e.g., http://your-app/auth/google/callback).

Step 7: Install Laravel Socialite

composer require laravel/socialite

Step 8: Create Authentication Routes

Add these routes to routes/web.php:

Route::get('/login/{provider}', [LoginController::class, 'socialRedirectToProvider'])->name('client.login.provider');
Route::get('/login/{provider}/callback', [LoginController::class, 'socialHandleProviderCallback']);

Step 9: Handle Route In Controller

Implement methods:

<?php
namespace App\Http\Controllers\Auth;
use App\Models\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
class LoginController extends Controller
{
    public function socialRedirectToProvider($provider)
    {
        return Socialite::driver($provider)->with(['prompt' => 'consent'])->redirect();
    }
    public function socialHandleProviderCallback($provider, Request $request)
    {
        // handle request for id user denied access or cancel request
        if (! empty($request->get('error'))) {
            return redirect()->route('client.login')->with('error', 'You denied the login request or Something went wrong, Please try again.');
        }
        // get the user details
        $user = Socialite::driver($provider)->user();
        $this->socialRegisterOrLoginUser($user, $provider);
        return redirect()->route('home')->with('success', 'Your are Sucessfully logged in');
    }
    protected function socialRegisterOrLoginUser($data, $provider = null)
    {
        $user = User::where('email', $data->email)->first();
        if (! $user) {
            $user = new User;
            $user->name = $data->name;
            $user->email = $data->email;
            $user->image = $data->avatar;
            $user->email_verified_at = now();
        }
        $providerField = "{$provider}_provider_id";
        if (empty($user->$providerField)) {
            $user->$providerField = $data->id;
            if (empty($user->image)) {
                $user->image = $data->avatar;
            }
        }
        $user->save();
        Auth::login($user);
    }
}

Step 10: Add Social Login Buttons to Your View

In your login/register blade file (e.g., resources/views/auth/login.blade.php):

<div class="d-block text-center m-2">
	<a href="{{ route('client.login.provider', ['provider' => 'google']) }}" class="btn border w-50">
		Continue with Google
	</a>
</div>
<div class="d-block text-center m-2">
	<a href="{{ route('client.login.provider', ['provider' => 'facebook']) }}" class="btn border w-50">
		Continue with Facebook
	</a>
</div>
<div class="d-block text-center m-2">
	<a href="{{ route('client.login.provider', ['provider' => 'github']) }}" class="btn border w-50">
		Continue with Github
	</a>
</div>

Step 11: Test Your Application

1. Start the development server:

   php artisan serve

2. Visit /login and click a social login button.
3. Ensure the OAuth flow works and the user is created/logged in.

Troubleshooting Tips

• Call-back URL mismatch: Double-check the redirect URI and your OAuth provider’s settings.
• Missing scopes: Use ->scopes(['email', 'profile']) in the redirect method if needed.
• Database errors: Ensure migrations ran successfully.

all code is available in git hub repository:

https://github.com/cmwebsolution/social-login.git

Conclusion

You’ve now integrated social login into your Laravel app! This feature simplifies user registration and improves engagement. Extend this further by:

• Supporting more providers (GitHub, Linkedin, etc.).
• Handling edge cases (e.g., users with the same email across providers).
• Customizing user data retrieval.

Happy coding! 🚀