authentication in Laravel Using Breeze (r)

Share the news on

The article below will go through the capabilities of Laravel Breeze, examine it against other Laravel start-up kits and then guide you through the installation process. Additionally, we'll explore generated files, customize the registration procedure as well as tweak the user interface (user interface) to meet your specific application's requirements.

What Is Laravel Breeze

The main aspects of Laravel Breeze are:

• Login
• Registration
• Password reset
• Verification of email
• Profil page with editing

Two similar programs are available in the Laravel ecosystem, which could cause confusion if you're new to this space.

You should consider Fortify if you're dealing with very custom UI needs or you're only responsible for the backend the authentication.

However, Laravel Breeze is best suited for developers looking for an easy, yet flexible authentication scaffold with support for different frontend frameworks, and with minimal cost of operation.

Installation of Laravel Breeze into a Fresh Laravel Project

Following that, we will need to install Laravel Breeze with the following instruction:

composer require laravel/breeze --dev

In this guide, we will use Blade which is the standard templating engine used by Laravel. To start the scaffolding run these commands:

php artisan breeze:install blade
 
 php artisan migrate
 npm install
 npm run dev

Laravel Breeze also has Vue / React / custom APIs, and to access the APIs you simply need to put an option in the command.

For Vue run:

PHP artisan breeze: Install the vue

For React run

php artisan breeze:install react

For custom API run

php artisan breeze:install an api

How to Customize the User Interface

You can customize every part of the UI by editing the view files in the resources/views/auth; folder, some part of the UI is organized into Blade components, you can find these in the resources/views/components folder.

Changing the Laravel Logo to Our Organization Logo

Laravel Breeze uses Blade components to organize codes used multiple times. So, for example, here's how you can change the logo in the resources/views/components/application-blade.php file.

Open the resources/views/components/primary-button.blade.php file. It is possible to make modifications by modifying the buttons on your login page to your brand's color.

How To Customize the Registration Flow

The Laravel Breeze registration page comes with 4 predefined fields:

1. Name
2. Email
3. Password
4. Password confirmation

To extend the fields we'd like our registration form to feature, we need to open the resources/views/auth/register.blade.php file.

To continue with our example to make another, we'll add telephone fields after an email field. To make this happen simply add the following code following the email field

The phone field is now evident in your registration forms.

Modifying the Backend in order to store the Phone Field

We now need to handle all the data that has been added to the backend. This requires three steps: first, develop and then run a brand new one, and then add logic to the controller that stores the data. Finally to add the phone to the properties that can be filled in the user model.

Make a new transfer that will add a phone field to our table of users. table.

php artisan make:migration add_phone_field_to_users_table

Make the new file accessible and then add a field titled 'phone'

Schema::table('users', function (Blueprint $table) 
 $table->string('phone')->nullable();
 );

Following that, you can run the migration:

php artisan migrate

To store the phone field we need to modify the RegisteredUserController.php, in the store method make these modifications:

$request->validate([
 'name' => ['required', 'string', 'max:255'],
 'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
 'phone' => ['required', 'string', 'max:255'],
 'password' => ['required', 'confirmed', Rules\Password::defaults()],
 ]);
 
 $user = User::create([
 'name' => $request->name,
 'email' => $request->email,
 'phone' => $request->phone,
 'password' => Hash::make($request->password),
 ]);

Don't forget to include the phone field to the fillable properties in the Model of the User.

protected $fillable = [
 'name',
 'email',
 'phone',
 'password',
 ];

This is it! We are able to use the updated registration application form!

How Do I Enable Email Verification

The process of email verification consists that checks and authenticates emails which users' have provided in the registration form.

To enable this feature we need to implement MustVerifyEmail Interface in our User model.

use Illuminate\Contracts\Auth\MustVerifyEmail;
 ...
 
 class User extends Authenticatable implements MustVerifyEmail
 
 ...
 

Then, an email will be issued when a user signs up using the link that confirms their email.

But, we need to add a middleware to our routes where we want to restrict access to unverified users.

We'll develop a new route called 'only-verified' and we will add "auth" and "verified" middleware. The auth middleware prevents access to guests while the verified middleware determines if the user is verified by their email.

Here's an example:

Route::get('/only-verified', function () 
 return view('only-verified');
 )->middleware(['auth', 'verified']);

Summary

Laravel Breeze is a fantastic instrument for rapidly setting the authentication process for you Laravel project.

Through its easy-to-use and flexible framework, you are able to focus creating your app and not having to worry about authentication.