Tutorial Login Menggunakan Google di Laravel dengan Socialite

Di era sekarang login lewat media sosial jadi fitur wajib di banyak website. Salah satu yang paling sering dipakai adalah login menggunakan akun Google. Dengan login via Google, pengguna tidak perlu repot membuat akun baru, cukup izinkan akses, langsung bisa masuk. Di Laravel sendiri kita bisa memanfaatkan package bawaan bernama Laravel Socialite yang memudahkan integrasi OAuth (termasuk Google) hanya dengan beberapa langkah.

Di bawah ini saya akan jelaskan secara detail bagaimana cara membuat login Google di Laravel mulai dari awal sampai tombolnya muncul di halaman login.

1. Instalasi Laravel Socialite

Laravel Socialite adalah library resmi dari Laravel untuk login via pihak ketiga seperti Google, Facebook, GitHub, dsb. Dengan Socialite kita tidak perlu implementasi OAuth manual.

Di terminal jalankan:

composer require laravel/socialite

Perintah ini akan mengunduh package Socialite dan mendaftarkannya di project Laravel kita.

2. Menyiapkan Project Laravel

Kalau kamu sudah punya project Laravel dan sistem login defaultnya sudah jalan (misalnya pakai Laravel Breeze atau Jetstream), kamu bisa langsung lanjut. Tapi kalau belum, buat project baru dulu:

laravel new nama_project

cd nama_project

Lalu jalankan php artisan serve untuk memastikan projectnya jalan.

3. Mendaftarkan Aplikasi di Google Cloud Console

Agar bisa login via Google, kita perlu daftar aplikasi kita ke Google Cloud Console agar Google tahu ke mana harus mengirimkan data pengguna.

Langkahnya:

1. Buka https://console.cloud.google.com

2. Buat project baru atau pilih project yang sudah ada.

3. Masuk ke menu API & Services → Credentials.

4. Klik Create Credentials → OAuth Client ID.

5. Pilih Web Application.

6. Di Authorized redirect URIs, masukkan alamat callback seperti:

   http://localhost:8000/auth/google/callback

   (ini route callback yang akan kita buat nanti).

7. Setelah klik Create, kamu akan dapat Client ID dan Client Secret. Simpan karena nanti kita masukkan ke .env.

Intinya: Client ID & Secret ini adalah “kunci” untuk berkomunikasi antara Laravel dan Google.

4. Menambahkan Konfigurasi ke .env

Buka file .env lalu tambahkan:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URI=GOOGLE_REDIRECT_URI=http://localhost:8000/auth-google-callback

Data ini diambil dari Google Cloud Console tadi.

5. Menambahkan Settingan ke config/services.php

Agar Socialite tahu credential kita, buka config/services.php lalu tambahkan:

 'google' => [
            'client_id' => env('GOOGLE_CLIENT_ID'),
            'client_secret' => env('GOOGLE_CLIENT_SECRET'),
            'redirect' => config('app.url'). '/auth-google-callback',
    ],

Dengan cara ini, Laravel otomatis membaca credential dari .env.

6. Membuat Controller untuk Login Google

Sekarang kita buat controller baru:

php artisan make:controller Auth/GoogleController

Lalu isi file GoogleController.php dengan kode berikut:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Laravel\Socialite\Facades\Socialite;
use Illuminate\Support\Facades\Auth;
use App\Models\User;

class GoogleController extends Controller
{
    // 1. Redirect ke Google
    public function google_redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    // 2. Callback dari Google
    public function google_callback()
    {
        $googleUser = Socialite::driver('google')->user();

        $user = User::updateOrCreate(
            ['email' => $googleUser->getEmail()],
            [
                'name'      => $googleUser->getName(),
                'google_id' => $googleUser->getId(),
                'avatar'    => $googleUser->getAvatar(),
                'password'  => bcrypt(str()->random(16)),
            ]
        );

        // login usernya + remember
        Auth::login($user, true);

        // redirect ke dashboard
        return redirect()->route('dashboard');
    }
}

Penjelasan:

• google_redirect() mengarahkan user ke halaman login Google.

• google_callback() menangkap data user setelah user mengizinkan login, lalu otomatis login atau membuat akun baru.

7. Menambahkan Route

Buka routes/web.php lalu tambahkan:

use App\
use App\Http\Controllers\Auth\GoogleController;

// LOGIN DENGAN GOOGLE
Route::get('/auth/google', [GoogleController::class, 'google_redirect'])
    ->name('google.login');

Route::get('/auth/google/callback', [GoogleController::class, 'google_callback'])
    ->name('google.callback');

Ini adalah dua route utama: route untuk redirect ke Google dan route callback setelah user login.

8. Menambahkan Tombol “Login with Google” di Halaman Login

Buka resources/views/auth/login.blade.php (atau file login kamu), lalu tambahkan:

<a href="{{ route('google.login') }}"
   class="flex items-center justify-center gap-2 
          w-full px-4 py-2 rounded-lg 
          bg-red-600 hover:bg-red-700 
          text-white font-semibold 
          shadow-md hover:shadow-lg 
          transition-all duration-300 mt-4">
    <img src="https://www.svgrepo.com/show/355037/google.svg" 
         alt="Google Logo" class="w-5 h-5 bg-white rounded-full p-0.5">
    Login with Google
a>

Kenapa pakai bukan ? Karena kita mau link ke route Google, bukan submit form. Stylingnya pakai Tailwind supaya warna merah dan teks putih.

---

9. Testing

Jalankan server Laravel:

php artisan serve

Buka http://localhost:8000/login.

Klik tombol “Login with Google”, login pakai akun Google, izinkan akses.

Kalau sukses, user akan diarahkan ke /dashboard dalam keadaan login.

---

10. Alur yang Terjadi di Balik Layar

1. User klik tombol Login with Google.

2. Laravel kirim user ke Google OAuth.

3. Google minta izin user.

4. Google kirim balik data user ke route callback kita.

5. Laravel cek email user, buat akun kalau belum ada.

6. Laravel login-kan user ke sistem.

7. User diarahkan ke dashboard.