What is Laravel Breeze?

Laravel Breeze is a starter kit for authentication in a Laravel project. Basically, Breeze scaffolds a fully fledged authentication system to a Laravel application. It is made up of Blade templates and styled with the help of TailwindCSS.

Features

It includes the following features out of the box:

• Login
• Registration
• Password reset
• Email verification
• Password confirmation
• Basic account dashboard

It's something akin to what the old artisan auth:make was in the Laravel 5 days along with its companion package laravel/ui. It has been completely revamped by the Laravel team, though.

Installation

First, we need an existing Laravel application. For sake of brevity, I'm just going to provide a link to the documentation instead.

Let's run the base migrations provided with a fresh install.

php artisan migrate

Once we're set, let's head to the terminal and add Breeze to our project:

composer require laravel/breeze --dev

This will add the laravel/breeze package to our composer.json development dependencies and pull the files into the vendor directory.

Publishing the assets

What we need to do next is to publish Breeze's assets that will populate our application with all the views, routes and controllers we need to make it work, by typing in the command:

php artisan breeze:install

What changed

The last command not only published all the views, routes and controllers we need to build a complete authentication system, it also added all the tests that go along with it. There's even a fully configured TailwindCSS configuration file! How awesome is that?

The routes

Our web routes files was updated with the following:

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

This route definition registers the user account dashboard route. It returns a static dashboard view and sets the auth middleware which prevents access to it to unauthenticated users.

require __DIR__ . '/auth.php';

Then, the whole auth.php file is imported from the routes directory. It contains the route definitions for all of Breeze's built-in functionalities.

CSS and JS

There has been a number of packages added to our package.json file, including Alpine.js and TailwindCSS.

Now, let's refresh our homepage and note the two new entries in the upper right corner of our layout, namely log in and register.

If we go to our login page, we notice the layout is broken. That's because we did not compile Breeze's assets into our own yet.

To do that, we first install our JavaScript dependencies by typing in the following command in our terminal:

npm install

Then we compile all our assets, including Breeze's, by running the dev script:

npm run dev

Let's now come back to our login page and refresh it to see it working correctly and beautifully styled.

Congratulations! You now have a perfectly working and styled authentication system for your Laravel application ready to go 😎.

By all means, feel free to customize your new authentication system in any way you see fit. You should really consider updating the styles of the layout and the emails to match your branding.

Resources

• Official documentation
• GitHub
• Codecourse