Este artigo abordará os recursos do Laravel Breeze, comparando-o com outros kits iniciais do Laravel, e guiará você pelo processo de instalação. Além disso, exploraremos os arquivos gerados, personalizaremos o fluxo de registro e ajustaremos a UI (interface do usuário) para atender às necessidades do seu projeto.

O que é Laravel Breeze?

O Laravel Breeze é um pacote de construção de autenticação para o Laravel. Com ele, você pode ter um sistema de login e registro totalmente funcional em minutos. Ele é compatível com Blade, Vue e React e também tem uma versão de API.

Os principais recursos do Laravel Breeze são:

  • Login
  • Registro
  • Redefinição de senha
  • Verificação de e-mail
  • Página de perfil, com edição

Mas quando você deve escolher o Breeze e quando deve usar outros pacotes de autenticação do Laravel?

Existem dois pacotes semelhantes no ecossistema do Laravel, o que pode ser confuso se você for novo nesse espaço.

O primeiro é o Laravel Fortify, um backend de autenticação “headless”, o que o torna ideal para desenvolver sistemas de autenticação personalizados sem uma interface de usuário predefinida.

Escolha o Fortify se você tiver necessidades de interface do usuário muito personalizadas ou se for responsável apenas pelo backend da autenticação.

O outro pacote é o Laravel Jetstream, que oferece um ponto de partida mais avançado para aplicativos Laravel, incluindo recursos como autenticação de dois fatores e gerenciamento de equipe.

Por outro lado, o Laravel Breeze é mais adequado para desenvolvedores que buscam uma framework de autenticação simples, porém personalizável, com suporte para vários frameworks frontend e sobrecarga mínima.

Instalando o Laravel Breeze em um novo projeto Laravel

Para simplificar, suponha que já tenhamos criado um novo projeto Laravel. Se precisar de ajuda, você pode seguir nosso guia para configurar um novo aplicativo Laravel na Kinsta.

Depois disso, precisamos instalar o Laravel Breeze com o seguinte comando:

composer require laravel/breeze --dev

Neste tutorial, utilizaremos o Blade, que é o mecanismo de template padrão do Laravel. Para iniciar o processo de build, execute os seguintes comandos:

php artisan breeze:install blade
 
php artisan migrate
npm install
npm run dev

O Laravel Breeze também tem versões Vue / React / API personalizada; para usá-las, você só precisa colocar um sinalizador no comando.

Para o Vue, execute:

php artisan breeze:install vue

Para React, execute

php artisan breeze:install react

Para execução de API personalizada

php artisan breeze:install api

Após instalar o Laravel Breeze, você notará que vários arquivos foram gerados no diretório do seu projeto. Esses arquivos incluem rotas, controladores e exibições que lidam com autenticação, redefinição de senha e verificação de e-mail. Você pode explorar esses arquivos e personalizá-los para atender aos requisitos do seu aplicativo.

Como personalizar a interface do usuário

O Laravel Breeze usa o TailwindCSS em sua estrutura, e para personalizar a interface, podemos utilizar qualquer classe utilitária do Tailwind.

Você pode personalizar cada parte da interface do usuário editando os arquivos de visualização na pasta resources/views/auth; algumas partes da interface do usuário são organizadas em componentes Blade, que podem ser encontrados na pasta resources/views/components.

Alterando a logo do Laravel para a logo da nossa organização

O Laravel Breeze emprega componentes Blade para organizar códigos que são usados várias vezes. Por exemplo, veja como você pode alterar a logo no arquivo resources/views/components/application-blade.php.

Abra o arquivo e substitua o conteúdo atual pelo seu arquivo svg.

Alterando a cor do botão principal.
Alterando a cor do botão principal.

Abra o arquivo resources/views/components/primary-button.blade.php. Você pode fazer qualquer modificação aqui, como personalizar o botão da sua página de login com a cor da sua marca.

O botão principal foi alterado para a cor da marca.
O botão principal foi alterado para a cor da marca.

Como personalizar o fluxo de registro

A página de registro do Laravel Breeze possui 4 campos predefinidos:

  1. Nome
  2. E-mail
  3. Senha
  4. Confirmação de senha
Campos predefinidos da página de registro.
Campos predefinidos da página de registro.

Para estender os campos que gostaríamos de incluir em nosso formulário de registro, precisamos abrir o arquivo resources/views/auth/register.blade.php.

Continuando com o nosso exemplo, vamos adicionar um campo de telefone logo após o campo de e-mail. Para fazer isso, adicione o seguinte código após o campo de e-mail:

<div class="mt-4">
   <x-input-label for="phone" :value="__('Phone')" />
   <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required autocomplete="phone" />
   <x-input-error :messages="$errors->get('phone')" class="mt-2" />
</div>

O campo de telefone agora está visível no formulário de registro.

Campo de telefone adicionado.
Campo de telefone adicionado.

Modificação do backend para armazenar o novo campo de telefone

Agora precisamos lidar com os novos dados no backend. Isso requer três etapas: primeiro, criar e executar uma nova migração, depois adicionar uma lógica ao controlador para armazenar os dados e, por fim, adicionar phone às propriedades preenchíveis no modelo User.

Crie uma nova migração que adicionará um campo de telefone à nossa tabela users.

php artisan make:migration add_phone_field_to_users_table

Abra o arquivo criado e adicione um campo de string chamado “phone”:

Schema::table('users', function (Blueprint $table) {
   $table->string('phone')->nullable();
});

Depois disso, execute a migração:

php artisan migrate

Para armazenar o campo de telefone, precisamos modificar o RegisteredUserController.php, no método store, faça essas modificações:

$request->validate([
   'name' => ['required', 'string', 'max:255'],
   'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
   ‘phone’ => [‘required’, ‘string’, ‘max:255’],
   'password' => ['required', 'confirmed', RulesPassword::defaults()],
]);

$user = User::create([
   'name' => $request->name,
   'email' => $request->email,
   ‘phone’ => $request->phone,
   'password' => Hash::make($request->password),
]);

Não se esqueça de adicionar o campo phone às propriedades preenchíveis no modelo User.

protected $fillable = [
   'name',
   'email',
   'phone',
   'password',
];

É isso, agora temos o formulário de registro modificado!

Como ativar a verificação de e-mail

A verificação de e-mail é o processo de verificação e autenticação dos e-mails que os usuários informaram no formulário de registro.

Para ativar esse recurso, precisamos implementar a interface MustVerifyEmail em nosso modelo de usuário.

use IlluminateContractsAuthMustVerifyEmail;
…

class User extends Authenticatable implements MustVerifyEmail
{
…
}

Depois disso, um e-mail será enviado quando um usuário se registrar com um link para verificar seu e-mail.

No entanto, ainda precisamos adicionar um middleware às nossas rotas em que queremos restringir o acesso a usuários não verificados.

Criaremos um novo caminho chamada “only-verified” e adicionaremos os middlewares “auth” e “verified”. O middleware auth impede o acesso a convidados e o middleware verified confere se o usuário verificou seu e-mail.

Aqui está um exemplo:

Route::get('/only-verified', function () {
   return view('only-verified');
})->middleware(['auth', 'verified']);

Resumo

O Laravel Breeze é uma ótima ferramenta para você configurar rapidamente um sistema de autenticação para o seu projeto Laravel.

Com seu cenário simples, mas personalizável, você pode se concentrar na construção do seu aplicativo sem se preocupar com o processo de autenticação.

Se você estiver procurando um lugar para hospedar seu novo aplicativo Laravel, confira nossa solução de hospedagem Laravel com recursos avançados que tornam a implantação e o gerenciamento de aplicativos rápidos e fáceis.