Login Form in Bootstrap Modal using Livewire

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 the user clicks on any HTML input. Such as the button showed 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 the 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 the credentials are correct. If yes we log in the user and refresh the existing page. If authentication fails, we show the error message to the user inside the modal itself.