BlogLaravelLogin dengan Google di Laravel 12 Lengkap
Laravel

Login dengan Google di Laravel 12 Lengkap

Z

Zelixify

Editor

6 November 2025 11 menit baca

Pada tutorial kali ini, kita akan membuat sistem Login dengan Google di Laravel 12 menggunakan Laravel Socialite. Tutorial ini sudah lengkap dengan konfigurasi, controller, routing, dan view agar aplikasi bisa langsung dijalankan.

1. Membuat Project Laravel Baru

Buka terminal dan jalankan perintah berikut:

composer create-project laravel/laravel login-google-laravel12

Masuk ke folder proyek dan jalankan server:

cd login-google-laravel12
php artisan serve

Buka browser ke http://127.0.0.1:8000 untuk memastikan Laravel berjalan.

2. Instal Laravel Socialite

Laravel Socialite digunakan untuk login dengan akun sosial seperti Google.
Jalankan perintah:

composer require laravel/socialite

3. Membuat Credential di Google Cloud Console

  • Buka Google Cloud Console.

  • Buat proyek baru atau gunakan proyek yang sudah ada.

  • Buka APIs & Services → Credentials.

  • Klik Create Credentials → OAuth Client ID.

  • Pilih tipe Web Application.

  • Tambahkan Authorized redirect URI:

    http://127.0.0.1:8000/auth/google/callback

  • Simpan dan salin Client ID serta Client Secret.

Tambahkan data tersebut ke file .env:

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

4. Tambahkan ke File config/services.php

Buka file config/services.php dan tambahkan konfigurasi berikut:

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

5. Update Tabel Users

Tambahkan kolom baru di tabel users untuk menyimpan data pengguna dari Google.

php artisan make:migration add_google_fields_to_users_table --table=users

Edit file migrasi yang baru dibuat:

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

Lalu jalankan migrasi:

php artisan migrate

6. Membuat GoogleController

Buat controller baru:

php artisan make:controller GoogleController

Buka file app/Http/Controllers/GoogleController.php dan isi dengan kode berikut:

<?php

namespace App\Http\Controllers;

use Exception;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

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

    // Callback dari Google setelah login
    public function handleGoogleCallback()
    {
        try {
            // Ambil data user dari Google
            $googleUser = Socialite::driver('google')->stateless()->user();

            // Cek apakah user sudah terdaftar
            $user = User::where('google_id', $googleUser->getId())->first();

            if (!$user) {
                // Jika belum ada, buat user baru
                $user = User::updateOrCreate(
                    ['email' => $googleUser->getEmail()],
                    [
                        'name' => $googleUser->getName(),
                        'google_id' => $googleUser->getId(),
                        'avatar' => $googleUser->getAvatar(),
                        'password' => bcrypt('google-auth')
                    ]
                );
            }

            // Login user
            Auth::login($user);

            // Redirect ke halaman home
            return redirect()->intended('/home');
        } catch (Exception $e) {
            return redirect('/login')->with('error', 'Terjadi kesalahan saat login: ' . $e->getMessage());
        }
    }

    // Logout user
    public function logout(Request $request)
    {
        Auth::logout();
        $request->session()->invalidate();
        $request->session()->regenerateToken();
        return redirect('/login');
    }
}

7. Menambahkan Route

Edit file routes/web.php seperti ini:

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\GoogleController;

// Halaman utama
Route::get('/', function () {
    return view('index');
});

// Halaman login (otomatis redirect jika sudah login)
Route::get('/login', function () {
    if (Auth::check()) {
        return redirect()->route('home');
    }
    return view('login');
})->name('login');

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

// Halaman setelah login
Route::middleware('auth')->group(function () {
    Route::view('/home', 'home')->name('home');
    Route::get('/logout', [GoogleController::class, 'logout'])->name('logout');
});

8. Membuat View index.blade.php

Buat file resources/views/index.blade.php:

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selamat Datang di Aplikasi Laravel 12</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-in-up {
            opacity: 0;
            animation: fadeInUp 1s ease-out forwards;
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
    </style>
</head>
<body class="bg-white text-slate-800">
    <header class="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <a href="/" class="text-2xl font-bold text-blue-600">Aplikasi<span class="text-slate-900">Kita</span></a>
                <div class="hidden md:flex md:items-center md:space-x-8">
                    <a href="/#home" class="text-gray-600 hover:text-blue-600 transition duration-300">Home</a>
                    <a href="/#fitur" class="text-gray-600 hover:text-blue-600 transition duration-300">Fitur</a>
                    <a href="/#tentang" class="text-gray-600 hover:text-blue-600 transition duration-300">Tentang</a>
                </div>
                @if (Auth::check())
                    <a href="{{ route('home') }}" class="hidden md:inline-block bg-blue-600 text-white px-5 py-2 rounded-lg font-medium shadow-lg hover:bg-blue-700 transition duration-300 transform hover:-translate-y-0.5">Dashboard</a>
                @else
                    <a href="{{ route('login') }}" class="hidden md:inline-block bg-blue-600 text-white px-5 py-2 rounded-lg font-medium shadow-lg hover:bg-blue-700 transition duration-300 transform hover:-translate-y-0.5">Masuk</a>
                @endif
                <div class="md:hidden">
                    <button class="text-gray-700">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </nav>
    </header>

    <main id="home" class="pt-16">
        <section class="relative min-h-screen flex items-center">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-2 gap-12 items-center">
                <div class="text-center md:text-left">
                    <h1 class="animate-fade-in-up delay-100 text-4xl md:text-6xl font-extrabold text-slate-900 leading-tight">
                        Kelola Proyek Anda <span class="text-blue-600">Lebih Cerdas</span>
                    </h1>
                    <p class="animate-fade-in-up delay-200 mt-6 text-lg md:text-xl text-slate-600">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae efficitur magna, quis sodales dolor sit amet.
                    </p>
                    <div class="animate-fade-in-up delay-300 mt-10 flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                        <a href="{{ route('login') }}" class="inline-block bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold text-lg shadow-xl hover:bg-blue-700 transition duration-300 transform hover:-translate-y-1">
                            Masuk untuk Melanjutkan
                        </a>
                        <a href="#fitur" class="inline-block bg-white text-slate-700 px-8 py-4 rounded-lg font-semibold text-lg shadow-xl border border-slate-200 hover:bg-slate-50 transition duration-300 transform hover:-translate-y-1">
                            Lihat Fitur
                        </a>
                    </div>
                </div>
                <div class="animate-fade-in-up delay-400">
                    <img src="https://placehold.co/600x450/3B82F6/FFFFFF?text=Visual+Aplikasi" alt="Visual Aplikasi" class="rounded-xl shadow-2xl w-full">
                </div>
            </div>
        </section>

        <section id="fitur" class="py-20 bg-slate-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-2xl mx-auto">
                    <h2 class="text-3xl md:text-4xl font-bold text-slate-900">Semua yang Anda Butuhkan di Satu Tempat</h2>
                    <p class="mt-4 text-lg text-slate-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue vel justo.</p>
                </div>
                <div class="mt-16 grid md:grid-cols-3 gap-8">
                    <div class="bg-white p-8 rounded-xl shadow-lg transform transition duration-500 hover:scale-105">
                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                            <svg class="w-8 h-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                            </svg>
                        </div>
                        <h3 class="mt-6 text-2xl font-semibold text-slate-900">Analitik Cerdas</h3>
                        <p class="mt-3 text-slate-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae efficitur.</p>
                    </div>
                    <div class="bg-white p-8 rounded-xl shadow-lg transform transition duration-500 hover:scale-105">
                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                            <svg class="w-8 h-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.333 9-6.03 9-11.623 0-1.631-.46-3.167-1.28-4.518M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </div>
                        <h3 class="mt-6 text-2xl font-semibold text-slate-900">Keamanan Terjamin</h3>
                        <p class="mt-3 text-slate-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae efficitur.</p>
                    </div>
                    <div class="bg-white p-8 rounded-xl shadow-lg transform transition duration-500 hover:scale-105">
                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                            <svg class="w-8 h-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.758A3.75 3.75 0 0013.5 6.75h-1.5a4.5 4.5 0 00-4.5 4.5v.75"/>
                            </svg>
                        </div>
                        <h3 class="mt-6 text-2xl font-semibold text-slate-900">Cloud Storage</h3>
                        <p class="mt-3 text-slate-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae efficitur.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="tentang" class="py-20 bg-white">
            <div class="max-w-3xl mx-auto text-center px-4">
                <img src="https://placehold.co/100x100/EBF4FF/3B82F6?text=JD" alt="Avatar" class="w-24 h-24 rounded-full mx-auto shadow-xl">
                <blockquote class="mt-8 text-2xl md:text-3xl font-medium text-slate-800">
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Pellentesque sit amet."
                </blockquote>
                <p class="mt-6 text-lg font-semibold text-blue-600">John Doe</p>
                <p class="text-slate-500">CEO, TechCorp</p>
            </div>
        </section>

        <section class="bg-blue-600">
            <div class="max-w-4xl mx-auto py-20 px-4 text-center">
                <h2 class="text-3xl md:text-4xl font-bold text-white">Siap Mengubah Cara Kerja Anda?</h2>
                <p class="mt-4 text-lg text-blue-100 max-w-2xl mx-auto">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae efficitur magna, quis sodales.
                </p>
                <a href="{{ route('login') }}" class="inline-block mt-10 bg-white text-blue-600 px-10 py-4 rounded-lg font-semibold text-lg shadow-xl hover:bg-slate-50 transition duration-300 transform hover:-translate-y-1">
                    Mulai Sekarang
                </a>
            </div>
        </section>
    </main>

    <footer class="bg-slate-900 text-slate-400 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p>&copy; 2025 Aplikasi Laravel 12. All rights reserved.</p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="hover:text-white transition duration-300">Twitter</a>
                    <a href="#" class="hover:text-white transition duration-300">LinkedIn</a>
                    <a href="#" class="hover:text-white transition duration-300">Privacy Policy</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

9. Membuat View login.blade.php

Buat file resources/views/login.blade.php:

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login dengan Google</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-in-up {
            opacity: 0;
            animation: fadeInUp 1s ease-out forwards;
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
    </style>
</head>
<body class="bg-slate-50 text-slate-800 flex flex-col min-h-screen">
    <header class="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <a href="/" class="text-2xl font-bold text-blue-600">Aplikasi<span class="text-slate-900">Kita</span></a>
                <div class="hidden md:flex md:items-center md:space-x-8">
                    <a href="/#home" class="text-gray-600 hover:text-blue-600 transition duration-300">Home</a>
                    <a href="/#fitur" class="text-gray-600 hover:text-blue-600 transition duration-300">Fitur</a>
                    <a href="/#tentang" class="text-gray-600 hover:text-blue-600 transition duration-300">Tentang</a>
                </div>
                <a href="{{ route('login') }}" class="hidden md:inline-block bg-blue-600 text-white px-5 py-2 rounded-lg font-medium shadow-lg hover:bg-blue-700 transition duration-300 transform hover:-translate-y-0.5">
                    Masuk
                </a>
                <div class="md:hidden">
                    <button class="text-gray-700">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </nav>
    </header>

    <main class="flex-grow flex items-center justify-center pt-16">
        <div class="max-w-md w-full px-4 py-12">
            <div class="bg-white p-8 md:p-12 rounded-xl shadow-2xl w-full text-center">
                <div class="animate-fade-in-up delay-100 mx-auto mb-6 w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                    <svg class="w-9 h-9 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/>
                    </svg>
                </div>
                <h1 class="animate-fade-in-up delay-200 text-3xl font-bold text-slate-900 mb-2">Login Aplikasi</h1>
                <p class="animate-fade-in-up delay-300 text-lg text-slate-600 mb-8">
                    Gunakan akun Google Anda untuk masuk
                </p>
                <a href="{{ route('google.login') }}" class="animate-fade-in-up delay-400 w-full flex items-center justify-center bg-white border border-slate-300 text-slate-700 px-6 py-3 rounded-lg font-semibold text-lg shadow-sm transition-all duration-300 ease-in-out hover:bg-slate-50 hover:shadow-md transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    <i class="fab fa-google mr-3"></i>Login dengan Google
                </a>
                @if (session('error'))
                    <div class="animate-fade-in-up delay-400 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mt-6" role="alert">
                        {{ session('error') }}
                    </div>
                @endif
            </div>
        </div>
    </main>

    <footer class="bg-slate-900 text-slate-400 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p>&copy; 2025 Aplikasi Laravel 12. All rights reserved.</p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="hover:text-white transition duration-300">Twitter</a>
                    <a href="#" class="hover:text-white transition duration-300">LinkedIn</a>
                    <a href="#" class="hover:text-white transition duration-300">Privacy Policy</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

10. Membuat View home.blade.php

Buat file resources/views/home.blade.php:

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - AplikasiKita</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Poppins', sans-serif; }
        @keyframes fadeInUp {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up { opacity: 0; animation: fadeInUp 1s ease-out forwards; }
        .delay-100 { animation-delay: .1s; }
        .delay-200 { animation-delay: .2s; }
        .delay-300 { animation-delay: .3s; }
        .delay-400 { animation-delay: .4s; }
    </style>
</head>

<body class="bg-slate-50 text-slate-800 flex flex-col min-h-screen">
<header class="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
    <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <a href="/" class="text-2xl font-bold text-blue-600">
                Aplikasi<span class="text-slate-900">Kita</span>
            </a>
            <div class="hidden md:flex md:items-center md:space-x-8">
                <a href="/" class="text-gray-600 hover:text-blue-600 transition">Home</a>
            </div>
            <form method="POST" action="{{ route('logout') }}" class="hidden md:inline-block">
                @csrf
                <button type="submit" class="bg-red-500 text-white px-5 py-2 rounded-lg font-medium shadow-lg hover:bg-red-600 transition transform hover:-translate-y-0.5">
                    Logout
                </button>
            </form>
            <div class="md:hidden">
                <button class="text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 12h16m-7 6h7"/>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
</header>

<main class="flex-grow flex items-center justify-center pt-16">
    <div class="max-w-lg w-full px-4 py-12">
        <div class="bg-white p-8 md:p-12 rounded-xl shadow-2xl text-center">
            <div class="animate-fade-in-up delay-100 mx-auto mb-6 w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center shadow-lg">
                <span class="text-5xl font-bold text-white">
                    {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                </span>
            </div>
            <h1 class="animate-fade-in-up delay-200 text-3xl md:text-4xl font-bold text-slate-900 mb-2">
                Selamat Datang, <span class="text-blue-600">{{ Auth::user()->name }}</span>
            </h1>
            <p class="animate-fade-in-up delay-300 text-lg text-slate-600 mb-10">
                {{ Auth::user()->email }}
            </p>
            <form method="POST" action="{{ route('logout') }}" class="animate-fade-in-up delay-400 md:hidden">
                @csrf
                <button type="submit" class="w-full text-red-600 border-2 border-red-500 rounded-lg px-8 py-3 font-semibold text-lg transition hover:bg-red-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                    Logout
                </button>
            </form>
        </div>
    </div>
</main>

<footer class="bg-slate-900 text-slate-400 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <p>&copy; 2025 Aplikasi Laravel 12. All rights reserved.</p>
            <div class="flex space-x-6 mt-4 md:mt-0">
                <a href="#" class="hover:text-white transition">Twitter</a>
                <a href="#" class="hover:text-white transition">LinkedIn</a>
                <a href="#" class="hover:text-white transition">Privacy Policy</a>
            </div>
        </div>
    </div>
</footer>
</body>
</html>

11. Uji Coba Login

  • Jalankan server dengan php artisan serve.

  • Akses http://127.0.0.1:8000.

  • Klik tombol Masuk untuk Melanjutkan.

  • Klik Login dengan Google.

  • Pilih akun Google.

  • Jika berhasil, kamu akan diarahkan ke halaman /home dengan data profil tampil.

12. Kesimpulan

Dengan mengikuti langkah-langkah di atas, kamu telah berhasil membuat fitur Login dengan Google di Laravel 12 menggunakan Laravel Socialite.
Fitur ini meningkatkan pengalaman pengguna, mengurangi risiko password lemah, dan memanfaatkan sistem autentikasi aman dari Google.

Bagikan Artikel Ini

Tags

login google laravel 12login dengan google laravel 12google login laravel

Ingin Membuat Website atau Aplikasi Seperti Ini?

Tim Zelixify siap membantu Anda membangun solusi digital profesional dengan desain premium dan teknologi terkini.

Artikel Lainnya

Lihat Semua
Development
24 Desember 2025

Apa Itu Version Control (Git)? Cara Kerja dan Manfaatnya

Pelajari apa itu Version Control System (VCS) seperti Git, cara kerjanya, dan manfaat luar biasa yang ditawarkannya untuk proyek pengembangan Anda.

Baca Artikel
Development
13 Desember 2025

Panduan Memilih Database: Kapan Harus Pakai SQL dan Kapan NoSQL?

Memilih database yang tepat adalah kunci kesuksesan aplikasi. Pelajari perbedaan SQL dan NoSQL serta kapan waktu terbaik untuk menggunakannya agar proyekmu berjalan optimal!

Baca Artikel
Node.js
4 Desember 2025

Konsep Event Loop di Node.js: Cara Kerja dan Visualisasi yang Mudah Dipahami

Pahami bagaimana Node.js bisa secepat kilat dan efisien meskipun berjalan di single thread berkat mekanisme event loop yang cerdas. Artikel ini akan membahas konsepnya dengan sederhana.

Baca Artikel