Formulário de Login com Laravel, Livewire e RateLimiter

A autenticação é uma parte essencial de qualquer aplicação web. No Laravel, podemos construir um sistema de login dinâmico utilizando Livewire para interações em tempo real, enquanto o RateLimiter protege contra ataques de força bruta. Neste artigo, vamos explorar como combinar essas tecnologias para criar um sistema de login seguro e eficiente.

Por que usar Livewire para login?

O Livewire permite criar interfaces interativas sem a necessidade de JavaScript complexo. Ele torna possível validar entradas, exibir mensagens dinâmicas e atualizar componentes sem recarregar a página. Isso melhora a experiência do usuário e facilita a manutenção do código.

O que é o RateLimiter e por que usá-lo?

O RateLimiter do Laravel é um recurso que limita a quantidade de tentativas de login em um período de tempo. Isso evita que atacantes tentem senhas infinitas vezes (ataque de força bruta), protegendo a aplicação contra acessos não autorizados.

Criando o Formulário de Login com Livewire

1. Instalando e Configurando Livewire

Se ainda não tem o Livewire instalado, rode o seguinte comando:

composer require livewire/livewire

Em seguida, adicione o Livewire ao layout da sua aplicação:

@livewireStyles
@livewireScripts

2. Criando o Componente de Login

Agora, crie um componente Livewire:

php artisan make:livewire LoginComponent

Isso gerará dois arquivos:

app/Http/Livewire/LoginComponent.php
resources/views/livewire/login-component.blade.php

No arquivo LoginComponent.php, implemente a lógica de autenticação:

namespace App\Livewire;

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\Str;
use Illuminate\View\View;
use Livewire\Component;

class LoginComponent extends Component
{
    public ?string $mail = null;

    public ?string $password = null;

    public function rules(): array
    {
        return [
            'mail' => 'required|email',
            'password' => 'required|min:6'
        ];
    }

    public function messages(): array
    {
        return [
            'mail.required' => 'O campo é obrigatório',
            'mail.email' => 'O campo deve ser um e-mail válido',
            'password.required' => 'A senha é obrigatória',
            'password.min' => 'A senha deve ter no mínimo 6 caracteres'
        ];
    }

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

        if (RateLimiter::tooManyAttempts(Str::lower($this->mail), 5)) {
            $this->addError('mail', trans('auth.throttle', [
                'seconds' => RateLimiter::availableIn(Str::lower($this->mail))
            ]));
        }

        try {

            RateLimiter::hit(Str::lower($this->mail));

            $credentials = Auth::attempt([
                'email' => $this->mail,
                'password' => $this->password
            ]);

            if (!$credentials) {
                $this->addError('mail', 'E-mail ou senha inválidos');

                return ;
            }

            return $this->redirect('/dashboard');

        } catch (\Exception $e) {
            $this->addError('mail', $e->getMessage());
        }
    }

    public function render(): View
    {
        return view('livewire.login-component');
    }
}

Aqui, utilizamos o RateLimiter para bloquear o login por 60 segundos após 5 tentativas falhas.

3. Criando a View do Formulário

Agora, edite login-component.blade.php:

<div>
    <div class="flex flex-col items-center justify-center h-screen">
        <h4>Login</h4>
        <form class="max-w-sm mx-auto mt-5" wire:submit="login">
            <div class="mb-5">
                <label for="email" class="block mb-2 text-sm font-medium text-gray-900 ">E-mail</label>
                <input
                    type="email"
                    wire:model="mail"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                    placeholder="name@flowbite.com"
                />

                @error('mail')
                    <span class="text-red-500 text-sm">
                        {{ $message }}
                    </span>
                @enderror
            </div>
            <div class="mb-5">
                <label for="password" class="block mb-2 text-sm font-medium text-gray-900 ">Senha</label>
                <input
                    type="text"
                    id="password"
                    wire:model="password"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                />
                @error('password')
                    <span class="text-red-500 text-sm">
                        {{ $message }}
                    </span>
                @enderror
            </div>
            <button
                type="submit"
                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
            >
                Entrar
            </button>
        </form>
    </div>
</div>

Esse formulário permite interatividade em tempo real e exibe mensagens de erro dinâmicas.

Aprenda a criar um formulário de login seguro utilizando Laravel e Livewire, implementando o RateLimiter para proteger sua aplicação contra ataques de força bruta.

Neste vídeo, você vai ver:

✅ Como criar um formulário de login com Livewire 3

✅ Implementação do RateLimiter para limitar tentativas de login

✅ Mensagens de erro personalizadas para usuários bloqueados

✅ Boas práticas para segurança no login

🔗 Código-Fonte no GitHub

Confira o repositório completo com o código deste projeto no GitHub: [https://github.com/felipeArnold/login-livewire-rate-limiter]

Conclusão

Com Laravel, Livewire e RateLimiter, conseguimos criar um sistema de login seguro e interativo. Essa abordagem melhora a segurança da aplicação e proporciona uma experiência fluida para o usuário. Experimente essa solução no seu projeto e fortaleça a segurança da sua aplicação! 🚀