Laravel Breeze, generate an authentication system and configure Tailwind.css

- Andrés Cruz

En español
Laravel Breeze, generate an authentication system and configure Tailwind.css

Laravel Breeze is a great option for building a simple authentication scheme in a Laravel application; Laravel define this package as:

Laravel Breeze is a minimal and simple implementation of all of Laravel's authentication features, including login, registration, password reset, email verification, and password confirmation. Laravel Breeze's default view layer is made up of simple Blade templates designed with Tailwind CSS.

Laravel Breeze is a basic authentication package that can be installed via composer; is a package developed exclusively for Laravel that allows you to easily add authentication functionality to a Laravel application. Breeze uses the Blade, Vue or React template to generate each of the visual screens and of course, the corresponding controllers to process the requests. When installing Breeze automatically, the application has modules for password recovery, email verification, login and registration, in addition, Breeze includes a profile page to update basic data of the authenticated user; and with a few changes, you can add a simple role system in the user module, this is a configuration we do in the entire course and book on Laravel.

Install and configure Laravel Breeze

In order to install it:

$ composer require laravel/breeze --dev

and we execute

$ php artisan breeze:install

It will ask which stack we want to use; if you have experience you can select any of the technologies like Vue or react:

Which stack would you like to install?

  blade ............................................................... 0  
  react ............................................................... 1  
  vue ................................................................. 2  
  api ................................................................. 3  

But, to start small, it is recommended that you use the "blade" option; so, you select the 0:

$ 0

You can enable dark mode:

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

Indicating "yes":

$ yes

Among other options, such as unit tests, that would not be necessary:

Would you prefer Pest tests instead of PHPUnit?                

   (yes/no) [no]

Indicating "no":

$ no

And you wait until the process is finished:

INFO  Installing and building Node dependencies.

If you see an error like the following:

failed to load config from C:\laragon\www\testlara10\vite.config.js
error when starting dev server:
Error: Cannot find module 'node:path'
Require stack:
- C:\laragon\www\testlara10\node_modules\vite\dist\node-cjs\publicUtils.cjs
- C:\laragon\www\testlara10\node_modules\vite\index.cjs
- C:\laragon\www\testlara10\vite.config.js

It means that you have a very old version of Node; you can know your version of Node with:

$ node -v

If you see a version similar to or lower than this:

v14.16.1

In this post we are using:

$ node -v
v18.14.1

You must update your version; then you can run:

$ npm run dev

In the case of using Laravel Sail and not having Node installed on your computer:

$ ./vendor/bin/sail npm run dev

Finally, we will see that our routing scheme is overwritten in:

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

And remember to put the overridden paths back:

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,
    ]);
});

If we review the generated files in the resources folder, we will see:

// 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 configured Tailwind.css and Alpine.js in our project with corresponding imports for that purpose.

Finally, the npm run dev command generates the output files and starts a process for the Hot Reload Replacement that allows us to synchronize the changes we make in the source code with what we are seeing in the browser.

Authentication system

Aside from the Tailwind and Alpine setup, Laravel Breeze sets up a simple authentication scheme that we'll use next.

If we go to:

http://laraprimerospasos.test/login

We will see the following screen:

A login page, but, we need to create a user:

http://laraprimerospasos.test/register

Let's create some:

And if we go to the database:

By default we already start login; and as you can see, we already have a nice layout ready for our application; in the project:

You will see some view files that Laravel Breeze already generated for us:

I recommend that you give it a good review, and you will see all the options we have; register, login, recover password and close session:

All this is part of the complete chapter about my book in Laravel that you can see from the books section.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.