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.