Laravel 12 – How to Add Google Login Using Socialite and Livewire Auth.

Quick Overview

Step # 1 : Create a Fresh Laravel 12 project with Livewire Auth.

laravel new google

composer create-project laravel/laravel --prefer-dist google

• Starter Kit: Select Livewire, which sets up Livewire-based authentication.
• Authentication Provider: Choose Laravel's built-in authentication for a simple default setup.
• Laravel Volt: Select No, since this project doesn’t require Volt.
• Testing Framework: Choose Pest, a clean and modern testing framework.
• Frontend Dependencies: Select Yes to automatically install all required frontend packages.
  
  

Step # 2 : Navigate to Your Project Directory.

cd c:xampp/htdocs/google

Step # 3 : Update the Users Table and User Model.

        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('google_id')->nullable();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });

protected $fillable = [
    'google_id',
    'name',
    'email',
    'password',
];

php artisan migrate:fresh

Step # 4 : Install Laravel Socialite Package.

composer require laravel/socialite

Step # 5 : Obtain Google App ID and App Secret.

1. Log in to the Google Developer Console. (Link : https://console.cloud.google.com/cloud-resource-manager)
   
   
2. Click Create Project.
   
   
   
   
3. Define the Project Name.
   
   
   
   
4. Access your newly created project.
   
   
   
   
5. Navigate to API & Services.
   
   
   
   
6. Then click on OAuth consent screen.
   
   
7. Then click on Get Started.
   
   
   
   
8. Provide the App information and User support email.
   
   
   
   
9. Select the User Type as External.
   
   
   
   
10. Add the required contact information. For production, complete all necessary details.
    
    
    
    
11. Click on Create OAuth client.
    
    
    
    
12. Select the Application type as Web application and then fill in all the details like name, Authorized JavaScript Origins and Authorized redirect URIs then click on create.
    
    
    
    
13. You'll now see the Client ID and Client Secret. Make sure to save these for future use.
    
    
    

    //Google Login
    'google' => [
        'client_id' => env('GOOGLE_CLIENT_ID'),
        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
        'redirect' => env('GOOGLE_REDIRECT_URI'),
    ],

GOOGLE_CLIENT_ID="Define your client ID here"
GOOGLE_CLIENT_SECRET="Define your client SECRET here"
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

Step # 6 : Create SocialController for Google Login.

php artisan make:controller SocialController

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
use Exception;
class SocialController extends Controller
{
    public function googleRedirect()
    {
        return Socialite::driver('google')->redirect();
    }
    public function loginWithGoogle()
    {
        try {
            // Retrieve user from Google
            $googleUser = Socialite::driver('google')->stateless()->user();
            // Attempt to find an existing user by Google ID or email
            $existingUser = User::where('google_id', $googleUser->id)
                ->orWhere('email', $googleUser->email)
                ->first();
            if ($existingUser) {
                // Update Google ID if the user was found by email
                if ($existingUser->google_id !== $googleUser->id) {
                    $existingUser->google_id = $googleUser->id;
                    $existingUser->save();
                }
                Auth::login($existingUser);
            } else {
                // Create a new user
                $createUser = User::create([
                    'name' => $googleUser->name,
                    'email' => $googleUser->email,
                    'google_id' => $googleUser->id,
                    // Hashing the password
                    'password' => bcrypt('password'),
                ]);
                Auth::login($createUser);
            }
            return redirect()->to('/dashboard'); // Direct path to your dashboard
        } catch (\Throwable $th) {
            // Log the exception or handle it as needed
            throw $th; // Consider logging the exception for debugging
        }
    }
}

Step # 7 : Set Up Routes for Google Authentication.

use App\Http\Controllers\SocialController;

// Route to redirect users to Google for authentication
Route::get('auth/google', [SocialController::class, 'googleRedirect']);
// Route to handle the callback from Google after authentication
Route::get('auth/google/callback', [SocialController::class, 'loginWithGoogle']);

Step # 8 : Add Google Login Button to Your Registration/Login Page.

<!-- Separator OR section -->
<div class="text-center">
    <span class="text-sm text-gray-600">OR</span>
</div>
<!-- Login with Google button -->
<div class="flex items-center justify-center">
    <a href="{{ url('auth/google') }}"
       class="inline-block w-full text-center px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-800 font-semibold">
        Login with Google
    </a>
</div>

Step # 9 : Test Google Login.

php artisan serve

Conclusion