Use Laravel Breeze to help build user authentication

Introduction

Laravel Breeze is a package that can be added to your project which provides example pages for authentication, login and user account handling. You can set up the kit to generate pages with Blade, Inertia and Livewire, also this example also uses TailwindCSS instead of standard CSS.

How to setup

Create a new Laravel project, I’ve named it “laravel-breeze”.

composer create-project laravel/laravel laravel-breeze

Change the current directory into the new project.

cd laravel-breeze

Use composer to add the Breeze package to your project.

composer require laravel/breeze --dev

Use the artisan command to install the package.

php artisan breeze:install

You will get prompted with questions with options that can be selected.

Below are the questions with the options I selected.

Which Breeze stack would you like to install?

Blade with Alpine

Would you like dark mode support?

Yes

Which testing framework do you prefer

Pest

Start up the app by using the artisan serve command

php artisan serve

Now go to the URL provided to load the app in your web browser, the URL would typically be the following…

http://localhost:8000

Breeze app

Loading the main URL will show you the following Laravel default page, you will notice there are two links in the top right corner that link to the breeze pages. Click the register to go to that page to begin using it.

home-page-2.png

On the register page fill in the registration form and then press the Register button to create the test user.

register-2.png

After registering the user you will automatically logged in and taken to the dashboard page which is only accessible when you are logged in. If you to try and access it when not logged in you will be redirected to the login page.

dashboard-2.png

After logging off you can use the login page to get access back to the dashboard page again.

login-2.png

On the dashboard page click your name in the top right hand corner to show the dropdown menu, click the Profile option.

menu-3.png

On the profile page you can edit the user account details, password or delete the account itself.

profile-2.png

Go to the direct link http://localhost:8000/verify-email to view the verify email page, click the Resend Verification Email button to use this feature which will send a test email out.

verify-email-2.png

The email will be sent to your log file, the name of the file is laravel.log file located in the storage/logs directories.

To verify your email copy the verify-email link from the email message, paste it into your browser and your user account will be marked as authenticated.

You can to see that your user account is verified by using your SQL client to view the user database table and checking the row representing the current user you are logged into.

email-2.png

Breeze code

You want to explore the breeze code to see how the features are coded as they are great examples to help you build the same features in your own projects.

Go to the auth.php file located inside the routes folder to see all the links available which would help you see what features Breeze provides.

Here is a list of the features available that can be used as examples for your own usage…

  • Register
  • Login
  • Forgot password
  • Password reset
  • Verify Email
  • Update password
  • Delete account
  • Logout

You can see which controllers link to the above features more easily and see the code within these controller files to help you identify how these features are built with laravel.

Conclusion

Laravel Breeze is a plugin that can be added to your Laravel project and a great way to learn about how to do the following…

  • Register a user account
  • Login to an existing user account
  • Use a forgot password form to retrieve password
  • Restrict access to pages for logged in users only
  • Update your password
  • Deleting your current account

Also breeze allows you to setup the above features in the following technologies to help you learn more about them…

  • Blade
  • Alpine.js
  • Inertia
  • Livewire
  • TailwindCSS