• Laravel
  • Breeze
  • Authentication

Authenticate users in your Laravel app using Laravel Breeze

Learn how to authenticate users in your Laravel app using Laravel Breeze.

Last updated May 24, 2021

Laravel Breeze logo

Article

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.

Breeze used to leverage Alpine.js to add some interactivity, but it has since been improved and now also offers an Inertia.js implementation for us to use instead.

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.

Terminal
php artisan migrate

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

Terminal
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:

Terminal
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:

web.php
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.

web.php
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:

Terminal
npm install

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

Terminal
npm run dev

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

Check to see if you're using the latest LTS version of Node.js if you experience issues compiling the assets. Also, deleting your node_modules directory and re-installing it might also help in the majority of cases.

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


Author

Célien Boillat

Full stack web developer