Adding GitHub Authentication to a Laravel Website

With social authentication, users do not have to fill out forms in order to register on your website; they also do not need to remember another password in other to access their accounts on your website. This article will provide a step-by-step process to add GitHub authentication to your website

Assumptions:

This tutorial assumes that you have PHP and Composer installed on your computer. It also uses XAMPP’s Apache and MySQL installations. It is therefore assumed that the reader is familiar with XAMPP. Visit the Composer and XAMPP websites to download them.

1. Create a new Laravel project

Run the following on your command line to create a new Laravel project called social-auth

composer create-project laravel/laravel social-auth

2. Configure your database setup

You can do this in two steps:

1. Create a new database called “social-auth” in phpMyAdmin
2. Edit your .env file with the appropriate details as shown below

3. Setup your basic authentication system with Laravel Breeze

Laravel 8 provides three free authentication starter packages: Laravel Breeze, Laravel Jetstream, and Laravel Fortify. For this tutorial, we will be using Laravel Breeze. Feel free to use whichever you want. It should not make a difference for what we need to do here.

To setup Laravel Breeze, run the following lines in the order they appear on your command line:

composer require laravel/breeze --dev
php artisan breeze:install
npm install
npm run dev
php artisan migrate

Running the following lines in your browser

4. Install Laravel Socialite and add providers and aliases in your config file

Run the following line on your command line to install Laravel Socialite

composer require laravel/socialite

In your config/app.php, add Socialite to your providers and aliases arrays thus:

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

5. Create a new GitHub app

Follow this link to create a new GitHub app. When on the page do the following:

1. Click the “Register new app” button

2. When the next page appears, provide the appropriate details as shown below

3. After that, you get a screen that looks like this after you click the “Generate a new client secret” button

Add a GitHub entry to your config/services.php file.

return [
    ....
    ....
    ....
    'github' => [
        'client_id' =>  env('GITHUB_CLIENT_ID'),
        'client_secret' => env('GITHUB_CLIENT_SECRET',
        'redirect' =>   env('GITHUB_CLIENT_REDIERECT',
    ],
]

Add the following to your .env file

GITHUB_CLIENT_ID="Your GitHub app id"
GITHUB_CLIENT_SECRET="Your GitHub client secret"
GITHUB_CLIENT_REDIERECT="http://localhost:8000/auth/github/callback"

6. Add a “github_id” column to your “users” table

Run the following line in your command line to create the migration file github_id column the users tale

php artisan make:migration add_github_id_to_users_table

Make the following changes to the file created.

Run the following line to update your database

php artisan migrate

8. Setup your GitHub authentication routes

Add the following lines to your routes/web.php file.

use App\Http\Controllers\SocialController;
//GitHub Authentication Routes
Route::get('auth/github', [SocialController::class, 'githubRedirect'])->name('login.github');
Route::get('auth/github/callback', [SocialController::class, 'githubCallback']);

9. Create and configure controller to handle the routes

Run the following line on your command line to create a controller to handle social authentication.

php artisan make:controller SocialController

Define githubRedirect() and githubCallback() methods as shown below:

10. Add GitHub login link to your registration and login pages

Add a copy of the link below to both the register.blade.php and login.blade.php in the resources\views\auth folder

<div class="flex items-center justify-center mt-4">
  <a href="{{ route('login.github') }}" class="underline text-sm text-gray-600 hover:text-gray-900">
    Login With GitHub
  </a>
</div>

11. Voila! You are done !!

Navigating to http://localhost:8000/login and clicking the Login with GitHubshould allow you to test it out. All the best!!!