Livewire Login Register in Laravel

In this tutorial you will learn about the Livewire Login Register in Laravel and its application with practical example.

In this Laravel livewire registration and login example I’ll will show you how to create basic registration and login using livewire in laravel. In this tutorial you will learn to create basic login and registration functionality using livewire in laravel. In this step by step tutorial I’ll share basic authentication example of create livewire login and registration in laravel.

Table Of Contents−

Livewire Login Register in Laravel

Step 1: Download Laravel App
Step 2: Add Database Detail

Step 3: Run Migration Command
Step 4: Install Livewire to Create Components
Step 5: Generate Livewire Components for Login & Registration

Step 6: Add Routes
Step 7: Create View File
Step 8: Run Development Server

Step 1: Download Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

 composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Run Migration Command

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Step 4: Install Livewire to Create Components

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Now, create the livewire components for creating a laravel livewire registration and login components using the following command. So Open your cmd and run the following command:

php artisan make:livewire registration-login

1	php artisan make:livewire registration-login

This command will create the following components on the following path:

app/Http/Livewire/RegistrationLogin.php
resources/views/livewire/registration-login.blade.php

1 2	app/Http/Livewire/RegistrationLogin.php resources/views/livewire/registration-login.blade.php

Now, go to app/Http/Livewire folder and open RegistrationLogin.php file. Then add the following code into your RegistrationLogin.php file:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use Hash;
use App\User;
 
class RegistrationLogin extends Component
{
    public $users, $email, $password, $name;
    public $registerForm = false;
 
    public function render()
    {
        return view('livewire.registration-login');
    }
 
    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 have been successfully login.");
        }else{
            session()->flash('error', 'email and password are wrong.');
        }
    }
 
    public function register()
    {
        $this->registerForm = !$this->registerForm;
    }
 
    public function registerStore()
    {
        $v = $this->validate([
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required',
        ]);
 
        $this->password = Hash::make($this->password); 
 
        $data = [ 'name' => $this->name, 
                  'email' => $this->email,
                  'password' => $this->password
                ];
 
        User::create($data);
 
        session()->flash('message', 'You have been successfully registered.');
 
        $this->resetInputFields();
 
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use Hash;

use App\User;

class RegistrationLogin extends Component

{

public $users, $email, $password, $name;

public $registerForm = false;

public function render()

{

return view('livewire.registration-login');

}

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 have been successfully login.");

}else{

session()->flash('error', 'email and password are wrong.');

}

public function register()

{

$this->registerForm = !$this->registerForm;

}

public function registerStore()

{

$v = $this->validate([

'name' => 'required',

'email' => 'required|email',

'password' => 'required',

]);

$this->password = Hash::make($this->password);

$data = [ 'name' => $this->name,

'email' => $this->email,

'password' => $this->password

];

User::create($data);

session()->flash('message', 'You have been successfully registered.');

$this->resetInputFields();

}

After that, Navigate to resources/views/livewire folder and open registration-login.blade.php file. Then add the following code into your registration-login.blade.php file:

<div>
<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>

<div>

@if (session()->has('message'))

</div>

@endif

@if (session()->has('error'))

</div>

@endif

</div>

@if($registerForm)

<form>

@error('name') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

<label>Email :</label>

@error('email') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

<label>Password :</label>

@error('password') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

<button class="btn text-white btn-success" wire:click.prevent="registerStore">Register</button>

</div>

<a class="text-primary" wire:click.prevent="register"><strong>Login</strong></a>

</div>

</form>

@else

<form>

<label>Email :</label>

@error('email') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

<label>Password :</label>

@error('password') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

<button class="btn text-white btn-success" wire:click.prevent="login">Login</button>

</div>

Don't have account? <a class="btn btn-primary text-white" wire:click.prevent="register"><strong>Register Here</strong></a>

</div>

</form>

@endif

</div>

Step 6: Create Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::view('registration-login','livewire.home');

1	Route::view('registration-login','livewire.home');

Step 7: Create View File

In this step, navigate to resources/views/livewire folder and create one blade view files that name home.blade.php file. Then add the following code into your home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Livewire Registration and Login Example</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row mt-5 justify-content-center">
<div class="mt-5 col-md-8">
<div class="card">
<div class="card-header bg-primary text-white"><h3>Laravel Livewire Registration and login Example</h3></div>
<div class="card-body">
@livewire('registration-login')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Livewire Registration and Login Example</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<div class="card-header bg-primary text-white"><h3>Laravel Livewire Registration and login Example</h3></div>

@livewire('registration-login')

</div>

@livewireScripts

</body>

</html>

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now, open the following URL in browser to see the output –

http://localhost:8000/registration-login

1	http://localhost:8000/registration-login

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Step 1: Download Laravel App

Step 2: Add Database Detail

Step 3: Run Migration Command

Step 4: Install Livewire to Create Components

Step 6: Create Route

Step 7: Create View File

Step 8: Run Development Server

Laravel 9 Livewire Pagination with Search

Laravel 9 Livewire Pagination Example

Laravel 9 Check User Login, Online Status & Last Seen

codeigniter 4 image upload example tutorial

Laravel 9 Livewire Charts Example

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Multiple Image Upload

Laravel 9 Livewire Image Upload

Laravel 9 Livewire Submit Form

Laravel 9 Simple CRUD Application Example