No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Introducción a Laravel 9

Curso de Introducción a Laravel 9

Profesor Italo Morales F

Profesor Italo Morales F

Inicio de sesión

13/31
Recursos

¿Cómo instalar y configurar el sistema de inicio de sesión en Laravel?

En el mundo del desarrollo web, crear un sistema de inicio de sesión eficiente y seguro es esencial para proteger tanto los datos de los usuarios como los recursos del sistema. Laravel, un framework PHP robusto y popular, facilita este proceso al ofrecer componentes que simplifican la implementación de esta característica. En esta guía aprenderás cómo hacerlo, paso a paso, para que puedas gestionar el área pública y administrativa de tu aplicación web de manera eficaz.

¿Qué necesitas antes de empezar?

Antes de comenzar con la instalación, asegúrate de tener tu entorno Laravel configurado y listo. Además, es importante contar con Composer instalado en tu sistema, ya que lo necesitarás para manejar las dependencias de PHP.

¿Cómo instalar el componente de inicio de sesión de Laravel?

  1. Abrir tu terminal: Asegúrate de estar en el directorio raíz de tu proyecto Laravel.

  2. Usar Composer para la instalación:

    composer require laravel/nombre-del-proyecto --dev
    

    Esta línea de comando instala el componente necesario para el sistema de sesión en modo de desarrollo.

  3. Confirmar la instalación:

    php artisan
    

    La ejecución de este comando te permitirá verificar que el nuevo componente se ha instalado correctamente y está activo en tu sistema.

¿Cómo configurar las rutas de sesión?

Las rutas preexistentes en tu proyecto necesitarán ajustes para acomodar el nuevo sistema de inicio de sesión.

  • Copia las rutas actuales antes de ejecutar configuraciones adicionales, para evitar perder información.
  • Ya instalados los archivos, elimina las rutas antiguas y adapta el nuevo esquema que el proyecto proporciona.

¿Cómo modificar la vista para el inicio de sesión?

Una vez tengas el componente de sesión instalado, realiza ajustes en tu plantilla:

  1. Implementar directivas inteligentes: Utiliza la directiva @auth para verificar si el usuario ha iniciado sesión:

    @auth
        {{ route('dashboard') }}
    @else
        Iniciar sesión
    @endauth
    
  2. Agregar renderización condicional: Esta estructura asegura que los usuarios vean la opción correspondiente según su estado de sesión.

¿Cómo instalar las dependencias de diseño necesarias?

Tu sistema necesita ciertas dependencias de diseño para renderizar correctamente los elementos de la interfaz:

  1. Instalar dependencias con npm:

    npm install
    
  2. Compilar los recursos de diseño:

    npm run dev
    

    Este comando generará el CSS y Javascript necesarios en la carpeta public.

¿Cómo comprobar que el sistema de sesión ya funciona?

Dirígete al navegador y visita tu aplicación:

  • Accede al inicio de sesión y utiliza un usuario de prueba con contraseña predefinida, por ejemplo, "password".
  • Comprueba que la transición a la área administrativa es suave y no presenta errores.

Al seguir estos pasos, no sólo habrás configurado un sistema de inicio de sesión funcional en tu aplicación Laravel, sino que también habrás creado una base sólida para futuras expansiones y mejoras. ¡Te animamos a seguir profundizando en el manejo de Laravel para crear aplicaciones aún más completas y seguras!

Aportes 35

Preguntas 26

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En el caso que quieras crear un usuario diferente podemos poner en el seeder algo asi:

        User::create([
            'name' => 'El nombre Del usuario Nuevo',
            'email' => '[email protected]',
            // metodo de encriptacion para la contraseña
            'password' => bcrypt('123456')
        ]);

Para los que le sucede el mismo error por alguna razon en mi caso por que quiza uso laravel 8.xx con una versionde php 7.4x lo sulucione de la siguiente manera:

  1. Ubicamos los archivos ( app.blade.php y guest.blade.php) dentro de la carpteta views/layaouts dentro de recursos.

  2. Cambiamos el

@vite(['resources/css/app.css', 'resources/js/app.js'])

por

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
 <script src="{{ asset('js/app.js') }}" defer></script>

Y listo. :’)

Me parece genial que en este curso hayan usado breeze, ya que yo solo había trabajado con jetstream y laravel/ui

en caso que tengan problemas para mostrar el login, ejecuten los comandos en este orden

  1. composer require laravel/breeze
  2. php artisan breeze:install
  3. npm install
  4. npm run dev
  5. npm run build (este ultimo es sumamente importante)

Yo no tuve necesidad de de ejecutar los comandos de npm installa ni el de npm run dev. Tal vez mi laravel 9 ya los había instalado antes.

Al ejecutar el siguiente comando nos hace un serie de preguntas, en este caso se debe seleccionar **BALDE **y las otras a gusto de cada uno. pero el modo **DARK **fue de todo mi agrado con un color azul oscuro muy bonito y nos ayuda a no fatigarnos la vista…

php artisan breeze:install

Nos arroja estas opciones.


> Which stack would you like to install?
  blade ....................................................0  
  react ....................................................1  
  vue ......................................................2  
  api ......................................................30

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

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


A partir de Laravel 10, ya no tienes que ejecutar el comando npm run dev… Al ejecutar el npm install queda todo listo y ya puedes ejecutar tu login sin problemas… Ahorro de comandos, que llaman jejeje

actualmente automaticamente una vez que le das el command

php artisan breeze:install

se ejectuta el resto.

Que facil implementar un login y register

Instalación- actualizada 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 ❯ blade Would you like dark mode support? (yes/no) \[no] ❯ yes Which testing framework do you prefer? \[PHPUnit] PHPUnit .......................................................................................................... 0 Pest ❯ PHPUnit
Hola si no te funciono como a mi por tantos temas de que ahora la version de laravel es la 11, y quieres intentarlo nuevamente pero con la version 9, pues sencillo te enseño lo que a PLATZI le queda grande: `composer create-project laravel/laravel:^9 nombre_proyecto` De esta forma crean un proyecto en la version del curso eso o hasta que platzi se dedique a mantener informacion actualizada.
engo problemas con la vista dashboard ```js Route [profile.edit] not defined. ```

Muy buen aporte para entender de manera general Laravel 9

actualmente breeze tepide mas opcio0na como dark mode, test unit, etc creo que una actualizada al curso no estaria nada mal

Para los que usen Laravel 10.

solo necesitan estos dos comandos.

composer require laravel/breeze

php artisan breeze:install

Yo tenía el error:
Vite manifest not found at: C:\Users\HP\example-app\public/build/manifest.json

En package.json le puse “build”: “vite build”,

“scripts”: {
“dev”: “npm run development”,
“build”: “vite build”,
“development”: “mix”,
“watch”: “mix watch”,
“watch-poll”: “mix watch – --watch-options-poll=1000”,
“hot”: “mix watch --hot”,
“prod”: “npm run production”,
“production”: “mix --production”
},

Aqui tan bien me ayudo a resolverlo
https://stackoverflow.com/questions/72798465/vite-manifest-not-found-at-c-users-hp-example-app-public-build-manifest-json

Mi solucion para que me funcionaran los estilos, fue
eliminar

 @vite(['resources/css/app.css', 'resources/js/app.js'])

Y agregarle a las vistas layouts/app.blade.php y layouts/guest.blade.php

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>

Para los que tengan problemas al momento de ejecutar NPM RUN DEV, la solución para mi fue actualizar la version de NODE

Si a alguien, al ejecutar el comando npm run dev, les aparece este error:

<3 WARNINGS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 3 warnings> 

Prueben utilizando el siguiente comando:

npm install autoprefixer@10.4.5 --save-exact

A mi me funciono, ya que no me dejaba pasar de este problema, según lo investigado se debe a un paquete de color que ya esta en desuso (color-adjust), la fuente de la fuente donde vi este problema:

https://github.com/twbs/bootstrap/issues/36259

Es un tema complicado que se resuelve con el comando compartido, pero veo que hay muchas formas de resolverlo, sin embargo por como es algo nuevo para mi (y supongo que para muchos) es mejor para no quebrarse la cabeza, pero ayuda a entender como un paquete simple puede causarnos dolores de cabeza…

Otro relacionado con el problema ⬇⬇

mix.webpackConfig({
stats: {
    children: true,
},});

Había trabajado con Laravel/UI pero este otro paquete es nuevo para mi y se ve que también esta muy bien. Me tocara leer un poco más al respecto para entender las diferencias de cual es mejor para implementar en un sistema real.

UNA CLASE MARAVILLOSA ![](https://static.platzi.com/media/user_upload/thumb-1920-365179-19d0d25a-db1d-4980-89ba-66b8a663e23e.jpg)
Si les tira error el comando `npm` ejecutenlo con privilegios elevados. `sudo npm`
Si usan google idx debido a que las versiones de laravel son mas nuevas solo se utilizan estos 2 comandos: composer require laravel/breeze php artisan breeze:install
lo tenia bien pero ejecute el el npm run dev y ahora se daño el login quedo feo y no se como repararlo ayuda
después de poner el npm run dev no se arreglo y quedo el login desordenado como al principio
Ami me creo las vistas de esta forma alguien sabe porque ? Route::get('/dashboard', function () {     return view('dashboard'); })->middleware(\['auth', 'verified'])->name('dashboard'); 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'); });
INFO: Cuando utilizas Laravel Breeze, el comando `php artisan breeze:install` realiza muchas tareas, incluyendo la instalación de las dependencias de JavaScript y la compilación de los assets, por lo que no necesitas ejecutar manualmente los comandos `npm install` y `npm run dev`. El comando `php artisan breeze:install` automatiza la instalación de las dependencias de JavaScript utilizando npm y compila los assets de tu aplicación. Esto es parte de la conveniencia que Laravel Breeze proporciona para simplificar el proceso de configuración de autenticación en Laravel. Entonces, si has ejecutado `php artisan breeze:install` y no has experimentado problemas, no necesitas ejecutar manualmente los comandos de npm en este caso específico. Sin embargo, es siempre bueno verificar que las dependencias se hayan instalado correctamente y que los assets se hayan compilado apropiadamente después de ejecutar el comando Laravel Breeze. Si en el futuro encuentras algún problema con los assets de JavaScript o CSS, o si necesitas personalizarlos, podrías necesitar ejecutar manualmente los comandos `npm install` y `npm run dev` en ese momento, pero por ahora, parece que Laravel Breeze se encargó de todo automáticamente.

Yo ejecuté el

PHP artisan breeze:install
luego los comandos NPM

Al momento de ingresar a la sección del logien me aparecía con error del comando que se instala solo que es el @vite en el header para el estilo, por ende los agregue de forma manual y me cargo sin problemas.

<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

una joyita este curso

npm run build,
ME SALVO

Me sorprendo de todo lo que se puede hacer con Laravel usando muy poco código! No conocía este componente breeze.
Me gustó mucho esta clase!

Creo que ahora laravel breeze ahora usa vite y ejecuta el build sin necesidad que nosotros ejecutemos los comandos de npm.

solo instale breeze y creo dentro de public una carpeta build y dentro creo otra carpeta assets y dentro estan los archivos css y js pero con nombres en digitos

En mi caso tuve que ejecutar:

php artisan cache:clear
php artisan optimize 

Esto para que me reconociera la ruta de /login y otros cambios que no veía como el profesor lo planteaba.

Alguien sabe porque no avanza cuando se ejecuta el comando >npm run dev. ![](https://static.platzi.com/media/user_upload/image-632dc0bf-766a-4507-882b-779071c3ca5d.jpg)