Primeros pasos con Laravel Breeze - Simple sistema de autenticación
Laravel Breeze es una implementación mínima y simple de todas las funciones de autenticación de Laravel.
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:
- Instalar y configurar Tailwind.css y Alpine.js.
- 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:
- Andrés Cruz
Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro Laravel 11 con Tailwind Vue 3, introducción a Jetstream Livewire e Inerta desde cero - 2025.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter