Gratis update & dukungan instalasi

Bantuan
Kembali ke Blog
Panduan 09 Oct 2026

Cara Menambahkan Login dengan Google di Laravel (Socialite): Panduan Lengkap 2026

R Oleh renz mobellgnd
Cara Menambahkan Login dengan Google di Laravel (Socialite): Panduan Lengkap 2026

Cara Menambahkan Login dengan Google di Laravel (Socialite): Panduan Lengkap 2026

Tombol "Login dengan Google" hampir selalu ada di website modern — dari toko online sampai dashboard admin. Alasannya sederhana: pengguna tidak perlu mengingat password baru, dan pemilik website mendapat data akun yang sudah terverifikasi. Kabar baiknya, di Laravel fitur ini bisa dipasang dalam waktu kurang dari satu jam berkat package resmi Laravel Socialite.

Panduan ini ditulis untuk Laravel 11/12 dan mencakup alur lengkap: membuat kredensial OAuth di Google Cloud Console, instalasi Socialite, migrasi database, controller, sampai penanganan kasus rumit seperti email yang sudah terdaftar. Cocok juga jika kamu membeli source code Laravel dan ingin menambahkan fitur login sosial ke dalamnya — setelah itu jangan lupa ikuti panduan mengamankan website setelah beli source code.

Syarat

  1. Proyek Laravel 10+ yang sudah berjalan (PHP 8.2+). Belum punya? Ikuti dulu panduan instalasi project Laravel di Windows.
  2. Akun Google untuk mengakses Google Cloud Console.
  3. Composer terinstal.

Langkah 1: Buat OAuth Client ID di Google Cloud Console

Sebelum menyentuh kode, daftarkan aplikasimu ke Google:

  1. Buka Google Cloud Console → APIs & Services → Credentials.
  2. Klik Create Credentials → OAuth client ID. Jika diminta, isi dulu OAuth consent screen (tipe External, isi nama aplikasi dan email).
  3. Pilih Application type: Web application.
  4. Pada Authorized redirect URIs, isi URL callback aplikasimu, misalnya:
  5. Lokal: http://localhost:8000/auth/google/callback
  6. Produksi: https://namadomain.com/auth/google/callback
  7. Klik Create, lalu salin Client ID dan Client Secret yang muncul.

Catat baik-baik: redirect URI di sini harus sama persis (termasuk http/https dan trailing slash) dengan yang dikonfigurasi di Laravel. Ketidakcocokan adalah penyebab error redirect_uri_mismatch yang paling sering terjadi.

Langkah 2: Install Laravel Socialite

Jalankan di root proyek:

composer require laravel/socialite

Socialite adalah package resmi Laravel untuk OAuth2 dan mendukung banyak provider (Google, GitHub, Facebook, LinkedIn). Tidak perlu registrasi manual ke service provider — Laravel 11/12 memakai auto-discovery.

Langkah 3: Konfigurasi Kredensial

Tambahkan ke file .env:

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

Lalu daftarkan provider Google di config/services.php:

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

Langkah 4: Tambah Kolom ke Tabel Users

Kita perlu menyimpan ID Google dan foto profil pengguna. Buat migrasi baru:

php artisan make:migration add_google_columns_to_users_table

Isi migrasinya:

public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->string('google_id')->nullable()->unique()->after('email');
$table->string('avatar')->nullable()->after('google_id');
});
}

Jalankan php artisan migrate, lalu tambahkan kedua kolom ke $fillable di model App\Models\User:

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

Kolom password dibuat nullable jika migrasi default-mu mewajibkannya — pengguna Google tidak punya password lokal. (Atur di migrasi: $table->string('password')->nullable()->change().)

Langkah 5: Buat Controller

Buat controller khusus:

php artisan make:controller Auth/GoogleController

Isi app/Http/Controllers/Auth/GoogleController.php:

<?php

namespace App\Http\Controllers\Auth;

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

class GoogleController extends Controller
{
// Arahkan user ke halaman login Google
public function redirect()
{
return Socialite::driver('google')->redirect();
}

// Tangani callback dari Google
public function callback()
{
$googleUser = Socialite::driver('google')->user();

// Cari user berdasarkan google_id ATAU email
$user = User::where('google_id', $googleUser->getId())
->orWhere('email', $googleUser->getEmail())
->first();

if (! $user) {
// Pengguna baru: daftarkan otomatis
$user = User::create([
'name' => $googleUser->getName(),
'email' => $googleUser->getEmail(),
'google_id' => $googleUser->getId(),
'avatar' => $googleUser->getAvatar(),
]);
} else {
// Email sudah ada (mis. daftar manual): tautkan akun Google-nya
$user->update([
'google_id' => $googleUser->getId(),
'avatar' => $googleUser->getAvatar(),
]);
}

Auth::login($user);
session()->regenerate();

return redirect()->intended('/dashboard');
}
}

Perhatikan logika di atas: banyak tutorial hanya mencocokkan google_id, sehingga pengguna yang sebelumnya daftar manual dengan email yang sama akan mendapat error atau akun ganda. Dengan mencocokkan email juga, kedua metode login menyatu ke satu akun — pengalaman yang jauh lebih baik.

Langkah 6: Daftarkan Route

Tambahkan di routes/web.php:

use App\Http\Controllers\Auth\GoogleController;

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

Langkah 7: Tambah Tombol di Halaman Login

Di view login (mis. resources/views/auth/login.blade.php), tambahkan tombol:

<a href="{{ route('google.login') }}"
class="btn-google">
<svg><!-- ikon G Google --></svg>
Masuk dengan Google
</a>

Gunakan logo "G" resmi Google dan teks "Masuk dengan Google" sesuai pedoman branding Google agar terlihat profesional dan tepercaya.

Uji Coba

  1. Buka halaman login → klik tombol Google.
  2. Pilih akun Google → setujui izin (nama, email, foto profil).
  3. Kamu diarahkan kembali dan sudah dalam keadaan login.

Cek tabel users: baris baru berisi google_id dan avatar dari Google.

Troubleshooting: 2 Error Paling Sering

1. Error 400: redirect_uri_mismatch URI callback di Google Cloud Console tidak sama persis dengan GOOGLE_REDIRECT_URI di .env. Periksa skema (http vs https), domain, path, dan pastikan tidak ada spasi. Setelah diubah, tunggu beberapa menit karena perubahan di Google Console kadang butuh propagasi.

2. InvalidStateException Terjadi saat session hilang di tengah alur OAuth (umum di environment dengan load balancer atau saat testing API). Untuk endpoint API/mobile yang stateless, gunakan mode stateless:

$googleUser = Socialite::driver('google')->stateless()->user();

Mode stateless cocok untuk backend yang melayani aplikasi mobile — topik yang dibahas lebih dalam di panduan membuat REST API Laravel untuk aplikasi mobile. Untuk website biasa berbasis session, jangan pakai stateless karena kamu kehilangan proteksi CSRF bawaan OAuth.

Jika setelah deploy muncul halaman error misterius, jalankan checklist mengatasi error 500 setelah upload website sebelum menyalahkan Socialite — seringkali masalahnya di permission folder atau cache config.

Tips Keamanan

  1. Regenerate session setelah login (session()->regenerate()) untuk mencegah session fixation — sudah ada di contoh controller di atas.
  2. Jangan pernah menampilkan GOOGLE_CLIENT_SECRET di frontend atau commit .env ke repository.
  3. Batasi scope hanya yang dibutuhkan. Socialite Google default meminta openid, profile, dan email — cukup untuk login. Jangan meminta akses Google Drive dsb. kecuali memang perlu.
  4. Logout tetap lewat Auth::logout() + invalidate session seperti biasa; tidak perlu "logout dari Google".

Kesimpulan

Dengan Laravel Socialite, login Google hanya butuh tujuh langkah: kredensial OAuth, composer require, konfigurasi .env, migrasi kolom, controller, route, dan tombol di view. Fitur kecil ini berdampak besar pada konversi pendaftaran — pengguna yang malas mengisi form tetap bisa menjadi pengguna terdaftar dalam dua klik.

Butuh website atau aplikasi Laravel yang sudah dilengkapi fitur login sosial, payment gateway, dan dashboard admin? Jelajahi katalog source code siap pakai di kioskoding.com — tinggal install, sesuaikan, dan online.

Artikel Terkait

Cara Kirim Email Otomatis di Laravel dengan Queue: Notifikasi Order, Invoice & Reset Password (Panduan 2026)

09 Oct 2026

Cara Memasang SSL Gratis di Website (Let's Encrypt & Cloudflare): Panduan Lengkap 2026

09 Oct 2026

Cara Menghubungkan Domain ke Hosting: Panduan Lengkap DNS & Nameserver (2026)

08 Oct 2026

Cara Backup Otomatis Website Laravel: Database & File (Panduan 2026)

08 Oct 2026
Kembali ke Blog