Prerequisites
Before we dive in, make sure you have:
- A Laravel 12 project set up.
- A Google Developer account (required for OAuth credentials).
- Composer and npm installed.
Step 1: Install Laravel 12 Application
Let’s start by setting up a fresh Laravel 12 project if you haven’t already:
composer create-project laravel/laravel laravel-12-example
Navigate to your project directory:
cd laravel-12-example
Step 2: Install Laravel UI
To create a login and registration system, we’ll use Laravel UI for Bootstrap authentication scaffolding. Run:
composer require laravel/ui
Install the Bootstrap auth scaffolding:
php artisan ui bootstrap --auth
Install npm dependencies and build assets:
npm install
npm run build
Note: If you’re using Jetstream or Breeze, you can skip this step and adapt the routes/views accordingly.
Step 3: Install Socialite
Next, install the Laravel Socialite package to handle Google OAuth:
composer require laravel/socialite
Step 4: Create a Google App
To enable Google login, you need OAuth credentials from the Google Developer Console.
- Go to Google Developer Console.
- Create a new project (e.g., “Laravel Google Login”).
- Navigate to APIs & Services > Credentials > Create Credentials > OAuth Client ID.
- Select Web Application as the application type.
- Add your app’s redirect URI (e.g.,
http://localhost:8000/auth/google/callback) under Authorized redirect URIs. - Save and note down the Client ID and Client Secret
Setup your URIs and Redirects
Configure the credentials in your Laravel app:
Update config/services.php
<?php
return [
// Other services...
'google' => [
'client_id' => env('GOOGLE_CLIENT_ID'),
'client_secret' => env('GOOGLE_CLIENT_SECRET'),
'redirect' => env('GOOGLE_REDIRECT'),
],
];
Update env
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT=http://localhost:8000/auth/google/callback
Step 5: Add google_id Column to Users Table
To store the Google user ID, add a google_id column to the users table.
Create a migration:
php artisan make:migration add_google_id_to_users_table
Update the migration file in database/migrations:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->string('google_id')->nullable();
});
}
public function down(): void
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('google_id');
});
}
};
Run the migration:
php artisan migrate
Update the User model (app/Models/User.php) to make google_id fillable:
<?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;
protected $fillable = [
'name',
'email',
'password',
'google_id',
];
protected $hidden = [
'password',
'remember_token',
];
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}
}
Step 6: Define Routes
Add routes for redirecting to Google and handling the callback. Open routes/web.php:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\GoogleController;
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::controller(GoogleController::class)->group(function () {
Route::get('auth/google', 'redirectToGoogle')->name('auth.google');
Route::get('auth/google/callback', 'handleGoogleCallback');
});
Step 7: Create the Google Controller
Create a controller to handle Google authentication:
php artisan make:controller GoogleController
Update app/Http/Controllers/GoogleController.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 GoogleController extends Controller
{
public function redirectToGoogle()
{
return Socialite::driver('google')->redirect();
}
public function handleGoogleCallback()
{
try {
$googleUser = Socialite::driver('google')->user();
$findUser = User::where('google_id', $googleUser->id)->first();
if ($findUser) {
Auth::login($findUser);
return redirect()->intended('home');
}
$newUser = User::updateOrCreate(
['email' => $googleUser->email],
[
'name' => $googleUser->name,
'google_id' => $googleUser->id,
'password' => bcrypt('random' . rand(100000, 999999)),
]
);
Auth::login($newUser);
return redirect()->intended('home');
} catch (Exception $e) {
return redirect('/login')->with('error', 'Google login failed. Please try again.');
}
}
}
Explanation:
redirectToGoogle: Redirects the user to Google’s OAuth login page.handleGoogleCallback: Retrieves the Google user, checks if they exist in the database, and either logs them in or creates a new user.
Step 8: Update the Login Blade File
Add a “Login with Google” button to the login page. Update resources/views/auth/login.blade.php:
@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">
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<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 Competence and Performance** 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 mt-3">
<div class="col-md-8 offset-md-4">
<a href="{{ route('auth.google') }}" class="btn btn-light border">
<img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png" alt="Login with Google" style="height: 40px;">
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Explanation:
- Adds a Google login button using Google’s official sign-in image.
- Displays an error message if the Google login fails.
Step 9: Run the Laravel Application
Start your Laravel server:
php artisan serve
Visit http://localhost:8000/login in your browser. You’ll see the login form with a “Login with Google” button. Click it, sign in with your Google account, and you’ll be redirected to the /home page if successful.
Conclusion
Adding Google login to your Laravel 12 app with Socialite is easier than it seems! In this tutorial, I showed you how to set up Socialite, configure Google OAuth, and create a smooth login experience. This feature saves users from remembering passwords and makes your app more accessible. Whether you’re building a blog, e-commerce site, or any web app, social logins like this one can boost user engagement. I hope you found this guide helpful—now go ahead and add Google login to your project!