Te muestro un ejemplo completo del uso de ui:auth en Laravel

 https://www.youtube.com/watch?v=rZ0LWSAp5-I

https://www.youtube.com/watch?v=w44cAHQ-Fdk

Te muestro un ejemplo completo del uso de ui:auth en Laravel:

1. Instalación del paquete UI

bash
composer require laravel/ui

2. Generar el scaffolding de autenticación

bash
# Para Bootstrap
php artisan ui bootstrap --auth

# O para Vue.js
php artisan ui vue --auth

# O para React
php artisan ui react --auth

3. Instalar dependencias y compilar

bash
npm install && npm run dev

4. Archivos generados por ui:auth

El comando genera varios archivos:

Controladores (app/Http/Controllers/Auth/)

  • LoginController.php

  • RegisterController.php

  • ForgotPasswordController.php

  • ResetPasswordController.php

Vistas (resources/views/auth/)

  • login.blade.php

  • register.blade.php

  • verify.blade.php

  • passwords/email.blade.php

  • passwords/reset.blade.php

Rutas (routes/web.php)

Se agregan automáticamente:

php
Auth::routes();

5. Ejemplo de vista de login (resources/views/auth/login.blade.php)

html
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Login') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">
                                {{ __('Email Address') }}
                            </label>

                            <div class="col-md-6">
                                <input id="email" type="email" 
                                       class="form-control @error('email') is-invalid @enderror" 
                                       name="email" value="{{ old('email') }}" 
                                       required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-end">
                                {{ __('Password') }}
                            </label>

                            <div class="col-md-6">
                                <input id="password" type="password" 
                                       class="form-control @error('password') is-invalid @enderror" 
                                       name="password" required autocomplete="current-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6 offset-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           name="remember" id="remember" 
                                           {{ old('remember') ? 'checked' : '' }}>

                                    <label class="form-check-label" for="remember">
                                        {{ __('Remember Me') }}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Login') }}
                                </button>

                                @if (Route::has('password.request'))
                                    <a class="btn btn-link" href="{{ route('password.request') }}">
                                        {{ __('Forgot Your Password?') }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

6. Layout principal (resources/views/layouts/app.blade.php)

html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
    <div class="min-h-screen bg-gray-100">
        @include('layouts.navigation')

        <!-- Page Heading -->
        @isset($header)
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>
        @endisset

        <!-- Page Content -->
        <main>
            {{ $slot }}
        </main>
    </div>
</body>
</html>

7. Navegación con autenticación (resources/views/layouts/navigation.blade.php)

html
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="shrink-0 flex items-center">
                    <a href="{{ route('home') }}">
                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800" />
                    </a>
                </div>
            </div>

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

            <!-- Settings Dropdown -->
            <div class="hidden sm:flex sm:items-center sm:ms-6">
                @auth
                    <x-dropdown align="right" width="48">
                        <x-slot name="trigger">
                            <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
                                <div>{{ Auth::user()->name }}</div>
                                <div class="ms-1">
                                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </button>
                        </x-slot>

                        <x-slot name="content">
                            <x-dropdown-link :href="route('profile.edit')">
                                {{ __('Profile') }}
                            </x-dropdown-link>

                            <!-- Authentication -->
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <x-dropdown-link :href="route('logout')"
                                        onclick="event.preventDefault();
                                                    this.closest('form').submit();">
                                    {{ __('Log Out') }}
                                </x-dropdown-link>
                            </form>
                        </x-slot>
                    </x-dropdown>
                @else
                    <x-nav-link :href="route('login')">
                        {{ __('Login') }}
                    </x-nav-link>
                    <x-nav-link :href="route('register')">
                        {{ __('Register') }}
                    </x-nav-link>
                @endauth
            </div>
        </div>
    </div>
</nav>

8. Uso en controladores

php
// Proteger rutas con middleware auth
public function __construct()
{
    $this->middleware('auth');
}

// Redirección después de login/registro
protected $redirectTo = '/dashboard';

// Personalizar credenciales de login
protected function credentials(Request $request)
{
    return array_merge($request->only($this->username(), 'password'), [
        'active' => 1, // Solo usuarios activos
    ]);
}

Este ejemplo muestra cómo ui:auth genera un sistema de autenticación completo con vistas, rutas y controladores listos para usar.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Cómo usar php artisan ui:auth en Laravel

 https://www.youtube.com/watch?v=IVHCTxexJ9s https://www.youtube.com/watch?v=w44cAHQ-Fdk Cómo usar  php artisan ui:auth  en Laravel El comando  php artisan ui:auth  es una herramienta poderosa en Laravel que genera automáticamente las vistas, rutas y controladores necesarios para un sistema de autenticación completo. Pasos para implementar la autenticación 1. Crear un nuevo proyecto Laravel (si no tienes uno) bash laravel new mi-proyecto cd mi-proyecto 2. Ejecutar el comando de autenticación bash php artisan ui:auth 3. Ejecutar las migraciones bash php artisan migrate ¿Qué genera este comando? Vistas de autenticación : login, registro, recuperación de contraseña y reset de contraseña Rutas : Todas las rutas necesarias para el flujo de autenticación Controladores : AuthController, LoginController, RegisterController, etc. Layout básico : Un diseño base para las vistas Personalización Puedes especificar el framework de frontend que deseas utilizar: bash # Con Boo...
Leer más

Te explico cómo configurar el sistema de login en Laravel paso a paso

 https://www.youtube.com/watch?v=l6rlBIhjEs0 Te explico cómo configurar el sistema de login en Laravel paso a paso: 1. Instalación y configuración inicial Primero, asegúrate de tener Laravel instalado y configurado: bash composer create-project laravel/laravel mi-proyecto cd mi-proyecto 2. Configurar la base de datos En el archivo  .env , configura tu base de datos: env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nombre_base_datos DB_USERNAME=usuario DB_PASSWORD=contraseña 3. Instalar el paquete de autenticación Laravel incluye un scaffolding para autenticación: bash composer require laravel/ui php artisan ui bootstrap --auth npm install && npm run build 4. Migraciones Ejecuta las migraciones para crear las tablas necesarias: bash php artisan migrate 5. Modelo User El modelo User ya viene incluido. Puedes personalizarlo si necesitas: php <?php // app/Models/User.php namespace App \ Models ; use Illuminate \ Foundation \ Auth \ User ...
Leer más

Tutorial para instalar y usar Laravel Assets

  Tutorial para instalar y usar Laravel Assets Te guiaré paso a paso para instalar y usar assets (recursos estáticos como CSS, JavaScript, imágenes) en Laravel. 1. Estructura de directorios de assets en Laravel Laravel organiza los assets en la carpeta  public/ : text public/ ├── css/ ├── js/ ├── images/ └── index.php 2. Métodos para incluir assets Método 1: Usando la función  asset()  (Recomendado) php < ! -- En tus vistas Blade -- > < link href = "{{ asset('css/app.css') }}" rel = "stylesheet" > < script src = "{{ asset('js/app.js') }}" > < / script > < img src = "{{ asset('images/logo.png') }}" alt = "Logo" > Método 2: Usando URL absoluta php < link href = "/css/app.css" rel = "stylesheet" > Método 3: Usando Mix (para assets compilados) php < link href = "{{ mix('css/app.css') }}" rel = "stylesheet" > 3. Configura...
Leer más