Login with Laravel 8 and Socialite, GitHub

Step 1: Install Laravel 8

First, install a new Laravel app by running the command below in your terminal:

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

Install UI

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

Step 2: Update Your Database Credentials

Update your database credentials in the .env file located in the root of your project:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_custom_auth
DB_USERNAME=root
DB_PASSWORD=#your_database_password
GITHUB_CLIENT_ID="your_github_id"
GITHUB_CLIENT_SECRET="your_secret"

Step 3: Create Laravel Authentication

Run the following command to set up authentication:

php artisan make:auth

This command automatically adds authentication routes to web.php.

Step 4: Download Socialite Package

Install the Laravel Socialite package for social authentication:

composer require laravel/socialite
composer self-update --2

Then, open config/services.php and add the following:

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

Step 5: Get Secrets from GitHub

1. Go to GitHub Developer Settings

2. Create a new OAuth app

3. Copy your Client ID and Client Secret

4. Add them to your .env file

Step 6: Create Users Table Migration

Modify database/migrations/create_users_table.php:

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();
    });
}

Run the migration:

php artisan migrate

Step 7: Add Routes

Edit routes/web.php to add authentication routes:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\LoginController;

Route::get('/', function () {
    return view('auth.login');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

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

// Password Reset
Route::get('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@getEmail')->name('forget-password');
Route::post('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@postEmail')->name('forget-password');
Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');

Step 8: Create LoginController

Run:

php artisan make:controller LoginController

Then, edit app/Http/Controllers/Auth/LoginController.php:

namespace App\Http\Controllers\Auth;

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

class LoginController extends Controller
{
    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 GitHub Login Button to Login Page

Edit resources/views/auth/login.blade.php:

<a href="{{ route('login.github') }}" class="btn btn-github">
    <i class="fa fa-github"></i> Login with GitHub
</a>

Step 10: Run Development Server

Run the following command:

php artisan serve

Now, visit:

http://localhost/laravel_login_github/public/