5.17 Instalación de Breeze y Jetstream en Laravel

5.17.1 Introducción

En Laravel, existen varias soluciones para gestionar la autenticación, y dos de las más populares son Breeze y Jetstream. Ambos paquetes proporcionan un sistema de autenticación listo para usar, pero con diferencias clave. Breeze es ideal para aplicaciones que necesitan una solución rápida y sencilla, mientras que Jetstream es más robusto y ofrece más funcionalidades, como la gestión de equipos y autenticación avanzada.

¿Qué es Laravel Breeze?

Breeze es una instalación mínima y sencilla de la autenticación en Laravel, que utiliza vistas Blade para la gestión de usuarios, como el registro, el login y la recuperación de contraseñas.

¿Qué es Laravel Jetstream?

Jetstream, en cambio, ofrece un sistema de autenticación más completo, con soporte para Livewire o Inertia.js y más características avanzadas. Además de la autenticación básica, Jetstream incluye funciones como gestión de equipos, verificación de email y otras herramientas útiles para aplicaciones más grandes.

5.17.2 Archivos de configuración `auth` y `session`

Archivos de configuración principales

Laravel gestiona la autenticación y la sesión a través de dos archivos clave de configuración:

config/auth.php: En este archivo se configura todo lo relacionado con la autenticación, como el "guard" por defecto, el proveedor de usuarios, el driver de tokens, etc.
config/session.php: Aquí se gestionan las configuraciones relativas a la sesión, como la duración de la misma, el nombre de la cookie y otros aspectos.

Modificando valores con `.env`

Aunque se puede modificar directamente los valores en estos archivos de configuración, es recomendable hacerlo utilizando las variables de entorno definidas en el archivo .env. Esto permite tener diferentes configuraciones en los entornos de desarrollo, pruebas y producción sin necesidad de tocar los archivos de configuración directamente.

Ejemplo: Cambiar la duración de la sesión

En el archivo .env, podemos agregar una variable de entorno que controle la duración de la sesión:

SESSION_LIFETIME=120

Luego, en el archivo config/session.php, referenciamos esta variable de entorno de la siguiente manera:

'lifetime' => env('SESSION_LIFETIME', 120),

Esto nos permite tener configuraciones dinámicas sin modificar los archivos de configuración directamente.

5.17.3 Instalación de Breeze

Paso 1: Instalar Breeze

Para instalar Breeze, primero asegurémonos de tener Composer instalado. Luego, ejecutamos el siguiente comando para agregar el paquete a nuestro proyecto:

composer require laravel/breeze --dev

Paso 2: Ejecutar la instalación de Breeze

Ahora ejecutamos el comando para instalar Breeze en nuestro proyecto:

php artisan breeze:install

Nos preguntará si queremos instalar vistas Blade, React o Vue. En este caso, seleccionamos Blade. Si quisiéramos trabajar con React o Vue, podemos agregar el parámetro --react o --vue.

Opción -ssr

La opción --ssr es útil cuando estamos trabajando con aplicaciones que necesitan ser renderizadas del lado del servidor para mejorar el SEO. Sin embargo, en este ejemplo, utilizaremos Blade, que ya tiene soporte para SEO sin necesidad de la opción --ssr.

Paso 3: Instalar las dependencias

Una vez instalado Breeze, necesitamos instalar las dependencias de frontend y compilar los archivos CSS y JS con Tailwind CSS.

npm install
npm run dev

5.17.4 Estructura de carpetas y ficheros generados por Breeze

Tras la instalación de Breeze, veremos que se crean las siguientes carpetas y archivos:

resources/views/auth: Contiene las vistas para la autenticación, como login, registro, y restablecimiento de contraseña.
resources/views/layouts: Aquí se encuentra el archivo app.blade.php, que define el layout base para todas las vistas.
app/Http/Controllers/Auth: Esta carpeta contiene los controladores relacionados con la autenticación, como LoginController, RegisterController, y ForgotPasswordController.
routes/web.php: En este archivo se agregan las rutas relacionadas con el proceso de autenticación, como login, register, logout, etc.

Es importante notar que Breeze utiliza Blade como motor de plantillas por defecto. Laravel también soporta otros motores de plantillas como React o Vue, pero para este caso, trabajaremos con Blade.

5.17.5 Visualización del Proyecto por Defecto de Breeze

Paso 1: Ejecutar Migraciones

Antes de poder ver el proyecto, necesitamos ejecutar las migraciones para crear las tablas necesarias en la base de datos:

php artisan migrate

Paso 2: Ver el Proyecto

Una vez que las migraciones se hayan ejecutado, podemos acceder a la aplicación en el navegador. Vamos a abrir las rutas predeterminadas de autenticación que Breeze ha generado.

Accedemos a la ruta del proyecto:

http://localhost:8080/

Debemos ver la página de inicio de Laravel welcome.blade.php. Pero ahora nos deben aparecer unas opciones de autenticación en la parte superior derecha: log in y register. Podemos registrarnos como nuevo usuario o iniciar sesión si ya tenemos una cuenta. Una vez que iniciamos sesión, seremos redirigidos a la página de inicio. dashboard.blade.php que es la vista principal de la aplicación.

Todas las vistas de autenticación están en la carpeta resources/views/auth.

5.17.6 Carpetas `resources`, `public` y `storage`

En Laravel, los recursos estáticos como CSS y JavaScript se gestionan a través de las carpetas resources y public:

resources/css: Aquí se encuentra el archivo app.css, que contiene las reglas de estilo de Tailwind.
resources/js: Aquí están los archivos JavaScript que Laravel Mix compilará. El archivo por defecto es app.js.
public: Los archivos compilados por Laravel Mix estarán disponibles en esta carpeta para ser accesibles públicamente. Por ejemplo, los archivos app.css y app.js estarán en public/css y public/js respectivamente.

Laravel utiliza Tailwind CSS por defecto, lo que significa que todas las vistas y componentes tendrán un estilo moderno y adaptable.

5.17.7 Crear Ruta Protegida con Middleware `auth`

En este paso, crearemos una ruta protegida /example que solo podrá ser accesible si el usuario está autenticado.

Paso 1: Crear la ruta y el controlador

En routes/web.php, agregamos la ruta:

Route::get('/example', [ExampleController::class, 'index'])->middleware('auth');

Paso 2: Crear el controlador `ExampleController`

php artisan make:controller ExampleController

En ExampleController.php, creamos el método index():

public function index()
{
    return view('example.index', ['user' => auth()->user()]);
}

Paso 3: Crear la vista `example/index.blade.php`

Ejemplo de vista example/index.blade.php

Esta vista mostrará el nombre del usuario autenticado.

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Example') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <h2>Welcome {{ $user->name }}</h2>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Añadir enlace al menú de navegación

Para que el usuario pueda acceder a la ruta /example, añadimos un enlace en el menú de navegación. En resources/views/layouts/navigation.blade.php, añadimos lo siguiente:

<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
            <x-nav-link :href="route('example')" :active="request()->routeIs('example')">
                {{ __('Example') }}
            </x-nav-link>
    </div>

Cuando el usuario esté autenticado, podrá acceder a esta ruta y ver su nombre en la página. Si no está autenticado, será redirigido a la página de inicio de sesión o de error.

5.17.8 Instalación de Jetstream

Paso 1: Instalar Jetstream con Livewire

Ahora instalamos Jetstream, que nos proporcionará una solución más robusta de autenticación y gestión de sesiones.

composer require laravel/jetstream
php artisan jetstream:install livewire

Livewire es un framework que facilita la creación de interfaces dinámicas en Laravel sin necesidad de escribir JavaScript.

Paso 2: Ejecutar migraciones y configuración

Después de instalar Jetstream, ejecutamos las migraciones:

php artisan migrate

Esto crea las tablas necesarias para gestionar la autenticación avanzada y otras características como la verificación de correo electrónico.

5.17.9 Conclusiones

En este tema, hemos aprendido a instalar y configurar dos soluciones de autenticación en Laravel: Breeze y Jetstream. Breeze es una opción más ligera y rápida de instalar, mientras que Jetstream proporciona una solución más robusta y avanzada con características como Livewire.

Ahora ya sabemos cómo gestionar la autenticación, la creación de rutas protegidas con middleware auth, y cómo trabajar con vistas en Blade.