🚀Laravel Breeze (chuyên dùng Authentication)

Dưới đây là bộ mã nguồn mẫu form đăng nhập cho Laravel 11 (sử dụng Breeze) kèm tối ưu UX & bảo mật, bạn có thể lấy về dùng ngay hoặc tùy chỉnh cho dự án của mình.

---

📌 1. Cài Laravel 11 & Breeze (Auth scaffold)

composer create-project laravel/laravel:^11.0 myproject
cd myproject

composer require laravel/breeze --dev
php artisan breeze:install

npm install
npm run dev
php artisan migrate

➡️ Laravel sẽ tạo sẵn hệ thống đăng nhập, đăng ký, reset password,…

Error log:

host k hỗ trợ: composer - NodeJS - khóa tùm lum

Giải pháp: cài all in local trước - upload lên host chỉ chạy dòng lệnh cuối cùng migrate thôi...

Bước 01: cài Laragon

Bước 02: chạy trong cmd riêng của Laragon mới được

Bước 03: chạy breeze install - chọn blade - PHPunit (gõ 1).

---

🧠 2. Form Login (Laravel 11)

📍 File: resources/views/auth/login.blade.php

Chú ý: file layout này cũng phải tùy version của Breeze mới chạy được.

link chạy : site/thumucbreeze/public/login

<x-guest-layout>

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

        <!-- Email -->
        <div>
            <x-input-label for="email" :value="__('Email')" />

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

            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />

            <x-text-input id="password"
                          class="block mt-1 w-full"
                          type="password"
                          name="password"
                          required
                          autocomplete="current-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Remember Me -->
        <div class="block mt-4">
            <label for="remember_me" class="inline-flex items-center">
                <input id="remember_me"
                       type="checkbox"
                       class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
                       name="remember">

                <span class="ms-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 your password?') }}
                </a>
            @endif

            <x-primary-button class="ms-3">
                {{ __('Log in') }}
            </x-primary-button>

        </div>
    </form>

</x-guest-layout>

Tạo mới user admin để login thử vào dashboard

thêm cuối file routes/web.php:

use App\Models\User;
use Illuminate\Support\Facades\Hash;

Route::get('/make-user', function () {

    User::create([
        'name' => 'admin',
        'email' => 'admin@gmail.com',
        'password' => Hash::make('xxxx')
    ]);

    return 'user created';

});

---

📌 Bước 2

Mở:

http://lophocvitinh.vn/trolybep/public/make-user

nếu hiện:

user created

=> thành công.

---

📌 Bước 3

Login:

🔢	📧 Email	🔑 Password
1️⃣	admin@gmail.com	xxxx

---

🚀 Sau khi tạo xong

XÓA route đó ngay 😄

xóa:

Route::get('/make-user'

để tránh ai đó tạo user admin tiếp.

---

📌 Đây là kiểu workaround rất phổ biến trên shared hosting khóa shell.

Laravel chạy web OK nhưng artisan bị cripple 😄

Error logs:

css bị sai do Breeze dùng cơ chế Tailwind phải build rồi nó mới detect class được

→ xóa public/hot trên host thật để nó k load localhost.

Xem bài viết build assets cho Breeze ở đây.

---

🚀 3. Tối ưu bảo mật + UX

✅ 3.1 Mã hóa rate‑limit login

✍️ Thêm vào LoginController:

use Illuminate\Http\Request;
use Illuminate\Validation\ValidationException;
use Illuminate\Support\Facades\RateLimiter;

protected function ensureIsNotRateLimited(Request $request)
{
    $key = Str::lower($request->input('email')).'|'.$request->ip();

    if (! RateLimiter::tooManyAttempts($key, 5)) {
        return;
    }

    throw ValidationException::withMessages([
        'email' => __('Bạn đã thử quá số lần cho phép. Vui lòng thử lại sau.'),
    ]);
}

public function authenticate(Request $request)
{
    $this->ensureIsNotRateLimited($request);

    // login logic...
}

---

✅ 3.2 Thêm Captcha (Google reCAPTCHA)

1. Cài package:

composer require anhskohbo/no-captcha

2. .env:

NOCAPTCHA_SECRET=...
NOCAPTCHA_SITEKEY=...

3. View:

{!! NoCaptcha::renderJs() !!}
{!! NoCaptcha::display() !!}

4. Validate:

$request->validate([
    'g-recaptcha-response' => 'required|captcha',
]);

---

✅ 3.3 UI – Form sạch & responsive (Tailwind)

Laravel Breeze đã dùng Tailwind, bạn có thể sửa classes:

<x-input class="transition border-indigo-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" />

---

🧩 4. Đăng nhập API (token)

Nếu bạn muốn login API (SPA/Mobile):

// api.php
Route::post('/login', function(Request $req) {
    $user = User::where('email',$req->email)->first();
    if (! $user || ! Hash::check($req->password, $user->password)) {
        return response()->json(['message'=>'Invalid'], 401);
    }
    return $user->createToken('mobile-token')->plainTextToken;
});

---

📦 5. Gói Auth thay thế (Fortify / Jetstream)

Nếu muốn nhiều tính năng hơn:
✅ Fortify → backend only
✅ Jetstream → includes Teams, 2FA, API Tokens

composer require laravel/jetstream
php artisan jetstream:install livewire

---

Nếu bạn muốn mình tối ưu UI theo design cụ thể (Figma/Sketch) hoặc convert thành SPA (Vue/React) — nói mình biết nhé!

✨ made by AI