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!
Top comments (0)