Аутентификация и авторизация — это не для того, чтобы сделать «красивую форму входа». Это чтобы твои пользователи реально могли зайти, а твой код не улетал в проде в дым. Livewire тут спасает от скучной верстки и миллионного кол-ва JS-кода.

Шаг 1: Установка Livewire

Если Livewire ещё нет — ставь, не ной:

composer require livewire/livewire

Всё, готово.

Шаг 2: Laravel Breeze или Jetstream

Не хочешь париться с ручной аутентификацией — бери готовые решения.

Для Breeze:

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

Для Jetstream:

composer require laravel/jetstream
php artisan jetstream:install livewire
npm install
npm run dev

Выбирай что нравится, но суть одна: готовый каркас для входа и регистрации.

Шаг 3: Создаём компонент Livewire

Чтобы Livewire оживил вход, делаем компонент:

php artisan make:livewire login

Laravel создаст:

  • app/Http/Livewire/Login.php — логика
  • resources/views/livewire/login.blade.php — вьюха

Шаг 4: Реализация логики

В Login.php пишем минимум, чтобы реально работало:

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;

class Login extends Component
{
    public $email;
    public $password;
    public $remember;

    protected $rules = [
        'email' => 'required|email',
        'password' => 'required',
    ];

    public function authenticate()
    {
        $this->validate();

        if (Auth::attempt(['email' => $this->email, 'password' => $this->password], $this->remember)) {
            return redirect()->intended('dashboard');
        }

        $this->addError('email', trans('auth.failed'));
    }

    public function render()
    {
        return view('livewire.login');
    }
}

Без лишней магии, без «инноваций». Проверяем почту и пароль — и либо идём в дашборд, либо показываем, что сломался вход.

Шаг 5: Вьюха для входа

Простая форма без дизайнерских изысков:

<div>
    <form wire:submit.prevent="authenticate">
        <input type="email" wire:model="email" placeholder="Email">
        <input type="password" wire:model="password" placeholder="Password">
        <input type="checkbox" wire:model="remember"> Remember Me
        <button type="submit">Login</button>
    </form>
</div>

Без лишних JS-игрушек — Livewire справится сам.

Шаг 6: Используем компонент

В нужном Blade-шаблоне вставляем:

@livewire('login')

И всё, форма на месте, логика работает.

Шаг 7: Проверка

Запускаешь проект, заходишь на страницу входа и пробуешь валидные данные. Если не работает — разбирайся. Серьёзно, нет смысла кормить себя иллюзиями.

Заключение

Livewire плюс Breeze или Jetstream — это не «магия», это способ сделать вход и права пользователей без 100500 багов.