How To Create Login and Register in Laravel 10 Livewire
In the ever-evolving world of web development, Laravel continues to stand out as a robust and versatile PHP framework. With the release of Laravel 10, the framework has introduced even more powerful features and improvements. Among these, Livewire has emerged as a game-changer for building dynamic and interactive user interfaces without writing a single line of JavaScript.
In this comprehensive guide, we will walk you through the process of creating a secure and user-friendly login and registration system using Laravel 10 and Livewire.
Whether you're a seasoned Laravel developer or just starting out, this tutorial will provide step-by-step instructions and best practices to help you master the art of user authentication.
Run the following command to create a new Laravel project using Composer.
composer create-project --prefer-dist laravel/laravel project-name
Open the .env file located in the root directory of your Laravel project. This file contains environment-specific configuration settings, including database connection information.
Update the following variables to match your database setup.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password
Open your terminal or command prompt and navigate to your Laravel project directory.
Run the following command to install Livewire using Composer.
composer require livewire/livewire
Livewire components are the building blocks for creating dynamic interfaces. Let's create a Livewire component for our registration and login forms. Run the following command to generate a Livewire component.
php artisan make:livewire LoginRegisterIt will generate two files.
app/Http/Livewire/LoginRegister.php
resources/views/livewire/login-register.blade.phpNow, we will update the LoginRegister.php file as below code example.
app/Http/Livewire/LoginRegister.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Hash;
use App\User;
class LoginRegister extends Component
{
public $users, $email, $password, $name;
public $registerForm = false;
public function render()
{
return view('livewire.login-register');
}
private function resetInputFields(){
$this->name = '';
$this->email = '';
$this->password = '';
}
public function login()
{
$validatedDate = $this->validate([
'email' => 'required|email',
'password' => 'required',
]);
if(\Auth::attempt(array('email' => $this->email, 'password' => $this->password))){
session()->flash('message', "You are Login successful.");
}else{
session()->flash('error', 'email and password are wrong.');
}
}
public function register()
{
$this->registerForm = !$this->registerForm;
}
public function registerStore()
{
$validatedDate = $this->validate([
'name' => 'required',
'email' => 'required|email',
'password' => 'required',
]);
$this->password = Hash::make($this->password);
User::create(['name' => $this->name, 'email' => $this->email,'password' => $this->password]);
session()->flash('message', 'Your register successfully Go to the login page.');
$this->resetInputFields();
}
}
Then, we will add a route for login and registering users in the Laravel 10 application. So, open your "routes/web.php" file and add the following routes.
routes/web.php
Route::view('login','livewire.home');
Here, we will create a blade file to show the login form and register form. in this file we will use @livewireStyles, @livewireScripts and @livewire('login-register').
resources/views/livewire/login-register.blade.php
<div class="row">
<div class="col-md-12">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@if (session()->has('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
</div>
</div>
@if($registerForm)
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Name :</label>
<input type="text" wire:model="name" class="form-control">
@error('name') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Email :</label>
<input type="text" wire:model="email" class="form-control">
@error('email') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Password :</label>
<input type="password" wire:model="password" class="form-control">
@error('password') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-12 text-center">
<button class="btn text-white btn-success" wire:click.prevent="registerStore">Register</button>
</div>
<div class="col-md-12">
<a class="text-primary" wire:click.prevent="register"><strong>Login</strong></a>
</div>
</div>
</form>
@else
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Email :</label>
<input type="text" wire:model="email" class="form-control">
@error('email') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Password :</label>
<input type="password" wire:model="password" class="form-control">
@error('password') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-12 text-center">
<button class="btn text-white btn-success" wire:click.prevent="login">Login</button>
</div>
<div class="col-md-12">
Don't have account? <a class="btn btn-primary text-white" wire:click.prevent="register"><strong>Register Here</strong></a>
</div>
</div>
</form>
@endif
</div>
resources/views/livewire/home.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
@livewireStyles
</head>
<body>
<div class="container">
<div class="row mt-5 justify-content-center">
<div class="mt-5 col-md-8">
<div class="card">
<div class="card-header bg-danger text-white"><h5 style="font-size: 23px;">How to create login and register in laravel 10 livewire - Techsolutionstuff</h5></div>
<div class="card-body">
@livewire('login-register')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</script>
</body>
</html>
Now, run the following command.
php artisan serve
By the end of this tutorial, you'll have a fully functional login and registration system that adheres to best security practices, making your Laravel 10 application not only user-friendly but also highly secure.
Whether you're building a personal project or a professional application, this guide will equip you with the knowledge and skills needed to create a seamless user experience. Join us on this journey to becoming a Laravel 10 and Livewire authentication expert and meet your expectations.
Please do not hesitate to reach out to us if you have any questions, suggestions, or feedback. Additionally, you can explore more about Livewire and Laravel 10 individually by visiting our tutorials pages.
Additionally, if you're looking for experienced backend developers to assist with your project, don't hesitate to contact us. Our team at Techsolutionstuff is well-versed in both frontend and backend development, ready to tackle your unique development needs.
You might also like:
- Read Also: Toastr Notification In Laravel 10 Livewire Example
- Read Also: How To Create Livewire Sweetalert In Laravel 10
- Read Also: Laravel 10 Livewire Dependent Dropdown
- Read Also: How To Override Auth Login Method In Laravel 10
