authentication in Laravel Using Breeze (r)

Jun 3, 2023
A computer monitor setup so someone can learn about laravel breeze

Send the news to

The article below will go through the functions of Laravel Breeze, examine it against the other Laravel start-up kits and then assist you in the procedure of installation. In addition, we'll look into created files, modify the registration process, and also tweak the user interface (user interface) in order to satisfy your particular application's requirements.

What exactly is Laravel Breeze?

The main aspects of Laravel Breeze are:

  • Log in
  • Registration
  • Password reset
  • Verification of emails
  • Page for editing your profile

Two programs similar to each other are offered in the Laravel ecosystem, which may cause confusion if not familiar with the Laravel ecosystem.

You should consider Fortify if you're dealing with very custom UI requirements or if you're just accountable for backend authentication.

However, Laravel Breeze is best suited for developers looking for an incredibly simple, but adaptable authentication framework that can be used of various front-end frameworks and at a low cost for operation.

The installation of Laravel Breeze as a Fresh Laravel Project

Then, we'll be required to install Laravel Breeze with the following instructions:

composer require laravel/breeze --dev

In this guide, we will use Blade which is the default templating engine that is used by Laravel. In order to start scaffolding, execute these commands:

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

Laravel Breeze also has Vue React and Custom APIs, and to access the APIs, all you need to do is include an option within the command.

For Vue run:

Artisan breeze PHP: Install the vue

For React run

React: Install php's artisan breeze

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.

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

Changing the Color of the Primary Button
Change the color of the Button's Primary Button

Open the resources/views/components/primary-button.blade.php file. It is possible to make modifications by modifying the buttons that appear on your login page, according to the colors of your brand.

Primary button changed to brand color
The main button was changed to a brand-new color

What can I do to customize the registration Flow

The Laravel Breeze registration page comes with 4 predefined fields:

  1. Name
  2. Email
  3. Password
  4. Password confirmation
Registration page predefined fields
Predefined fields on the page of registration

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

In order to continue our examples for a different one telephone field, we'll place it after an email field. For this to happen, simply add the following code following the email field.

The telephone field is evident in your registration forms.

Phone field added
A phone field is was added

Modifying the Backend to save the Phone Field

We now need to handle all of the information that has been transferred to the backend. This involves three steps: first, develop and then run an entirely new model adding logic to the controller which stores the data. And finally, add phones to the attributes that are completed in the model of the user model.

Make a new transfer that includes a telephone field to our database of users. table.

php artisan make:migration add_phone_field_to_users_table

Access the file by adding the field with the name 'phone'

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

After that, you are able to perform 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 telephone field into those properties that you can fill in on the Model of the User.

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

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

How can I turn on Email Verification

The process of email verification is based on the verification and checking of the email addresses that users have provided in the registration form.

In order to enable this feature, we need to implement the "MustVerifyEmail" Interface within the user model.

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

A subsequent email will be sent out after a person signs on using the link which confirms their email.

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

We'll create a brand new route called 'only-verified' and we will add "auth" as well as "verified" middleware. The middleware that blocks auth access will be blocked to guests, while the verified middleware determines whether the user has been authenticated by their email.

This is an example:

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

Summary

Laravel Breeze is an excellent tool for quickly setting up the authentication process for you Laravel project.

Thanks to its user-friendly and flexible structure, you're in a position to concentrate on creating the app without having to worry about authentication.

Article was first seen on here