tags: Laravel, Breeze, authentication, web development

This tutorial is part of the Laravel Handbook. Download it from here.

When building a website, it’s important to have a secure authentication system in place. Laravel, a popular PHP framework, provides built-in authentication support. To make the authentication setup even easier, Laravel offers a package called Breeze.

What is Laravel Breeze?

Laravel Breeze is an application starter kit tool that scaffolds user registration, login, password reset, profile page, dashboard, and even API authentication. It simplifies the authentication setup process and saves developers a significant amount of time.

Setting up Laravel Breeze

To get started, you’ll need to create a new Laravel project. Open your terminal and navigate to the desired directory. Run the following command to create a new Laravel project:

composer create-project laravel/laravel second

Navigate into the project folder:

cd second

Next, install Breeze using Composer:

composer require laravel/breeze --dev

Once Breeze is installed, run the following command to install Breeze and choose the “blade” option when prompted:

php artisan breeze:install

You can now start the development server by running the command:

php artisan serve

Open your browser and visit http://127.0.0.1:8000/. You should see the “Log in” and “Register” links.

Exploring Laravel Breeze

Laravel Breeze generates a ton of resources out of the box to handle authentication. This includes routes, controllers, views, and more. It saves developers from writing this boilerplate code themselves.

Take a moment to examine the file structure of your Laravel project. You’ll notice new files and folders related to authentication, such as views.

To continue setting up the project, we need to configure the database. Open the .env file and comment out the lines related to the MySQL database configuration. Then, add the following line to configure the SQLite database:

DB_CONNECTION=sqlite

Save the file and run the migrations to create the necessary tables:

php artisan migrate

Next, open another terminal window and navigate to the project folder. Run the following commands to install the frontend dependencies and compile the assets:

npm install
npm run dev

Make sure you’re running these commands in the correct project folder, as explained above.

Customizing the Welcome Page

Laravel Breeze uses the Tailwind CSS framework for styling. The setup for Tailwind CSS is done automatically during the Breeze installation process. You can find the tailwind.config.js file in your project.

To customize the welcome page, open the resources/views/welcome.blade.php file. Replace the entire content of the file with the following code:

<!doctype html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 @vite('resources/css/app.css')
</head>

<body class="p-4">

 @if (Route::has('login'))
 <div class="text-right">
 @auth
 <a href="{{ url('/dashboard') }}" class="">Dashboard</a>
 @else
 <a href="{{ route('login') }}" class="">Log in</a>
 @if (Route::has('register'))
 <a href="{{ route('register') }}" class="ml-4">Register</a>
 @endif
 @endauth
 </div>
 @endif

 <h1 class="pb-2 mb-3 font-bold border-b border-b-gray-300">
 Dogs
 </h1>

 <div>
 @auth
 <p>Logged in</p>
 @endauth

 @guest
 <p>Not logged in</p>
 @endguest
 </div>

</body>

</html>

This modified welcome page will display a “Log in” and “Register” link if the user is not logged in. If the user is logged in, it will show a “Dashboard” link instead.

Save the file and refresh the browser. You should now see the updated welcome page.

Conclusion

Setting up authentication in Laravel using Breeze is straightforward and saves developers a significant amount of time. Breeze provides a complete authentication system with minimal effort. By following the steps in this tutorial, you have successfully set up authentication using Laravel Breeze.