Hampir setiap aplikasi web butuh fitur login dan register, tetapi menulis sistem autentikasi dari nol itu melelahkan dan rawan celah keamanan. Tutorial Laravel Breeze login register ini menunjukkan cara mendapatkan fitur autentikasi lengkap (register, login, logout, lupa password, verifikasi email) hanya dengan beberapa perintah, memakai starter kit resmi bernama Laravel Breeze.
Panduan ini adalah lanjutan alami dari seri Laravel di blog ini. Kita memakai Laravel 12 dengan PHP 8.2, dan di akhir kamu akan memahami cara kerja autentikasi bawaan Laravel, cara mengubah tampilannya, serta cara melindungi halaman agar hanya bisa diakses pengguna yang sudah login.
Apa Itu Laravel Breeze?
Laravel Breeze adalah starter kit autentikasi resmi dari tim Laravel yang menyediakan semua hal dasar: halaman login, register, lupa password, reset password, verifikasi email, halaman profil, dan route dashboard. Breeze tersedia dalam beberapa varian tampilan (Blade, Livewire, React, Vue, dan API), dan dalam tutorial ini kita memakai varian Blade karena paling cocok untuk pemula yang sudah familiar dengan HTML.
Penting untuk dipahami: Breeze bukan package ajaib yang menyembunyikan kode. Semua controller, view, dan route-nya dipublikasikan ke projectmu sehingga kamu bisa membaca, mempelajari, dan mengubahnya sesuka hati. Inilah yang membuatnya ideal untuk belajar, berbeda dengan solusi autentikasi yang kodenya tertutup.
Prasyarat sebelum mulai: PHP 8.2 atau lebih baru, Composer, Node.js dengan npm, dan MySQL yang sudah berjalan. Kalau MySQL-mu belum siap, ikuti dulu panduan Belajar MySQL untuk Pemula yang sudah terjadwal di blog ini.
Tutorial Laravel Breeze Login Register: Instalasi
Langkah pertama adalah membuat project Laravel 12 baru, lalu menambahkan Breeze sebagai dependensi development:
composer create-project laravel/laravel:^12.0 auth-breeze
cd auth-breeze
composer require laravel/breeze --dev
Perintah pertama mengunduh kerangka Laravel 12 ke folder auth-breeze. Perintah kedua menambahkan package Breeze khusus untuk lingkungan development. Selanjutnya, jalankan installer Breeze dan pilih varian Blade saat ditanya:
php artisan breeze:install
Installer akan menanyakan stack yang diinginkan. Pilih blade untuk tutorial ini. Breeze kemudian mempublikasikan controller autentikasi ke app/Http/Controllers/Auth, view ke resources/views/auth, dan route ke routes/auth.php. Ia juga menambahkan route dashboard contoh ke routes/web.php.
Setelah instalasi, jalankan migrasi database untuk membuat tabel users dan tabel pendukungnya:
php artisan migrate
Pastikan konfigurasi database di file .env sudah benar (nama database, username, dan password MySQL). Jika migrasi gagal, 90 persen penyebabnya adalah kredensial database yang salah di .env.
Terakhir, install dependensi frontend dan jalankan server development:
npm install
npm run dev
Jalankan juga php artisan serve di terminal terpisah, lalu buka http://localhost:8000. Kamu akan melihat halaman welcome Laravel dengan tautan Login dan Register di pojok kanan atas. Klik Register, isi formulir, dan akun pertamamu langsung jadi.
Memahami File-File Penting Breeze
Agar tidak sekadar “bisa pakai”, mari pahami struktur yang dibuat Breeze. Route autentikasi didaftarkan di routes/auth.php yang di-include dari routes/web.php:
require __DIR__.'/auth.php';
Controller seperti RegisteredUserController dan AuthenticatedSessionController di folder app/Http/Controllers/Auth menangani logika register dan login. View-nya ada di resources/views/auth/, misalnya login.blade.php dan register.blade.php, memakai class Tailwind CSS untuk tampilannya.
Model App\Models\User sudah disiapkan dengan trait HasFactory dan Notifiable, serta kolom name, email, dan password yang otomatis di-hash dengan bcrypt saat register. Kamu tidak perlu menulis logika hashing password sendiri.
Tutorial Laravel Breeze Login Register: Kustomisasi Tampilan
Tampilan bawaan Breeze memang fungsional, tetapi kamu pasti ingin menyesuaikannya dengan identitas aplikasimu. Karena semua view dipublikasikan ke project, kustomisasi semudah mengedit file Blade biasa.
Misalnya, untuk mengubah judul dan teks di halaman login, buka resources/views/auth/login.blade.php dan ubah bagian headingnya. Kamu juga bisa mengganti logo bawaan dengan logomu sendiri di file layout resources/views/layouts/guest.blade.php yang dipakai semua halaman autentikasi.
Untuk mengubah nama aplikasi yang tampil di email verifikasi dan notifikasi, cukup ubah di file .env:
APP_NAME="Aplikasi Kampusku"
Setelah mengubah view atau asset, pastikan Vite dev server (npm run dev) sedang berjalan agar perubahan Tailwind langsung terlihat. Untuk production, jalankan npm run build agar asset dikompilasi menjadi file statis yang optimal.
Proteksi Route dengan Middleware Auth
Fitur login tidak ada gunanya jika halaman penting tetap bisa dibuka tanpa login. Di Laravel, proteksi dilakukan dengan middleware auth. Breeze sudah mencontohkannya pada route dashboard di routes/web.php:
use App\Http\Controllers\ProfileController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});
require __DIR__.'/auth.php';
Pola yang perlu kamu tiru adalah Route::middleware('auth')->group(...): semua route di dalam grup ini otomatis menolak pengunjung yang belum login dan mengarahkannya ke halaman login. Middleware verified menambahkan syarat bahwa email pengguna harus sudah diverifikasi.
Untuk halaman admin atau dosen nantinya, kamu bisa membuat middleware sendiri, misalnya is_admin, dan menerapkannya dengan pola yang sama. Prinsipnya selalu sama: daftarkan middleware, lalu tempelkan ke route atau grup route yang perlu dilindungi.
Menguji Alur Login dan Register
Setelah semua terpasang, uji alur lengkapnya seperti pengguna sungguhan. Daftarkan akun baru lewat halaman register, verifikasi bahwa kamu langsung diarahkan ke dashboard, lalu logout dan login kembali dengan akun yang sama. Coba juga fitur “lupa password” untuk memastikan email reset terkirim (untuk development, atur MAIL_MAILER=log di .env agar isi email tercatat di file log, bukan benar-benar terkirim).
Uji juga sisi keamanannya: buka URL /dashboard di jendela incognito tanpa login. Kamu harus diarahkan ke halaman login. Jika halaman dashboard tetap terbuka, berarti middleware belum terpasang dengan benar.
Menambah Field Kustom pada Form Register
Form register bawaan Breeze hanya meminta nama, email, dan password. Untuk aplikasi nyata, kamu sering butuh field tambahan, misalnya nomor HP atau NIM. Caranya terdiri dari tiga langkah: tambah kolom di database, tampilkan di form, dan simpan lewat controller.
Pertama, buat migrasi untuk menambah kolom:
php artisan make:migration add_no_hp_to_users_table
Lalu edit file migrasi yang dihasilkan:
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->string('no_hp', 15)->nullable()->after('email');
});
}
Jalankan php artisan migrate untuk menerapkan perubahan. Kedua, tambahkan input di resources/views/auth/register.blade.php mengikuti pola input yang sudah ada. Ketiga, buka app/Http/Controllers/Auth/RegisteredUserController.php dan tambahkan validasi serta penyimpanan field barunya:
$request->validate([
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
'no_hp' => ['nullable', 'string', 'max:15'],
'password' => ['required', 'confirmed', Rules\Password::defaults()],
]);
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'no_hp' => $request->no_hp,
'password' => Hash::make($request->password),
]);
Pola ini berlaku untuk field tambahan apa pun. Kuncinya selalu tiga langkah yang sama: migrasi, view, dan controller. Setelah memahami polanya, kamu bisa menambahkan field sebanyak yang dibutuhkan aplikasimu.
Membuat Halaman Terproteksi Sendiri
Sekarang praktikkan middleware auth pada halaman buatanmu sendiri, misalnya halaman “Nilai Saya” untuk mahasiswa. Buat controller dan view-nya:
php artisan make:controller NilaiController
Isi controller dengan method sederhana:
namespace App\Http\Controllers;
class NilaiController extends Controller
{
public function index()
{
$nilai = [
['mk' => 'Pemrograman Dasar', 'nilai' => 'A'],
['mk' => 'Basis Data', 'nilai' => 'AB'],
];
return view('nilai.index', compact('nilai'));
}
}
Lalu daftarkan route-nya di dalam grup middleware auth di routes/web.php:
Route::middleware('auth')->group(function () {
Route::get('/nilai-saya', [NilaiController::class, 'index'])->name('nilai.index');
// ... route profile bawaan Breeze tetap di sini
});
Buat file view resources/views/nilai/index.blade.php yang extends layout Breeze, dan halaman itu kini hanya bisa diakses setelah login. Coba akses /nilai-saya tanpa login untuk membuktikan proteksinya bekerja. Pola inilah fondasi dari semua fitur berbasis peran: halaman admin, dashboard dosen, dan area member semuanya memakai teknik yang sama.
Troubleshooting Instalasi Breeze
Tiga masalah paling sering dialami pemula saat mengikuti tutorial ini. Pertama, composer require laravel/breeze --dev gagal karena versi PHP di bawah 8.2. Laravel 12 mensyaratkan PHP 8.2 atau lebih baru, jadi periksa dengan php -v dan upgrade dulu jika perlu.
Kedua, php artisan migrate error dengan pesan access denied. Ini hampir selalu berarti kredensial database di file .env salah, atau database-nya belum dibuat. Buat dulu database kosongnya (misalnya via phpMyAdmin), lalu sesuaikan DB_DATABASE, DB_USERNAME, dan DB_PASSWORD.
Ketiga, halaman tampil tanpa styling Tailwind (terlihat polos). Penyebabnya adalah Vite dev server belum berjalan. Pastikan npm run dev aktif di terminal terpisah saat development, atau jalankan npm run build agar asset dikompilasi menjadi file statis yang optimal. Jika port 5173 bentrok, tutup proses yang memakai port tersebut lalu jalankan ulang.
Satu tips tambahan: jika kamu mengerjakan tutorial ini di komputer laboratorium kampus yang tidak mengizinkan instalasi Node.js sama sekali, kamu tetap bisa mengikuti bagian backend (instalasi Breeze, migrasi, middleware) karena hanya membutuhkan PHP dan Composer. Bagian tampilan memang butuh npm, tetapi logika autentikasinya tetap bisa dipelajari dan diuji tanpa itu.
Kesimpulan
Kamu sudah menyelesaikan tutorial Laravel Breeze login register ini: menginstal Breeze via Composer, menjalankan migrasi database, memahami struktur controller dan view yang dihasilkan, mengkustomisasi tampilan Blade, dan memproteksi route dengan middleware auth. Dengan fondasi ini, aplikasi apapun yang kamu bangun sudah punya sistem autentikasi yang aman mengikuti standar Laravel.
Seri Laravel di blog ini kini mencakup CRUD, REST API, dan autentikasi. Langkah berikutnya yang alami adalah menggabungkan ketiganya dalam satu project utuh. Mulai dari Tutorial Laravel 12: Membuat CRUD Sederhana dari Nol untuk Pemula jika kamu belum mengikutinya, lalu lanjutkan ke Cara Membuat REST API dengan Laravel untuk mengekspos datamu sebagai API. Dengan Git untuk version control, MySQL untuk database, dan Breeze untuk autentikasi, kamu sudah punya bekal lengkap membangun aplikasi web modern.