Login with Laravel 8 and Socialite ,Google, Facebook, GitHub

Step 1: Install Laravel 8

First, create a new Laravel project:

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

Step 2: Install Laravel UI (Optional for scaffolding authentication)

If you're using Laravel 8 or earlier and want to add the authentication UI (login, register views), you can install the Laravel UI package.

composer require laravel/ui
php artisan ui vue --auth

This command generates all necessary views and routes for basic authentication.

Step 3: Update Your Database Credentials

Open the .env file and update your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_socialite
DB_USERNAME=root
DB_PASSWORD=your_database_password

GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"

FACEBOOK_CLIENT_ID="your_facebook_client_id"
FACEBOOK_CLIENT_SECRET="your_facebook_client_secret"

GITHUB_CLIENT_ID="your_github_client_id"
GITHUB_CLIENT_SECRET="your_github_client_secret"

Make sure to replace the GOOGLE_CLIENT_ID, FACEBOOK_CLIENT_ID, and GITHUB_CLIENT_ID with the actual credentials from the respective developer platforms.

Step 4: Install Socialite

To enable OAuth authentication, install the Laravel Socialite package:

composer require laravel/socialite

Then, add the Socialite service provider to your config/app.php:

'providers' => [
    ...
    Laravel\Socialite\SocialiteServiceProvider::class,
],

'aliases' => [
    ...
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

Step 5: Add Socialite Configuration

In config/services.php, add the configuration for Google, Facebook, and GitHub:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => 'http://localhost:8000/login/google/callback',
],

'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
    'redirect' => 'http://localhost:8000/login/facebook/callback',
],

'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => 'http://localhost:8000/login/github/callback',
],

Step 6: Create the User Migration

Create a migration file to store user data, including provider info for social login:

php artisan make:migration create_users_table

In the generated migration file, update the up() method like so:

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

Then, run the migration:

php artisan migrate

Step 7: Add Routes for Social Authentication

Add the routes for Google, Facebook, and GitHub authentication in routes/web.php:

use App\Http\Controllers\Auth\LoginController;

Route::get('login/google', [LoginController::class, 'redirectToGoogle'])->name('login.google');
Route::get('login/google/callback', [LoginController::class, 'handleGoogleCallback']);

Route::get('login/facebook', [LoginController::class, 'redirectToFacebook'])->name('login.facebook');
Route::get('login/facebook/callback', [LoginController::class, 'handleFacebookCallback']);

Route::get('login/github', [LoginController::class, 'redirectToGithub'])->name('login.github');
Route::get('login/github/callback', [LoginController::class, 'handleGithubCallback']);

Step 8: Create the LoginController

Create the LoginController:

php artisan make:controller Auth/LoginController

In the LoginController, add the methods to handle the social logins:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use App\Providers\RouteServiceProvider;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class LoginController extends Controller
{
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    public function handleGoogleCallback()
    {
        $user = Socialite::driver('google')->user();
        $this->_registerOrLoginUser($user);
        return redirect()->route('home');
    }

    public function redirectToFacebook()
    {
        return Socialite::driver('facebook')->redirect();
    }

    public function handleFacebookCallback()
    {
        $user = Socialite::driver('facebook')->user();
        $this->_registerOrLoginUser($user);
        return redirect()->route('home');
    }

    public function redirectToGithub()
    {
        return Socialite::driver('github')->redirect();
    }

    public function handleGithubCallback()
    {
        $user = Socialite::driver('github')->user();
        $this->_registerOrLoginUser($user);
        return redirect()->route('home');
    }

    protected function _registerOrLoginUser($data)
    {
        $user = User::where('email', '=', $data->email)->first();
        if (!$user) {
            $user = new User();
            $user->name = $data->name;
            $user->email = $data->email;
            $user->provider_id = $data->id;
            $user->avatar = $data->avatar;
            $user->save();
        }

        Auth::login($user);
    }
}

Step 9: Add Social Login Buttons to the Login Page

Modify resources/views/auth/login.blade.php to include social login buttons:

@extends('layouts.app')
@section('content')
    <div class="login-form">
        <form method="POST" action="{{ route('login') }}">
            @csrf
            <!-- Add your form fields here -->
            <div class="or-seperator"><i>OR</i></div>

            <div class="row mx-gutters-2 mb-4">
                <div class="col-sm-4">
                    <a href="{{ route('login.google') }}">
                        <button type="button" class="btn btn-block btn-google">
                            <i class="fa fa-google mr-2"></i>Google
                        </button>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="{{ route('login.facebook') }}">
                        <button type="button" class="btn btn-block btn-facebook">
                            <i class="fa fa-facebook mr-2"></i>Facebook
                        </button>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="{{ route('login.github') }}">
                        <button type="button" class="btn btn-github">
                            <i class="fa fa-github mr-2"></i>GitHub
                        </button>
                    </a>
                </div>
            </div>
        </form>
    </div>
@endsection

Step 10: Run the Development Server

Finally, run the Laravel development server:

php artisan serve

Visit the following URL in your browser:

http://localhost:8000/login

Final Notes

Ensure that you've registered your app on Google, Facebook, and GitHub developer consoles and obtained the correct credentials (Client ID and Client Secret).
Ensure your .env file contains the correct credentials for each service.

Souy Soeng