Autenticación en Laravel con Breeze

Este artículo profundizará en las características de Laravel Breeze, lo comparará con otros kits de inicio de Laravel y te guiará a través del proceso de instalación. Además, exploraremos los archivos generados, personalizaremos el flujo de registro y ajustaremos la IU (interfaz de usuario) para adaptarla a las necesidades de tu proyecto.

Qué Es Laravel Breeze

Laravel Breeze es un paquete que proporciona una estructura básica de autenticación para Laravel. Con su uso, puedes tener un sistema de inicio de sesión y registro totalmente funcional en cuestión de minutos. Es compatible con Blade, Vue y React y también tiene una versión API.

Las principales características de Laravel Breeze son:

• Inicio de sesión
• Registro
• Restablecer contraseña
• Verificación del correo electrónico
• Página de perfil, con edición

Una pregunta frecuente puede ser cuándo elegir Breeze y cuándo utilizar otros paquetes de autenticación de Laravel.

Hay dos paquetes similares en el ecosistema Laravel, lo que puede resultar confuso si eres nuevo en este espacio.

El primero es Laravel Fortify, que es un backend de autenticación headless, por lo que es ideal para construir sistemas de autenticación personalizados sin una interfaz de usuario pre-construida.

Elige Fortify si tienes necesidades de interfaz de usuario muy personalizadas o si sólo eres responsable del backend de la autenticación.

El otro paquete es Laravel Jetstream, que ofrece un punto de partida más avanzado para las aplicaciones Laravel, incluyendo funciones como la autenticación de dos factores y la gestión de equipos.

En cambio, Laravel Breeze es ideal para desarrolladores que buscan una estructura de autenticación sencilla pero personalizable, compatible con varios frameworks de frontend y con una sobrecarga mínima.

Instalación de Laravel Breeze en un Nuevo Proyecto Laravel

Para hacerlo sencillo, supongamos que ya hemos creado un nuevo proyecto Laravel, si necesitas ayuda con ello puedes seguir nuestra guía para configurar una nueva aplicación Laravel en Kinsta.

Después de eso, necesitamos instalar Laravel Breeze con el siguiente comando:

composer require laravel/breeze --dev

En este tutorial, utilizaremos Blade que es el motor de plantillas por defecto de Laravel. Para iniciar la generación de la estructura básica, ejecuta estos comandos:

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

Laravel Breeze también tiene versiones Vue / React / API personalizadas, para usarlas sólo tienes que poner una bandera en el comando.

Para Vue ejecuta:

php artisan breeze:install vue

Para React ejecuta

php artisan breeze:install react

Para API personalizadas

php artisan breeze:install api

Tras instalar Laravel Breeze, observarás que se han generado varios archivos en el directorio de tu proyecto. Estos archivos incluyen rutas, controladores y vistas que gestionan la autenticación, el restablecimiento de la contraseña y la verificación del correo electrónico. Puedes explorar estos archivos y personalizarlos para adaptarlos a los requisitos de tu aplicación.

Cómo Personalizar la Interfaz de Usuario

Laravel Breeze utiliza TailwindCSS en segundo plano, para personalizar la interfaz de usuario podemos utilizar cualquier clase de utilidad Tailwind.

Puedes personalizar cada parte de la interfaz de usuario editando los archivos de vista en la carpeta resources/views/auth; parte de la interfaz de usuario está organizada en componentes Blade, que puedes encontrar en la carpeta resources/views/components.

Cambiar el Logotipo de Laravel por el Logotipo de Nuestra Organización

Laravel Breeze utiliza componentes Blade para organizar los códigos utilizados varias veces. Así, por ejemplo, puedes cambiar el logotipo en el archivo resources/views/components/application-blade.php.

Abre el archivo y sustituye el contenido actual por tu archivo svg.

Abre el archivo resources/views/components/primary-button.blade.php. Aquí puedes hacer cualquier modificación, como personalizar el botón de tu página de inicio de sesión con el color de tu marca.

Cómo Personalizar el Flujo de Registro

La página de registro de Laravel Breeze viene con 4 campos predefinidos:

1. Nombre
2. Correo electrónico
3. Contraseña
4. Confirmación de contraseña

Para ampliar los campos que queremos que incluya nuestro formulario de inscripción, tenemos que abrir el archivo resources/views/auth/register.blade.php.

Para continuar con nuestro ejemplo, crearemos un campo de teléfono después del campo de correo electrónico. Para ello, añade el siguiente código después del campo de correo electrónico:

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

Ahora el campo de teléfono es visible en el formulario de inscripción.

Modificación del Backend para Almacenar el Nuevo Campo de Teléfono

Ahora necesitamos manejar los nuevos datos en el backend. Esto requiere tres pasos: primero, crear y ejecutar una nueva migración, después añadir lógica al controlador para almacenar los datos y, por último, añadir phone a las propiedades rellenables del modelo User.

Crea una nueva migración que añada un campo teléfono a nuestra tabla users.

php artisan make:migration add_phone_field_to_users_table

Abre el archivo creado y añade un campo de cadena llamado «teléfono»:

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

Después ejecuta la migración:

php artisan migrate

Para almacenar el campo teléfono necesitamos modificar el RegisteredUserController.php, en el método store haz estas modificaciones:

$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),
]);

No olvides añadir el campo phone a las propiedades rellenables del modelo Usuario.

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

Eso es todo, ¡ya tenemos el formulario de registro modificado!

Cómo Activar la Verificación del Correo Electrónico

La verificación del correo electrónico es el proceso de comprobación y autenticación de los correos electrónicos que los usuarios han facilitado en el formulario de registro.

Para activar esta función necesitamos implementar la interfaz MustVerifyEmail en nuestro modelo de Usuario.

use IlluminateContractsAuthMustVerifyEmail;
…

class User extends Authenticatable implements MustVerifyEmail
{
…
}

Después, se enviará un correo electrónico cuando un usuario se registre con un enlace para verificar su correo electrónico.

Sin embargo, todavía tenemos que añadir un middleware a nuestras rutas en las que queremos restringir el acceso a los usuarios no verificados.

Crearemos una nueva ruta llamada ‘only-verified’ y añadiremos los middleware ‘auth’ y ‘verified’. El middleware «auth» impide el acceso a los invitados y el middleware «verified» comprueba si el usuario ha verificado su correo electrónico.

Aquí tienes un ejemplo:

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

Resumen

Laravel Breeze es una gran herramienta para configurar rápidamente un sistema de autenticación para tu proyecto Laravel.

Con su estructura básica sencilla pero personalizable, puedes concentrarte en construir tu aplicación sin preocuparte por el proceso de autenticación.

Si buscas un lugar donde alojar tu nueva aplicación Laravel, echa un vistazo a nuestra solución de alojamiento Laravel con sus potentes funciones que hacen que el despliegue y la gestión de la aplicación sean rápidos y sencillos.