Login Form in Bootstrap Modal using Livewire

Bootstrap 5 Livewire

Demo

This is a pro component. Get Livewiredemos pro access to view / download the component code.

Component Class


<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\ValidationException;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginModal extends Component
{

    public string $username = '';
    public string $password = '';
    public string $currentPath = '';
    
    public function render()
    {
        return view('livewire.login-modal');
    }

    public function mount(){
        $this->currentPath = request()->path();
    }

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

    public function login(Request $request)
    {
  
        $this->validate();

        if ($this->attemptLogin()) {
            //Login Success
            $request->session()->regenerate();
            return redirect()->intended($this->currentPath);
        }

    
        //Login Failure
        session()->flash('error', 'These credentials do not match our records.');
        return;

    }


    /**
     * Attempt to log the user into the application.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return bool
     */
    protected function attemptLogin()
    {
        return $this->guard()->attempt(
            ['email' => $this->username, 'password' => $this->password]
        );
    }

    /**
     * Get the guard to be used during authentication.
     *
     * @return \Illuminate\Contracts\Auth\StatefulGuard
     */
    protected function guard()
    {
        return Auth::guard();
    }

}

Component View File



<div>
    <div class="modal" id="loginModal" tabindex="-1" wire:key="login-model" wire:ignore.self>
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Login</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form wire:submit.prevent="login">
            @guest
            <div class="modal-body">
                @if (session()->has('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                @endif  
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label fw-bold">Email address</label>
                    <input type="text" class="form-control @error('username') is-invalid @enderror" id="exampleFormControlInput1" name="username" placeholder="Your Email" wire:model.lazy="username">
                    @error('username')
                        <div id="invalidEmailFeedback" class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label fw-bold">Password</label>
                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" placeholder="Your password" wire:model.lazy="password">
                    @error('password')
                        <div id="invalidEmailFeedback" class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
            @else
            <div class="modal-body">
                <div class="alert alert-success">
                    You are already logged into the application.
                </div>
            </div>
            @endguest
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                @guest
                    <button type="submit" class="btn btn-primary text-white">Login</button>
                @else
                    <button class="btn bg-gray-200" onclick="event.preventDefault();
                     document.getElementById('logout-form').submit();">
                    Log Out
                    </button>

                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                            @csrf
                    </form>
                @endguest
            </div>
            </form>
            </div>
        </div>
        </div>
    </div>

Usage

Include the livewire component in your layout file so that the modal can be invoked anywhere in your application.


@livewire('login-modal')

Bootstrap modal can be invoked using HTML tags or using javascript.

To invoke the modal when user clicks on any HTML input. Such as the button shown the demo


    <button class="btn bg-purple fw-bold text-white btn-lg" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>

You can include the data-bs-toggle and data-bs-target attributes in your HTML tag.

Documentation

We have utilized the Bootstrap's Modal to design the login modal.

At the backend, when user clicks on the Login button. We call the login method of the livewire component.

We utilize the Auth::attempt() method provided by Laravel to check if credentials are correct. If yes we login the user and refresh the existing page. If authentication fails, we show the error message to the user inside the modal itself.

Download Code

Download the Component class, view file and other required files

This is a pro component. Get Livewiredemos pro access to view / download the component code.