Primeros pasos con Laravel Breeze - Simple sistema de autenticación

Laravel Breeze lo definen en la documentación oficial como:

"Laravel Breeze es una implementación mínima y simple de todas las funciones de autenticación de Laravel, incluido el inicio de sesión, el registro, el restablecimiento de contraseña, la verificación de correo electrónico y la confirmación de contraseña. La capa de vista predeterminada de Laravel Breeze se compone de vistas Blade simples diseñadas con Tailwind CSS."

Y en pocas palabras nos ofrece dos configuraciones a nivel del proyecto:

1. Instalar y configurar Tailwind.css y Alpine.js.
2. Instalar y configurar un sencillo esquema de autenticación, registrarse, recuperar la contraseña y middleware para el control de acceso.

Importante notar que, no es el objetivo del libro aprender Tailwind.css o Alpine.js, por lo tanto, se da por hecho que el lector tiene ciertos conocimientos sobre estos; se intentará tener el uso a estas tecnologías de manera sencilla, pero, si te pierdes perdido en algún punto, como recomendación general, puedes pausar en capítulo y estudiar un poco estas tecnologías; en mi canal en Youtube encontrarás introducciones a estas tecnologías.

La página del paquete que vamos a instalar está en:

https://laravel.com/docs/master/starter-kits

Para poder instalarlo:

$ composer require laravel/breeze --dev

Y ejecutamos

$ php artisan breeze:install

Preguntará cual stack queremos emplear; si tienes experiencia, puede seleccionar cualquiera de las tecnologías como Vue o react:

  Which Breeze stack would you like to install?
  Blade with Alpine ........................................ blade  
  Livewire (Volt Class API) with Alpine ........................... livewire  
  Livewire (Volt Functional API) with Alpine .................................... livewire-functional  
  React with Inertia ......................................... react  
  Vue with Inertia ................................................. vue  
  API only .................................................. api

Pero, para iniciar de a poco, se recomienda que emplees la opción de "blade":

$ blade

Puedes habilitar el modo oscuro:

Would you like to install dark mode support? 
   (yes/no) [no]

Indicando "yes":

$ yes

Entre otras opciones, como las pruebas unitarias, que no serían necesarias:

Would you prefer Pest tests instead of PHPUnit?                          
   (yes/no) [no]

Indicando "no":

$ no

Y esperas hasta que termine el proceso:

INFO  Installing and building Node dependencies.

Si ves algún error como el siguiente:

failed to load config from C:\laragon\www\testlara11\vite.config.js

error when starting dev server:

Error: Cannot find module 'node:path'
Require stack:
- C:\laragon\www\testlara11\node_modules\vite\dist\node-cjs\publicUtils.cjs
- C:\laragon\www\testlara11\node_modules\vite\index.cjs
- C:\laragon\www\testlara11\vite.config.js

Significa que tienes una versión de Node muy antigua; puedes conocer tu versión de Node con:

$ node -v

Si vez una versión similar o inferior a esta:

v14.16.1

En el libro, estamos usando:

$ node -v
v18.8.0

Debes de actualizar tu versión; luego puedes ejecutar:

$ npm run dev

En el caso de estar empleando Laravel Sail y no tener instalado Node en tu equipo:

$ ./vendor/bin/sail npm run dev

Finalmente, veremos que es sobrescrito nuestro esquema de rutas en:

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

Y recuerda colocar nuevamente las rutas sobrescritas:

use App\Http\Controllers\Dashboard\CategoryController;
use App\Http\Controllers\Dashboard\PostController;
***
Route::group(['prefix' => 'dashboard'], function () {
    Route::resources([
        'post' => PostController::class,
        'category' => CategoryController::class,
    ]);
});

Si revisamos los archivos generados en la carpeta de resources, veremos:

resources\css\app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
resources\js\app.js
import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Breeze configuró Tailwind.css y Alpine.js en nuestro proyecto con las importaciones correspondientes para tal fin.

Finalmente, el comando de npm run dev, genera los archivos de salida y levanta un proceso para el Hot Reload Replacement que permite sincronizar los cambios que hagamos en el código fuente con lo que estamos viendo en el navegador.

Sistema de autenticación

Aparte de la configuración de Tailwind y Alpine, Laravel Breeze configura un sencillo esquema de autenticación que vamos a emplear a continuación.

Si vamos a:

http://larafirststeps.test/login

Veremos la siguiente pantalla:

Una página de login, pero, necesitamos crear un usuario:

http://larafirststeps.test/register

Creamos alguno:

Y si vamos a la base de datos:

Por defecto ya iniciamos login; y como puedes ver, ya tenemos listo un bonito layout para nuestra aplicación; en el proyecto:

Verás unos archivos de vistas que ya nos generó Laravel Breeze:

Te recomiendo que le des una buena revisada, y verás todas las opciones que tenemos; registrar, login, recuperar contraseña y cerrar sesión:

06-04-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Primeros pasos con Laravel Breeze - Simple sistema de autenticación