In dit artikel vertellen we je over de mogelijkheden van Laravel Breeze, vergelijken we het met andere Laravel starterkits, en leiden we je door het installatieproces. Verder verkennen we gegenereerde bestanden, passen we de registratieflow, en passen we de UI (gebruikersinterface) aan zodat ze beter bij de behoeften van je project aansluiten.

Wat is Laravel Breeze

Laravel Breeze is een authenticatiepakket voor Laravel. Hiermee kun je in enkele minuten een volledig werkend inlog- en registratiesysteem maken. Het ondersteunt Blade, Vue en React en beschikt zelfs over een API versie.

De belangrijkste kenmerken van Laravel Breeze zijn:

  • Inloggen
  • Registratie
  • Wachtwoordreset
  • E-mailverificatie
  • Profielpagina, met bewerkingsmogelijkheden

Een veelgestelde vraag is wanneer je nou moet kiezen voor Breeze en wanneer voor andere Laravel authenticatiepakketten.

Er zijn twee vergelijkbare pakketten in het Laravel ecosysteem, wat verwarrend kan zijn als je nieuw bent in deze ruimte.

De eerste is Laravel Fortify dat een headless authenticatie backend is, wat het ideaal maakt voor het bouwen van custom authenticatiesystemen zonder een vooraf gebouwde UI.

Kies Fortify als je een zeer aangepaste UI zoekt hebt of als je alleen verantwoordelijk bent voor de backend van de authenticatie.

Het andere pakket is Laravel Jetstream dat een meer geavanceerd uitgangspunt biedt voor Laravel applicaties, inclusief features als twee-factor authenticatie en teambeheer.

Laravel Breeze is daarentegen het meest geschikt voor developers die op zoek zijn naar een eenvoudige maar aanpasbare authenticatiescaffold met ondersteuning voor verschillende frontend frameworks en minimale overhead.

Laravel Breeze installeren in een nieuw Laravel project

Om het eenvoudig te houden, gaan we ervan uit dat we al een nieuw Laravel project hebben gemaakt, als je daar hulp bij nodig hebt kun je deze gids volgen om een nieuwe Laravel applicatie op te zetten bij Kinsta.

Daarna moeten we Laravel Breeze installeren met het volgende commando:

composer require laravel/breeze --dev

In deze tutorial zullen we Blade gebruiken, wat de standaard templating engine is voor Laravel. Om de scaffold te starten voer je deze commando’s uit:

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

Laravel Breeze heeft ook Vue / React / custom API versies, om die te gebruiken hoef je alleen maar een flag in het commando te zetten.

Voor Vue voer je uit:

php artisan breeze:install vue

Voor React run

php artisan breeze:install react

Voor aangepaste API run

php artisan breeze:install api

Na de installatie van Laravel Breeze zul je merken dat er verschillende bestanden zijn gegenereerd in je projectdirectory. Deze bestanden bevatten routes, controllers en views die authenticatie, wachtwoord reset en e-mail verificatie afhandelen. Je kunt deze bestanden verkennen en aanpassen aan de eisen van je applicatie.

De UI aanpassen

Laravel Breeze gebruikt TailwindCSS onder de motorkap, om de UI aan te passen kunnen we elke Tailwind utility class gebruiken.

Je kunt elk deel van de UI aanpassen door de view bestanden in de map resources/views/auth; te bewerken, een deel van de UI is georganiseerd in Blade componenten, deze kun je vinden in de map resources/views/components.

Het Laravel logo veranderen in het logo van onze organisatie

Laravel Breeze gebruikt Blade componenten om codes te organiseren die meerdere keren worden gebruikt. Zo kun je bijvoorbeeld hier het logo in het bestand resources/views/components/application-blade.php veranderen.

Open het bestand en vervang de huidige inhoud door je svg-bestand.

De kleur van de primaire knop veranderen
De kleur van de primaire knop veranderen

Open het bestand resources/views/components/primary-button.blade.php. Je kunt hier alle wijzigingen aanbrengen, zoals de knop van je inlogpagina aanpassen aan de kleur van je merk.

De primaire knop veranderd in de kleur van je merk
De primaire knop veranderd in de kleur van je merk

De registratieflow aanpassen

De Laravel Breeze aanmeldpagina wordt geleverd met 4 voorgedefinieerde velden:

  1. Naam
  2. E-mail
  3. Wachtwoord
  4. Wachtwoordbevestiging
Voorgedefinieerde velden registratiepagina
Voorgedefinieerde velden registratiepagina

Om de velden uit te breiden die we in ons registratieformulier willen hebben, moeten we het bestand resources/views/auth/register.blade.php openen.

Om door te gaan met ons voorbeeld, maken we een telefoonveld na het e-mailveld. Om dit voor elkaar te krijgen voegen we de volgende code toe na het e-mailveld:

<div class="mt-4">
   <x-input-label for="phone" :value="__('Phone')" />
   <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required autocomplete="phone" />
   <x-input-error :messages="$errors->get('phone')" class="mt-2" />
</div>

Het telefoonveld is nu zichtbaar in het registratieformulier.

Telefoonveld toegevoegd
Telefoonveld toegevoegd

De backend aanpassen om het nieuwe telefoonveld op te slaan

We moeten nu de nieuwe gegevens verwerken in de backend. Daarvoor zijn drie stappen nodig: eerst een nieuwe migratie maken en uitvoeren, dan logica toevoegen aan de controller om de gegevens op te slaan, en tenslotte phone toevoegen aan de invulbare properties in het User model.

Maak een nieuwe migratie die een telefoonveld toevoegt aan onze users tabel.

php artisan make:migration add_phone_field_to_users_table

Open het aangemaakte bestand en voeg een stringveld toe met de naam ‘phone’:

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

Voer daarna de migratie uit:

php artisan migrate

Om het telefoonveld op te slaan moeten we de RegisteredUserController.php aanpassen , in de methode store deze wijzigingen aanbrengen:

$request->validate([
   'name' => ['required', 'string', 'max:255'],
   'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
   ‘phone’ => [‘required’, ‘string’, ‘max:255’],
   'password' => ['required', 'confirmed', RulesPassword::defaults()],
]);

$user = User::create([
   'name' => $request->name,
   'email' => $request->email,
   ‘phone’ => $request->phone,
   'password' => Hash::make($request->password),
]);

Vergeet niet het veld phone toe te voegen aan de invulbare properties in het User model.

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

Dat is het, nu hebben we ons eigen registratieformulier!

E-mailverificatie inschakelen

E-mailverificatie is het proces van het controleren en verifiëren van e-mails die gebruikers hebben opgegeven in het registratieformulier.

Om deze functie in te schakelen moeten we de interface MustVerifyEmail implementeren in ons User model.

use Illuminate\Contracts\Auth\MustVerifyEmail;
…

class User extends Authenticatable implements MustVerifyEmail
{
…
}

Daarna zal een e-mail worden verzonden wanneer een gebruiker zich registreert met een link om zijn e-mail te verifiëren.

We moeten echter nog een middleware toevoegen aan onze routes waar we de toegang willen beperken tot niet-geverifieerde gebruikers.

We maken een nieuwe route genaamd ‘only-verified’ en voegen daar ‘auth’ en ‘verified’ middleware aan toe. De auth middleware voorkomt toegang voor gasten en de verified middleware controleert of de gebruiker zijn e-mail heeft geverifieerd.

Hier is een voorbeeld:

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

Samenvatting

Laravel Breeze is een geweldige tool om snel een authenticatiesysteem op te zetten voor je Laravel project.

Met zijn eenvoudige maar aanpasbare scaffolds kun je je richten op het bouwen van je app zonder je zorgen te maken over het authenticatieproces.

Als je op zoek bent naar een plek om je nieuwe Laravel applicatie te hosten, kijk dan eens naar onze Laravel hostingoplossing met zijn krachtige features die het deployen en beheren van apps snel en gemakkelijk maken.