Laravel 11 Socialite Login With GitHub Account

Hello, laravel web developers! In this article, we'll see how to Socialite login with github in laravel 11. In laravel 11, we'll integrate GitHub and login in laravel 11. As you all know, many websites currently provide different login authentication tools to users like Facebook login, google account, Gmail, etc.

Here I will give you an example of Laravel Socialite - login with a GitHub account.

Laravel 11 Socialite Login with GitHub Account

 

In this step, we'll install laravel 11 using the following command.

composer create-project --prefer-dist laravel/laravel laravel-11-example

 

Then, we'll configure the database in .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_8_github_example
DB_USERNAME=root
DB_PASSWORD=

 

Laravel Jetstream is authentication scaffolding crafted with Tailwind CSS and allows you to build auth templates with Livewire or Inertia JS.

It gives you pre-defined login, registration, email verification, two-factor authentication, session management, and API support templates.

composer require laravel/jetstream

Now, we need to install Livewire using the below artisan command and also we need basic authentication like login and registration otherwise you can install using the auth command.

php artisan jetstream:install livewire

Now, install npm and run the package.

npm install
npm run dev

Now, we will create a database using the migration command.

php artisan migrate

 

 Now, we will install the Socialite package using the following command.

composer require laravel/socialite

 

In this step, we have to add the new value inside the user's table.

php artisan make:migration add_github_id_field

Edit the add_github_id_field.php file and update the below code in that file.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddGithubIdField extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('github_id')->nullable();
            $table->string('auth_type')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('github_id');
           $table->dropColumn('auth_type');
         });
    }
}

app/Models/User.php

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use Notifiable;
    use TwoFactorAuthenticatable;

    /**
     * The attributes that are mass assignable.
     *
     * @var string[]
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'github_id',
        'auth_type',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];
}

Now new table values have been added, run migration and update the database tables.

php artisan migrate

 

You must have a GitHub account to perform laravel 11 login with a GitHub account. After creating a GitHub account visit the GitHub developers account to get the GitHub client id and secret key.

You need to create a new OAuth app. So, Register a new application button.

fill in the required information to register a new OAuth app.

Once the app is registered successfully, then you can get the Client ID and Secret Key.

 

In this step, we'll configure the GitHub client ID, secret key, and redirection callback URL in the config/services.php file.

config/services.php

'github' => [
        'client_id' => 'xxxx',
        'client_secret' => 'xxxx',
        'redirect' => 'http://localhost:8000/auth/github/callback',
    ],

 

Update the below code in your created GitHubController file.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Auth;
use Exception;
use Socialite;
use App\Models\User;

class GitHubController extends Controller
{
    public function gitHubLogin()
    {
        return Socialite::driver('github')->redirect();
    }
       

    public function gitHubCallback()
    {
        try {
     
            $user = Socialite::driver('github')->user();
      
            $searchUser = User::where('github_id', $user->id)->first();
      
            if($searchUser){
      
                Auth::login($searchUser);
     
                return redirect('/dashboard');
      
            }else{
                $gitUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'github_id'=> $user->id,
                    'auth_type'=> 'github',
                    'password' => encrypt('git12345')
                ]);
     
                Auth::login($gitUser);
      
                return redirect('/dashboard');
            }
     
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

 

Next, we'll define the routes into the web.php file.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\GitHubController;

Route::get('auth/github', [GitHubController::class, 'gitHubLogin']);
Route::get('auth/github/callback', [GitHubController::class, 'gitHubCallback']);

 

Now, add the following HTML code to that file.

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

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>

        <x-jet-validation-errors class="mb-4" />

        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf

            <div>
                <x-jet-label for="email" value="{{ __('Email') }}" />
                <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
            </div>

            <div class="mt-4">
                <x-jet-label for="password" value="{{ __('Password') }}" />
                <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>

            <div class="block mt-4">
                <label for="remember_me" class="flex items-center">
                    <x-jet-checkbox id="remember_me" name="remember" />
                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                </label>
            </div>

            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                @endif

                <x-jet-button class="ml-4">
                    {{ __('Log in') }}
                </x-jet-button>
            </div>
             
            <div class="flex items-center justify-end mt-4">                
                <a class="btn" href="{{ url('auth/github') }}"
                    style="color: #ffffff; background: #24292f; padding: 10px; width: 100%; text-align: center; display: block; border-radius:3px;">
                    Login with GitHub
                </a>
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>

Output:

Login Authorize GitHub

 

---

You might also like:

• Read Also: Laravel 11 Socialite Login with Google Account
• Read Also: Laravel 11 Socialite Login with Facebook Account
• Read Also: How to Create Login and Registration in Laravel 11
• Read Also  Login with Mobile Number using Laravel Custom Auth