Laravel 13: Setup Login & Register dengan Breeze

Autentikasi adalah fitur fundamental di hampir setiap aplikasi web modern. Laravel menyediakan beberapa cara untuk implementasi login dan register, salah satunya adalah Laravel Breeze — starter kit yang simple dan sangat cocok untuk pemula.

Di artikel ini, kita akan setup login dan register dari nol menggunakan Laravel 13 dan Breeze. Kamu akan belajar instalasi, customize form, dan memahami bagaimana Breeze bekerja di belakang layar.

Apa itu Laravel Breeze?

Laravel Breeze adalah starter kit autentikasi yang minimal namun lengkap. Breeze memberikan kamu scaffolding untuk login, register, password reset, email verification, dan logout — semuanya sudah built-in dengan Tailwind CSS untuk styling default yang modern.

Keuntungan menggunakan Breeze dibanding manual setup:

• Cepat — install satu command, langsung jalan
• Aman — sudah follow best practice Laravel untuk password hashing dan session management
• Flexible — mudah dikustomisasi sesuai kebutuhan
• Cocok untuk pemula — struktur code jelas dan well-documented

Instalasi Laravel 13 dan Breeze

Pertama, pastikan kamu sudah punya PHP 8.3+ dan Composer terinstall di mesin kamu. Kemudian, jalankan command berikut untuk membuat project Laravel baru:

composer create-project laravel/laravel app-login
cd app-login

Setelah itu, install Laravel Breeze via Composer:

composer require laravel/breeze --dev

Kemudian, jalankan command untuk publish Breeze scaffolding:

php artisan breeze:install

Breeze akan ask beberapa pertanyaan — pilih opsi default atau sesuai preferensi kamu. Untuk pemula, opsi default sudah cukup bagus. Setelah selesai, install dependencies Node.js:

npm install

Dan compile asset Tailwind CSS:

npm run dev

Terakhir, jalankan migration untuk buat database tables:

php artisan migrate

Jika diminta konfigurasi database, pastikan file .env sudah benar berisi nama database, username, dan password sesuai setup lokal kamu. Setelah selesai, kamu bisa start development server:

php artisan serve

Buka browser di http://localhost:8000 — kamu sudah bisa lihat halaman welcome dengan tombol Login dan Register di sudut kanan atas.

Memahami Struktur File Breeze

Setelah instalasi, coba explore struktur file yang dibuat Breeze. Lokasi penting:

• app/Http/Controllers/Auth/ — Controller untuk LoginController, RegisterController, dan lainnya
• resources/views/auth/ — Blade template untuk login.blade.php, register.blade.php
• routes/auth.php — Route definitions untuk autentikasi
• app/Models/User.php — Model User dengan Authenticatable trait
• database/migrations/ — Migration file untuk users table

Setiap file ini memiliki peran spesifik — controller handle logic, view handle UI, route handle routing. Dengan memahami struktur ini, kamu bisa customize dengan mudah sesuai kebutuhan aplikasi kamu.

Customize Form Login dan Register

Breeze sudah provide form default, tapi tentu kamu ingin customize sesuai design brand kamu. Edit file resources/views/auth/login.blade.php untuk customize form login:

<x-guest-layout>
    <x-authentication-card>
        <x-slot name="logo">
            <a href="/">
                <x-application-logo />
            </a>
        </x-slot>

        <x-validation-errors class="mb-4" />

        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf

            <div>
                <x-label for="email" value="Email" />
                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
            </div>

            <div class="mt-4">
                <x-label for="password" value="Password" />
                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>

            <div class="block mt-4">
                <label for="remember" class="flex items-center">
                    <input id="remember" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="remember">
                    <span class="ml-2 text-sm text-gray-600">Remember me</span>
                </label>
            </div>

            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                        Forgot password?
                    </a>
                @endif

                <x-button class="ml-4">
                    Log in
                </x-button>
            </div>
        </form>
    </x-authentication-card>
</x-guest-layout>

Untuk register, edit resources/views/auth/register.blade.php dengan cara serupa. Perhatikan bahwa Breeze menggunakan Blade component (x-input, x-button, dll) untuk reusability. Jika kamu mau override component ini, cek folder resources/views/components/.

Test Login dan Register

Sekarang test functionality-nya. Buka browser di http://localhost:8000/register dan coba buat akun baru. Isi form dengan email dan password, kemudian submit. Jika berhasil, kamu akan redirect ke dashboard.

Setelah itu, logout dan coba login dengan akun yang baru kamu buat. Breeze akan validate kredensial kamu — jika benar, user ter-authenticate dan session ter-save.

Untuk development, Breeze juga provide fitur password reset dan email verification. Feature-feature ini sudah built-in, jadi kamu bisa explore lebih lanjut sesuai kebutuhan aplikasi kamu.

Protect Route dengan Middleware

Setelah autentikasi setup, kamu perlu protect route-route yang hanya boleh diakses authenticated user. Breeze sudah sediakan auth middleware. Di routes/web.php, kamu bisa gunakan middleware seperti ini:

Route::middleware('auth')->group(function () {
    Route::get('/dashboard', function () {
        return view('dashboard');
    })->name('dashboard');
    
    Route::get('/profile', function () {
        return view('profile');
    })->name('profile');
});

Dengan middleware 'auth', siapa pun yang coba akses /dashboard tanpa login akan redirect ke halaman login. Simple dan powerful.

Kesimpulan

Laravel Breeze membuat setup autentikasi menjadi sangat mudah dan cepat — hanya beberapa command, kamu sudah punya sistem login dan register yang production-ready. Untuk pemula, Breeze adalah pilihan tepat karena code-nya clean, dokumentasi lengkap, dan mudah dikustomisasi.

Langkah selanjutnya adalah explore fitur-fitur lebih advanced seperti role-based access control (RBAC), social login, atau two-factor authentication. Tapi fondasi yang Breeze berikan sudah sangat solid untuk memulai. Selamat coding!