Getting started with Laravel Breeze - Simple authentication system

Laravel Breeze define it in the official documentation 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’s default view layer Breeze is made up of simple Blade views designed with Tailwind CSS.”

And in a few words, it offers us two configurations at the project level:

1. Install and configure Tailwind.css and Alpine.js.
2. Install and configure a simple authentication scheme, login, password recovery and middleware for access control.

It is important to note that it is not the objective of the book to learn Tailwind.css or Alpine.js, therefore, it is assumed that the reader has some knowledge about them; we will try to use these technologies in a simple way, but if you get lost at some point, as a general recommendation, you can pause the chapter and study these technologies a bit; on my YouTube channel you will find introductions to these technologies.

The page of the package that we are going to install is at: 

https://laravel.com/docs/master/starter-kits

To be able to install it:

$ composer require laravel/breeze --dev

And we run: 

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

But, if you don't have experience, i recommended that you use the "blade" option:

$ blade

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

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 the book, we are using:

$ node -v
v18.8.0

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 route scheme is overwritten in:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
And remember to put the overwritten routes 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 the corresponding imports for that purpose.

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

Authentication system

Apart from the Tailwind and Alpine configuration, Laravel Breeze configures a simple authentication scheme that we are going to use next.

If we go to: 

http://larafirststeps.test/login

We will see the following screen:

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

http://larafirststeps.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:

06-04-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Getting started with Laravel Breeze - Simple authentication system