Laravel Authentication with MaryUI

Laravel makes Authentication really easy work with and if you're looking to quickly setup auth on maryui/livewire, this is the article for you.

Step 1: Create a laravel project if you haven't

composer create-project laravel/laravel auth_demo

Step 2: Setup Livewire and maryui
I prefer using bun and not having volt

composer require robsontenorio/mary
php artisan mary:install

Step 3: Create new components to work with and setup their routes

php artisan make:livewire Dashboard

in routes/web.php

<?php

use App\Livewire\Welcome;
use Illuminate\Support\Facades\Route;
use App\Livewire\Dashboard;

Route::get('/', Welcome::class);

Route::get('/dashboard', Dashboard::class)->name('dashboard');

have simple forms in the frontend - resources/views/livewire/dashboard.blade.php

<div>
    <x-button wire:click="openRegisterModal" label="Register"/>
    <x-button wire:click="openLoginModal" label="Login" />

    <!-- Register Modal -->
    <x-modal wire:model="registerModal">
        <x-form wire:submit="registerUser">
            <x-input wire:model="name" label="Name" />
            <x-input wire:model="email" label="Email" type="email" />
            <x-input wire:model="password" label="Password" type="password" />
            <x-slot:actions>
                <x-button type="submit">Register</x-button>
            </x-slot:actions>
        </x-form>
    </x-modal>

    <!-- Login Modal -->
    <x-modal wire:model="loginModal">
        <x-form wire:submit="loginUser">
            <x-input wire:model="email" label="Email" type="email" />
            <x-input wire:model="password" label="Password" type="password" />
            <x-slot:actions>
                <x-button type="submit">Login</x-button>
            </x-slot:actions>
        </x-form>
    </x-modal>

</div>

Have the corresponding backend php code in App/Livewire/Dashboard.php

<?php

namespace App\Livewire;

use Illuminate\Support\Collection;
use Livewire\Component;
use Mary\Traits\Toast;
use Illuminate\Support\Facades\Auth;
use App\Models\User;

class Dashboard extends Component
{
    use Toast;
    public bool $registerModal, $loginModal = false;

    public $name, $email, $password;


    public function openRegisterModal()
    {
        $this->registerModal = true;
    }

    public function openLoginModal()
    {
        $this->loginModal = true;
    }

    public function closeRegisterModal()
    {
        $this->registerModal = false;
    }

    public function closeLoginModal()
    {
        $this->loginModal = false;
    }

    public function registerUser()
    {
        $this->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:8',
        ]);

        User::create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => bcrypt($this->password),
        ]);

        Auth::login(User::where('email', $this->email)->first());

        $this->success('Registration successful! You are now logged in.');

        $this->reset(['name', 'email', 'password']);
        $this->registerModal = false;

    }

    public function loginUser()
    {
        $this->validate([
            'email' => 'required|string|email|max:255',
            'password' => 'required|string|min:8',
        ]);

        if (Auth::attempt(['email' => $this->email, 'password' => $this->password])) {
            $this->success('Login successful!');

            $this->reset(['email', 'password']);
            $this->loginModal = false;
        } else {
            $this->error('Invalid credentials. Please try again.');
        }
    }

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

And that's it!