Hey, Laravel developers! I’m excited to share a simple guide on adding Google login to your Laravel 12 application using the Socialite package. Social logins make signing in quick and user-friendly, letting users access your app with their Gmail accounts without needing a separate username or password.

In this tutorial, I’ll walk you through setting up Laravel Socialite, configuring Google OAuth, and creating a seamless login experience.

Whether you’re using Laravel UI, Jetstream, or Breeze, this guide is beginner-friendly and easy to follow.

Prerequisites

Before we dive in, make sure you have:

• A Laravel 12 project set up.
• A Google Developer account (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.

1. Go to Google Developer Console.
2. Create a new project (e.g., “Laravel Google Login”).
3. Navigate to APIs & Services > Credentials > Create Credentials > OAuth Client ID.
4. Select Web Application as the application type.
5. Add your app’s redirect URI (e.g., http://localhost:8000/auth/google/callback) under Authorized redirect URIs.
6. Save and note down the Client ID and Client Secret.

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!

Frequently Asked Questions (FAQs)

Q1: Why use Socialite for Google login?
A: Socialite simplifies OAuth authentication, handling the complex parts of connecting with Google and other providers, making it quick to implement social logins.

Q2: What if the Google login fails?
A: Check your Google Client ID, Client Secret, and redirect URI in the .env file. Ensure the URI matches exactly in the Google Developer Console. The controller also redirects to the login page with an error message if it fails.

Q3: Can I use this with Jetstream or Breeze?
A: Yes! Skip the Laravel UI step and adapt the routes and views to match Jetstream or Breeze’s structure. The Socialite logic remains the same.

Q4: How do I add other social logins like Facebook?
A: Install Socialite, configure the provider in config/services.php (e.g., 'facebook'), add credentials to .env, and create similar routes and controller methods for the provider.

Q5: Is Google login secure?
A: Yes, Google’s OAuth is secure, and Laravel’s bcrypt hashing for passwords adds extra protection. Ensure your app uses HTTPS in production for secure data transfer.

---

You might also like :

• Read Also: Integrate Google Gemini AI in Laravel 12
• Read Also: Laravel 11 Google Recaptcha V3 Validation
• Read Also: How to Integrate Google Calendar in Laravel 11
• Read Also: Laravel 12 ChartJS Integration: Step-by-Step Tutorial