Laravel Breeze Tutorial: The Definitive Guide (2021)

Outline Takeaway

• Introduction
• What is Laravel Breeze?
• Overview of Laravel Authentication features.
• Installation
• Discuss Login
• Discuss registration
• Discuss password reset
• Discuss email verification
• Discuss password confirmation

Introduction

Laravel 8 brought in many improvements to Laravel and a lot more packages to learn and master.

One of the most notable packages is the Laravel Breeze, a beautifully designed application start kit for Laravel 8, and it comes with the implementation of authentication and authorization.

If you’ve used Laravel Jetstream before, you will notice that it is a little overwhelming and has a stiff learning curve.

Hence, Laravel Breeze was developed to get you set up quickly and more straightforward.

In this article, we will explore everything you need to master Laravel Breeze. We will look at the installation guide and discuss the different authentication processes generated with Laravel Breeze. In the end, you will be comfortable using Laravel Breeze.

A more updated version of this article can be found here.

What is Laravel Breeze

Laravel Breeze is the new Laravel Auth scaffolding that comes with even more features and simplicity. Laravel Breeze comes inbuilt with all the Laravel authentication features plus our beloved Tailwind CSS styling and styled blade templates.

Overview of Laravel Authentication features

Laravel breeze creates all the controllers, routes, and views needed to set up and configure authentication features such as login, registration, forgot password, reset password, email verification, and password confirmation.

One of the differences between Laravel Breeze and others is Tailwind CSS's introduction right from the box.

Also, Laravel has introduced many application starter kits, confusing to know which one is used for what.

Let us explore a little of each of them:

Laravel JetStream

Laravel JetStream is a more robust application scaffolding with more features and additional frontend technology stacks.

Laravel JetStream is a complete application and authentication scaffolding with added features such as two-factor authentication, session management, optional team management, including all the Laravel breeze features.

It is also designed with Tailwind CSS, and you can either choose inertia or livewire for the frontend scaffolding.

You can learn more about Laravel Jetstream here.

Laravel Sanctum

Laravel Sanctum is an authentication scaffolding for single-page applications (SPAs) and APIs.

Laravel Sanctum solves two specific problems: managing API tokens by issuing tokens to users using OAuth and SPAs by Laravel’s built-in cookie-based session authentication services to authenticate SPAs.

You can read more about Laravel Sanctum here.

Next, we will explore Laravel Breeze and how the authentication process works:

Laravel Breeze Installation

To install Laravel Breeze, you need to have installed and configured Laravel; you can read through the Laravel Tutorial: The ultimate guide 2021.

If you already have Laravel installed, let’s run the following scripts to install and set up Laravel Breeze.

composer require laravel/breeze --dev

php artisan breeze:install

npm install

npm run dev

php artisan migrate

That’s all you need to do:

Explaining the Login Flow

The login flow from Laravel Breeze is quite an easy one with modernity and a clean code principle applied to it.

Let’s work through how the login flow is built:

First, goto resources/views/auth/login.blade.com to see the content of the login form developed and styled with Tailwind CSS, you can, of course, customize it to fit your design.

When the submit button is clicked, the request is sent from the new routes/auth.php file /login route down to the storemethod of the new AuthenticatedSessionController.php file in the ../Controllers/Authfolder.

If you look at the storemethod, a lot has changed, but the main login and validation logic is found under the $request->authenticate()method which is located under app/Http/Requests/Auth/LoginRequest.php

You can study the codebase very well, but it just validates the user and attempts to authenticate a user.

Explaining the Registration Flow

The registration flow and logic are pretty simple and straightforward to understand.

First, goto resources/views/auth/register.blade.com to see the registration form content developed and styled with Tailwind CSS, you can customize it or add more input fields to fit your design.

When the submit button is clicked, the request is sent from the new routes/auth.php file /register route down to the storemethod of the new RegisteredUserController.php file in the ../Controllers/Authfolder.

The storemethod validate the user inputs and create a new user based on the information provided.

/**
     * Handle an incoming registration request.
     *
     * [@param](http://twitter.com/param) \Illuminate\Http\Request $request
     * [@return](http://twitter.com/return) \Illuminate\Http\RedirectResponse
     *
     * [@throws](http://twitter.com/throws) \Illuminate\Validation\ValidationException
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|confirmed|min:8',
        ]);

Auth::login($user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]));

event(new Registered($user));

return redirect(RouteServiceProvider::HOME);
    }

You can customize the code to accommodate your custom input fields.

Explaining Password Reset Flow

The password reset logic is the same as before, but the few difference is that the password reset email is sent from ../Controllers/Auth/PasswordResetLinkController.phpunder the storemethod.

public function store(Request $request)
    {
        $request->validate([
            'email' => 'required|email',
        ]);
        $status = Password::sendResetLink(
            $request->only('email')
        );

return $status == Password::RESET_LINK_SENT
                    ? back()->with('status', __($status))
                    : back()->withInput($request->only('email'))
                            ->withErrors(['email' => __($status)]);
    }

Next, when the user clicks the link from their email, Laravel shows a form to fill in the new password, on submitting, the request is sent to store method under NewPasswordController.php where it is handled.

You can take a glance at how Laravel handles the logic.

Explaining Email Verification Flow

Handling Email verification with Laravel breeze is very elegant; once Send or Resend email verification button is clicked, Laravel calls the storemethod in EmailVerificationNotificationController.php to send out the verification link.

Laravel sends the request to VerifyEmailController.php and calls the __invokemagic method to perform the verification when the link is clicked.

Explaining Password Confirmation Flow

Laravel Breeze introduces a new authentication feature called Password Confirmation.

With this new feature, you can allow users to confirm their password before performing that dangerous actions like changing passwords, delete their account, withdrawal from a wallet, etc.

Let’s explore the logic flow:

A confirm password form is created under resources/views/auth/confirm-password.blade.phpasking for your password input.

The request is sent to the store method under,../Controllers/Auth/ConfirmablePasswordController.phpwhere the logic is written.

There you have it, a walk-through of Laravel Breeze, the newly created controllers, routes, and views and what they do and where to find any logic during the authentication process.

Conclusion

A more updated version of this article can be found here.

So far, we have explored Laravel Breeze and explained the different authentication flows and where to find the different logics.

The newly introduced authentication feature is an essential feature to protect a secured area or restricted actions.