inchirags@gmail.com Chirag's Laravel Tutorial
https://www.chirags.in
*********************************************************************************************
Laravel 11 Socialite Login with Gitlab Account
*********************************************************************************************
Step 1: Create laravel 11 using the below command.
composer create-project --prefer-dist laravel/laravel laravel_11_gitlablogin
cd laravel_11_gitlablogin
Step 2: Install Laravel UI Package
Run the following command to install Laravel UI:
composer require laravel/ui
Step 3: Generate Authentication Scaffolding
Laravel UI provides frontend scaffolding with Vue, React, or Bootstrap. For this example, we'll use Bootstrap.
To install the authentication UI with Bootstrap, run:
php artisan ui bootstrap --auth
Step 4: Install Node Modules and Compile Assets
After generating the UI scaffolding, install the necessary frontend dependencies and compile the assets:
Install Node.js dependencies:
npm install
Compile the assets:
npm run dev
If you're in a production environment, use:
npm run build
Step 5: Install Laravel Socialite
Run the following command to install Laravel Socialite in your Laravel 11 project:
composer require laravel/socialite
Step 6: Configure Gitlab App
Create gitlab Account after creating an account you can copy the client ID and secret key.
https://github.com/settings/developers
Register OAuth Application on GitLab
Log in to your GitLab account.
Go to User Settings > Applications.
Click New Application.
Fill out the fields:
Name: Name of your application.
Redirect URI: Add the callback URL from your Laravel app, e.g.,
Application name
inChirags Login
Homepage URL
http://localhost:8000
Authorization callback URL
http://localhost:8000/auth/gitlab/callback.
Submit the form.
Step 7: Update the .env File
Add the following lines to your .env file:
GITLAB_CLIENT_ID=your-gitlab-client-id
GITLAB_CLIENT_SECRET=your-gitlab-client-secret
GITLAB_REDIRECT_URI=http://localhost:8000/auth/gitlab/callback
Replace your-gitlab-client-id, your-gitlab-client-secret, and your-domain.com with the actual values.
Step 8: Add Socialite Configuration in config/services.php
Edit the config/services.php file and add the Google configuration:
'gitlab' => [
'client_id' => env('GITLAB_CLIENT_ID'),
'client_secret' => env('GITLAB_CLIENT_SECRET'),
'redirect' => env('GITLAB_REDIRECT_URI'),
],
Step 9: Define Route
Now, create a new route for laravel socialite.
routes/web.php
use App\Http\Controllers\GitlabController;
Route::controller(GitlabController::class)->group(function(){
Route::get('auth/gitlab', 'redirectToGitlab')->name('auth.gitlab');
Route::get('auth/gitlab/callback', 'handleGitlabCallback');
});
Step 10: Create the Socialite Controller
Run the following command to generate a new controller:
php artisan make:controller GitlabController
Update the generated GitlabController:
app/Http/Controllers/GitlabController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
use Exception;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
class GitlabController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function redirectToGitlab()
{
return Socialite::driver('gitlab')->redirect();
}
/**
* Create a new controller instance.
*
* @return void
*/
public function handleGitlabCallback()
{
try {
$user = Socialite::driver('gitlab')->user();
$finduser = User::where('gitlab_id', $user->id)->first();
if($finduser){
Auth::login($finduser);
return redirect()->intended('home');
}else{
$newUser = User::updateOrCreate(
['email' => $user->email],
[
'name' => $user->name,
'gitlab_id'=> $user->id,
//'avatar' => $user->getAvatar(),
'password' => bcrypt('admin@123')
]
);
Auth::login($newUser);
return redirect()->intended('home');
}
} catch (Exception $e) {
return redirect('/login')->withErrors(['error' => 'Something went wrong']);
}
}
}
Step 11: Update database configuration in .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_11_gitlablogin
DB_USERNAME=root
DB_PASSWORD=admin@123
Step 12: Update the User Model
1. Add the gitlab_id and avatar column to the users table:
Create a migration:
php artisan make:migration add_gitlab_id_to_users_table
2. Update the migration file:
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('gitlab_id')->nullable()->unique();
$table->string('avatar')->nullable();
});
}
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn(['gitlab_id', 'avatar']);
});
}
3. Run the migration:
php artisan migrate
4. Add the below code to the User model.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name',
'email',
'password',
'gitlab_id',
'avatar'
];
/**
* The attributes that should be hidden for serialization.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* Get the attributes that should be cast.
*
* @return array
*/
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}
}
Step 13: Create a Login View
Design your login view (resources/views/auth/login.blade.php) with a "Login with Google" button (before <form> closing tag):
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Login') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="row mb-3">
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
<div class="row mb-0">
<div class="col-md-6 offset-md-4 mt-2">
<a class="btn btn-dark" href="{{ route('auth.gitlab') }}" style="display: flex; align-items: center; justify-content: center; padding: 10px; background-color: #FC6D26; color: #FFFFFF; text-decoration: none; border-radius: 4px;">
<svg xmlns="
http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill="#E24329" d="M11.996 22.858L16.528 8.956H7.469L11.996 22.858Z"/>
<path fill="#FC6D26" d="M11.996 22.858L7.469 8.956H2.85L11.996 22.858Z"/>
<path fill="#FCA326" d="M2.85 8.956L0.631 14.845C0.42 15.433 0.495 16.099 0.838 16.628L11.996 22.858L2.85 8.956Z"/>
<path fill="#FC6D26" d="M2.85 8.956H7.469L3.124 2.768C2.845 2.321 2.251 2.316 1.968 2.764L2.85 8.956Z"/>
<path fill="#E24329" d="M11.996 22.858L16.528 8.956H21.147L11.996 22.858Z"/>
<path fill="#FC6D26" d="M21.147 8.956H16.528L20.872 2.768C21.151 2.321 21.745 2.316 22.028 2.764L21.147 8.956Z"/>
<path fill="#FCA326" d="M23.366 14.845L21.147 8.956H16.528L20.872 15.845C21.091 16.292 21.685 16.297 21.968 15.849L23.366 14.845Z"/>
</svg>
<span style="margin-left: 10px;">Login with GitLab</span>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Step 14: Test the Implementation
Start the Laravel development server:
php artisan serve
Navigate to
http://127.0.0.1:8000/login
and click on the Login with Gitlab button.
After successful authentication, you should be redirected to /home.
For any doubts and query, please write on YouTube video comments section.
Note : Flow the Process shown in video.
Please, Subscribe and like for more videos:
https://www.youtube.com/@chiragstutorial
Don't forget to, Follow, Like, Share &, Comment
Thanks & Regards,
Chitt Ranjan Mahto "Chirag"
_____________________________________________________________________
Note: All scripts used in this demo will be available in our website.
Link will be available in description.
