Autenticación

• 1: Instalación
• 2: auth: Vistas y Controladores

1 - Instalación

Instalando breeze

• Referencia en la web https://laravel.com/docs/master/fortify

• Instalación

  1 2 3 4 5 6 7

  composer require laravel/breeze --dev php artisan breeze:install php artisan migrate npm install npm run dev *

Qué hacemos en este proceso de instalación

    composer require laravel/breeze --dev

Este comando:

• Descarga el paquete laravel/breeze como dependencia de desarrollo
• No crea aún ningún archivo de autenticación
• Añade al proyecto los comandos necesarios para generar el sistema de login

En este punto, el proyecto sigue siendo funcionalmente igual; Breeze solo está disponible para ser instalado.

php artisan breeze:install

Este es el comando clave del proceso.
Al ejecutarlo, Laravel:

• Copia controladores de autenticación al proyecto
• Genera vistas Blade para login, registro, recuperación de contraseña, etc.
• Añade rutas de autenticación en el sistema de rutas
• Configura el uso de Tailwind y Alpine
• Publica componentes Blade reutilizables

Durante la ejecución, Breeze puede preguntar por el stack a utilizar (Blade, React, Vue, API, etc.).
Si no se especifica nada, se instala el stack Blade por defecto.

php artisan migrate

Este comando:

• Ejecuta las migraciones de base de datos
• Crea, entre otras, la tabla users necesaria para la autenticación
• Deja el sistema preparado para registrar y autenticar usuarios reales

Sin este paso, el login no funcionaría porque no existirían las tablas necesarias.

    npm install

Este comando:

• Instala las dependencias frontend definidas en package.json
• Incluye Tailwind CSS, Vite y otras herramientas necesarias
• Prepara el entorno para compilar los assets

Es imprescindible tras instalar Breeze, ya que se añaden dependencias nuevas.

Advertencia sobre Tailwind 4 y Breeze

Laravel Breeze, por defecto, está preparado para funcionar con Tailwind CSS 3.
Aun así, es posible forzar el proyecto para usar Tailwind CSS 4, pero debes asumir que:

• No es un camino “oficial” en Breeze.
• Puede haber pequeños fallos visuales en algunas vistas (normalmente mínimos y fáciles de ajustar).
• El mayor riesgo es dejar el proyecto en un estado “híbrido” (Tailwind 4 + PostCSS antiguo), lo que rompe Vite.

Qué ocurre al instalar Breeze

Después de ejecutar php artisan breeze:install suelen ocurrir estos cambios:

1. Se sobreescriben o regeneran rutas
   Breeze necesita añadir rutas de autenticación. Si tu routes/web.php estaba personalizado, revisa cambios y recupera tu contenido si fuese necesario.

2. Se instalan controladores, vistas y rutas de autenticación
   Se generan (o se añaden) controladores de autenticación, vistas Blade y rutas para: login, register, logout, forgot password, reset password, email verification, etc.

3. Se instala Tailwind 3 y se modifica el frontend
   Breeze añade dependencias y ficheros del stack frontend (Tailwind 3 por defecto).
   Esto puede implicar que tu resources/css/app.css se reemplace o se ajuste para Tailwind 3.

Migrar el proyecto a Tailwind 4 (mínimo y limpio)

Objetivo: dejar el proyecto en un estado coherente con Tailwind 4:

• Tailwind 4
• Sin PostCSS
• Sin autoprefixer
• Vite usando el plugin @tailwindcss/vite
• CSS usando @import "tailwindcss";

1) Eliminar PostCSS del proyecto

Borra el fichero de configuración de PostCSS (si existe):

• postcss.config.js

Nota: Si este fichero existe, Vite intentará cargar PostCSS y fallará si no tienes autoprefixer.

2) Ajustar dependencias (package.json)

Asegúrate de que NO existan estas dependencias en devDependencies del fichero package.json . Puedes borrar directamente esas líneas:

• postcss
• autoprefixer
• tailwindcss versión 3

Instala Tailwind 4 y el plugin oficial para Vite:

• tailwindcss
• @tailwindcss/vite

  - npm install -D tailwindcss@latest @tailwindcss/vite

• tailwindcss@latest: Instala la versión más reciente de Tailwind (actualmente 4.x).

• @tailwindcss/vite Es imprescindible para Tailwind 4. Sustituye completamente a PostCSS con autoprefixer.

• -D (–save-dev) Tailwind es una dependencia de desarrollo. (En producción, ya se transpila al css

3) Limpiar instalación de npm y reinstalar

Elimina dependencias instaladas y el lockfile, y reinstala:

 rm -rf node_modules package-lock.json
 npm install

• borrar node_modules
• borrar package-lock.json
• ejecutar npm install

Esto evita que queden restos de Tailwind 3 o PostCSS en caché.

4) Configurar Vite para Tailwind 4

En vite.config.js añade el plugin:

• importar tailwindcss desde @tailwindcss/vite
• incluir tailwindcss() en plugins

Debe quedar (estructura):

export default defineConfig({
    plugins: [
        laravel({
            // Lo que hubiera
        }),
        tailwindcss(),
    ],

});

5) Cambiar resources/css/app.css al formato Tailwind 4

En Tailwind 4 NO se usan directivas clásicas @tailwind ...;.

El contenido mínimo recomendado es:

• @import "tailwindcss";

6) Ejecutar Vite

Finalmente:

• npm run dev

Si Vite arranca sin errores, Tailwind 4 está funcionando.

Nota sobre estilos “raros” tras la migración

Recuerda que estás usando tailwind en versión 4 y podría ser que alguna vista, algún componente tenga algún detall de estilo diferente en la versión 3:

• No es un fallo de Laravel.
• Es un cambio esperado por las diferencias entre Tailwind 3 y Tailwind 4.
• Normalmente se corrige ajustando clases concretas en las vistas de Breeze.

Limpieza paso a paso (checklist rápida)

• Borrar postcss.config.js
• Quitar postcss y autoprefixer de package.json
• Sustituir Tailwind 3 por Tailwind 4
• rm -rf node_modules package-lock.json
• npm install
• Configurar vite.config.js con @tailwindcss/vite
• Cambiar app.css a @import "tailwindcss";
• npm run dev

Opción alternativa: iniciar el proyecto directamente con Breeze

Laravel permite crear un proyecto nuevo e instalar Breeze desde el inicio usando un parámetro

laravel new proyecto --breeze

Con esta opción:

• Breeze se instala automáticamente durante la creación del proyecto
• Se generan directamente las vistas, controladores y rutas
• Aun así, será necesario ejecutar migrate y npm install / npm run dev

Esta opción es útil cuando se sabe desde el principio que el proyecto necesitará autenticación básica.

Usando docker para la bd

Redirección una vez autenticado con Laravel Breeze

En Laravel Breeze, la redirección después de autenticarse se gestiona en el controlador AuthenticatedSessionController. Este controlador define el comportamiento de inicio de sesión y la redirección predeterminada.

Ubicación del Controlador

El controlador se encuentra en la siguiente ruta del proyecto:

1

app/Http/Controllers/Auth/AuthenticatedSessionController.php

Modificar la Redirección

Para cambiar la ruta a la que se redirige al usuario después de iniciar sesión, edita el método store del controlador. Este es el fragmento relevante:

1
2
3
4
5
6
7
8

public function store(Request $request): RedirectResponse
{
$request->authenticate();

    $request->session()->regenerate();

    return redirect()->intended('/dashboard'); // Cambia '/dashboard' por tu ruta deseada
}

• redirect()->intended('/dashboard'): Lleva al usuario a la página protegida que intentaba acceder antes de iniciar sesión.
• Si no hay una página pendiente, lo redirige a la ruta /dashboard.

Ejemplo Práctico

Si deseas redirigir al usuario a una página personalizada, por ejemplo, /inicio, modifica la línea de redirección:

1

return redirect()->intended('/inicio');

Redirección después de registro con Laravel Breeze

En Laravel Breeze, la redirección después de que un usuario se registre se gestiona en el controlador RegisteredUserController. Este controlador define el comportamiento para registrar nuevos usuarios y, al completarse, redirigirlos a una página específica.

Ubicación del Controlador

El controlador se encuentra en la siguiente ruta dentro del proyecto:

1

app/Http/Controllers/Auth/RegisteredUserController.php

Modificar la Redirección

Para cambiar la redirección una vez que el usuario se registre, edita el método store en el controlador. Este es el fragmento relevante:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

public function store(Request $request): RedirectResponse
{
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);

    event(new Registered($user));

    Auth::login($user);

    return redirect('/dashboard'); // Cambia '/dashboard' por tu ruta deseada
}

• return redirect('/dashboard'): Indica a dónde será redirigido el usuario después de registrarse.
• Puedes cambiar /dashboard por cualquier ruta que desees, como /welcome o /inicio.

Ejemplo Práctico

Si deseas redirigir a los usuarios recién registrados a una página de bienvenida personalizada (/welcome), edita el método de la siguiente manera:

1

return redirect('/welcome');

Nota Adicional

La autenticación del usuario tras el registro está integrada en el método Auth::login($user). Esto asegura que el usuario esté autenticado inmediatamente después de registrarse y sea redirigido a la página deseada.

2 - auth: Vistas y Controladores

Autenticación en Laravel (Breeze)

Control de acceso con directivas Blade, middleware y obtención del usuario autenticado.

Directivas Blade: @auth y @guest

Laravel proporciona directivas específicas para comprobar si el usuario está autenticado.

@auth

Renderiza el contenido solo si el usuario está autenticado.

@auth
<p>Bienvenido {{ auth()->user()->name }}</p>
@endauth

Equivalente interno:

if (auth()->check()) {
// usuario autenticado
}

@guest

Renderiza el contenido solo si NO hay usuario autenticado.

@guest
<a href="{{ route('login') }}">Login</a>
<a href="{{ route('register') }}">Register</a>
@endguest

Equivalente interno:

if (!auth()->check()) {
// usuario no autenticado
}

Middleware auth en rutas

El middleware protege rutas para que solo accedan usuarios autenticados.

En routes/web.php

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

Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'edit']);
Route::get('/settings', [SettingsController::class, 'index']);
});

Si el usuario no está autenticado:

• Laravel redirige automáticamente a /login.

Obtener el usuario autenticado en un Controller

$user = auth()->user();

    public function index(Request $request)
    {
          $user = $request->user();
    }

Si la ruta NO está protegida con middleware:

$user = auth()->user(); // devuelve null si no está autenticado

Por eso es recomendable:

    if (auth()->check()) {
       $user = auth()->user();
    }

Resumen conceptual

• @auth → Mostrar contenido solo si hay usuario autenticado.
• @guest → Mostrar contenido solo si NO hay usuario autenticado.
• middleware('auth') → Protege rutas o controladores.
• auth()->user() → Devuelve el usuario autenticado o null.

Laravel centraliza la autenticación mediante:

• Guards
• Middleware
• Facade Auth
• Helper auth()

Esto permite mantener el código limpio y coherente en toda la aplicación.

¿Qué es un Guard en Laravel? (Explicación básica)

Un Guard es el mecanismo que Laravel usa para saber:

¿Quién está autenticado y cómo lo he autenticado?

Es decir, el guard decide:

• DÓNDE se guarda la información del login
• CÓMO se comprueba si un usuario está autenticado

Imagina que Laravel es un edificio con varias puertas.

Cada puerta tiene un sistema diferente para comprobar la identidad:

• 🔑 Una puerta usa sesiones (login clásico con formulario)
• 🔐 Otra puerta usa tokens API
• 🪪 Otra podría usar JWT
• 🧩 Otra podría usar autenticación externa

Cada sistema de acceso es un Guard.

El Guard por defecto

En aplicaciones web normales (con Breeze), Laravel usa el guard: Web Este guard:

• Usa sesiones
• Guarda el usuario autenticado en la sesión
• Funciona con login tradicional (email + password)

Está definido en:

config/auth.php

¿Por qué existen varios Guards?

Porque una misma aplicación puede tener:

• 👤 Usuarios normales (web)
• 🤖 API externa con tokens
• 👨‍🏫 Panel admin separado
• 📱 App móvil con autenticación diferente

Cada tipo puede usar un guard distinto.

Ejemplo típico:

'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],

    'api' => [
        'driver' => 'token',
        'provider' => 'users',
    ],
]

Acciones de un guard

Un guard se encarga de:

1. Comprobar si hay usuario autenticado
2. Recuperar el usuario actual
3. Validar credenciales
4. Gestionar login / logout

Guard Vs Provider

• Guard → Cómo se autentica
• Provider → De dónde salen los usuarios (tabla users, otra tabla, etc.)

🔐 Guard = Sistema de autenticación
👤 Provider = Fuente de usuarios
🧾 Middleware auth = Filtro que obliga a estar autenticado

• Guard: web
• Driver: session
• Provider: users

Y funcionará automáticamente.

No tenéis que tocar nada hasta que trabajéis con APIs o múltiples tipos de autenticación.