Skip to content

10 Auth, Breeze y Jetstream

1738509647151

Introducción

Enlace tutorial

Hemos comenzado la autenticación mediante API, el concepto de Middleware para proteger nuestras rutas.

Ahora vamos a incluir las vistas, con un formato de trabajo similar, añadiendo extensión para respaldar las vistas de nuestro proyecto.

  • La autenticación es un elemento común en cualquier aplicación, por lo que Laravel ya nos ofrecen dos paquetes para gestionarla como son:
  • Larave Breeze
  • Laravel Jetstream
  • Ambos nos permite la autenticación, la primera es mínima con construcciones con Blade, React o Vue.
  • Jetstream nos ofrece también la posibilidad de conectar con vistas Blade y con Inertia para, desde allí conectar con
    • Livewire
    • VUE, React ... (Front)
  • Con esto, le aplicaremos reactividad a nuestras vistas, un elemento ya propio de front modernos.

Laravel 11.

Como ya hemos visto, desde paquete instalado de Laravel 11, cuando ejecutabamos mediante el comando +

Laravel new ...

Nos ofrecia una serie de opciones como eran los starter kits y alguna configuración extra que ahora si va a cobrar sentido desde este punto.

Laravel 11

Esta clase va a diferir del tutorial de Youtube, que bien puede servir de base teórica para lo que se va a implementar

Breeze

Vamos a generar ahora un nuevo proyecto con Laravel new en lugar de con composer, para que nos ayude en la configuración inicial.

Es importante tenerlo en cuenta desde el inicio, si se incluye a posteriore hay que tener en cuenta que algunas configuraciones como las rutas puede ser borrada por el scafolding de su ejecución (la creación de carpetas)

Cuidado con la configuración de los starter kit

Como se ha comentado, se podría sobreescribir archivos y carpetas y es por ello que conviene tenerlo en cuenta y configurarlo desde el principio.

Laravel new authbreeze

Generamos el proyecto con la siguiente configuración_:

  • laravel new authbreeze
  • Seleccionamos breeze
  • Blade
  • Dark mode opcional
  • 1 - PhP Unit
  • SQLITE
  • Yes - running migrations

1738510322229

1738510375263

Y comienza a instalar muchas mas carpetas, paquetes y archivos que como hemos hecho hasta ahora.

1738510465132

Vemos que ahora si instala servicios de Frontal en su escafolding y cómo nos sugiere lo siguiente para compilar.

1738510534432

Next Steps (comandos)

Vemos como al completar el scaffolind nos sugiere la instalción de los siguientes comandos para la parte frontal

➜ cd authbreeze
➜ npm install && npm run build
➜ coma

Next Steps

1738510580407

Bootcamp

1738510605696

Estructura del proyecto

Si inicias el proyecto Back y haces un repaso de sus carpetas, verás ya partes incluidas como pueden ser:

  • Diversos controladores Auth
  • Un archivo de enrutado para auth.php
  • Diferentes carpetas de vistas como el dashboard, el auth, componentes y el perfil, et
  • Otros archivos que iremos viendo poco a poco

1738510953713

Registro y Dashboard inicial

Si probamos a registrarnos veremos nuestro dashboard con opciones típicas de nuestro perfil como actualizar datos, eliminar cuenta...

1738511000965

1738511033326

Config / auth.php

Es bueno conocer este archivo ya que si bien no lo necesitaremos de primeras, podría darse el caso de necesitar adaptar nuestro proyecto para

  • convención de nombres incorrecta..
  • otro tipo de autenticación ...

  • elementos por defecto para el control de la autenticación como

  • ``` / |-------------------------------------------------------------------------- | Authentication Defaults |-------------------------------------------------------------------------- | | This option defines the default authentication "guard" and password | reset "broker" for your application. You may change these values | as required, but they're a perfect start for most applications. | /

    'defaults' => [
    'guard' => env('AUTH_GUARD', 'web'),
    'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
],

    `` - Podemos observar que, por defecto, vamos a trabajar con valores de sesión provista por los usuarios. - Podemos necesitar cambiar esta configuración - También podemos necesitar irnos al archivoconfig/session` para administrar cómo se guardan los valores de sesion del usuario, en caso que necesitemos guardarlos en redis, a través de cookies, en path, file, en base de datos. Ciclo de vida ..

1738511795865

  • session.php: 1738511912174

Lo que quiero transmitir aquí es que vamos a trabajar con múltiples configuraciones precargadas de partida pero que, para un trabajo profesional, se necesitará saber dónde encontrarlas en caso de necesidad para su modificación, especificaciones...

Variables de entorno

Dicho todo lo anterior, cabe destacar aquí que lo más interesante no es modificar los archivos de configuración, si no hacerlo a través de las variables de entorno (.env)

Por ejemplo:

- Si quiero modificar dónde se guarda la sesión para que no sea en file
  • Anoto el nombre de la variable, en este caso SESSION_DRIVER (archivo config/session.php)
  • 1738512214119
  • Y lo incluyo dentro del .env
  • 1738512242049
  • De esta forma dejamos el archivo de configuración intacto ymodificamos sólo las variables de entorno para modificar el comportamiento.
  • Igual con la variable SESSION_LIFETIME para el tiempo de vida, por ejemplo
  • Esto es igual para API como en monolito/vistas

Similitudes con API

Si investigamos el código, vemos como breeze se apoya igualmente en la clase Auth para hacer la autenticación y para

Parte de código de la ruta web.php

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

Hasta aquí un overview de características general pero muy importante.

Características Breeze

Breeze es el paquete más básico que realiza muchas acciones para autenticación.

Sólo tendremos que preocuparnos de configurar el estilo estético.

Breeze:install vue/react

Hemos hecho la instación con un starter kit, pero podríamos haber instalado Breeze desde cero a través de su comando breeze:install, lo cual carga las vistas en Blade por defecto, algo que puedo modificar si añadimos.

  • php artisan breeze:install vue
  • php artisan breeze:install react

Pero, como hemos visto, hubiera sido más fácil crearlo conel starter kit de react.

Más adelante lo veremos.

Frontal React/VUE/Blade... SSR

Ahora, hay que tener si usamos INERTIA en cuenta varias cosas

Cuando lo veamos, nos interesará hacer que las vistas de autenticación COINCIDAN con la tecnología del resto de vistas (Blade, VUE, React..)

  • En nuestro sistema, tenemos que conocer dónde queremos que se renderize nuestro código.
  • Estás tecnologías reactivas van inyectando el contenido dentro del frontal a través de JS.
  • Esto hace que el código HTML no sea renderizado previamente dentro del backen
  • Se hace en el frontal
  • Esto tiene muchas ventajas PERO se pierde el posicionamiento SEO,
  • Si este punto es importante, necesitamos especificar el SERVER SIDE RENDERING.
  • Perdemos velocidad, ganamos posicionamiento.
  • Para especificar esto, hay que marcar la opción --ssr, por ehemplo:
  • php artisan breeze:install react --ssr
  • Igual hay opciones para NEXT con comando api...

Componentes: Formato de etiqueta

Por último, comentar que el formato de inserción de componentes lo hace mediante etiquetas en lugar de la @ como veíamos en vistas Blade:

1738513908509

Ubicación de CSS o JavaScriptBreeze

Hasta ahora, la ubicación del CSS o del Javascript ha ido en la carpeta public (o dentro de algunas vistas).

Ahora Laravel nos ofrece poder ubicarlos dentro de la carpeta resources

1738514221191

npm install

Para poder compilarlos, he de hacer ahora el npm install para instalar las dependencias.

1738514307253

npm run dev

Genera todo listo para funcionar y que las vistas se vean correcta si hubieramos incluido contenido en las carpetas anteriores

1738514367288

Ejecuto el servidor:

php artisan serve

Nuevo modelo y controlador

Vamos a crear una nueva ruta protegida con el middleware auth dentro del grupo .

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
//la incluimos en el grupo:
    Route::get('/example', [ExampleController::class, 'index'])->name('example');
});

Incluimos función index

dentro del controlador ExampleController, como siempre hemos hecho, retornando a la vista example:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ExampleController extends Controller
{
    //
    public function index()
    {
        return view('example');
    }
}

Vista example:

Si me gusta la estructura y para seguir lo mismo,

  • COPIO y pego la vista dashboard.
  • La pego en el archivo example.blade.php
  • En el contenido le indico Hello World o lo que yo quiera:

1738515050369

Si ahora me voy al a ruta /example:

1738515122732

Podría añadir o quitar los componentes que necesite.

Tailwind

Blade viene estilado con Tailwind /(Framework CSS) , por si se quiere modificar algo del estilo

Podemos modificar el layout de navigation para añadir o quitar elementos del menú:

1738515315216

Duplico el DIV adecuado para poder añadir el nuestro de example (línea 13 aprox)

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

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

1738515592074

Jetstram

CONCLUSIONES

Referencias

1738509598936

1738509612904