Laravel menyediakan fitur autentikasi bawaan yang bisa kita manfaatkan dan sesuaikan untuk aplikasi e-commerce Anda. Kita akan menggunakan Laravel Breeze karena mendukung Inertia.js secara langsung.

1. Instalasi Laravel Breeze

Install Laravel Breeze:

composer require laravel/breeze --dev

Instalasi dengan Inertia:

php artisan breeze:install vue

Install Vue Form untuk karena halaman login dan register membutuhkan form:

npm install -D @tailwindcss/forms

2. Koneksi database

edit file .env menjadi sebagai berikut:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ecommerce_inertia
DB_USERNAME=root
DB_PASSWORD=

Jalankan migrasi:

php artisan migrate

Jalankan npm

npm install && npm run dev

3. Konfigurasi Routes

Laravel Breeze secara otomatis membuat route untuk autentikasi. Anda bisa memeriksanya di routes/web.php:

<?php

use App\Http\Controllers\ProfileController;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('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';

4. Tampilan Frontend Autentikasi

Setelah instalasi Breeze, beberapa file Vue.js akan tersedia di resources/js/Pages. Contoh:

  • resources/js/Pages/Auth/Login.vue (Halaman login)
  • resources/js/Pages/Auth/Register.vue (Halaman register)
  • resources/js/Pages/Dashboard.vue (Dashboard setelah login)

Anda bisa memodifikasi file ini untuk menyesuaikan desain aplikasi e-commerce Anda.

5. Middleware untuk Autentikasi

Pastikan middleware untuk autentikasi sudah disiapkan di app/Http/Middleware:

Authenticate.php memastikan hanya pengguna yang login bisa mengakses halaman tertentu.

Middleware EnsureEmailIsVerified melindungi route dengan verifikasi email.

Terapkan middleware pada route atau controller yang membutuhkan contoh OrderController nantinya:

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('/orders', [OrderController::class, 'index'])->name('orders.index');
});

6. Testing Autentikasi

Jalankan server Laravel:

php artisan serve

Akses aplikasi di browser (http://localhost:8000) dan klik login atau register.

Buat akun baru dan pastikan Anda dapat login, logout, dan mengakses halaman dashboard.

http://localhost:8000/login

login 

http://localhost:8000/register

register

 

Selamat Mencoba!!!