Authentification dans Laravel avec Breeze

Cet article présente les caractéristiques de Laravel Breeze, le compare à d’autres kits de démarrage Laravel et vous guide tout au long du processus d’installation. En outre, nous explorerons les fichiers générés, nous personnaliserons le flux d’enregistrement et nous ajusterons l’interface utilisateur pour répondre aux besoins de votre projet.

Qu’est-ce que Laravel Breeze ?

Laravel Breeze est un paquetage d’échafaudage d’authentification pour Laravel. En l’utilisant, vous pouvez avoir un système de connexion et d’enregistrement entièrement fonctionnel en quelques minutes. Il prend en charge Blade, Vue et React et dispose également d’une version API.

Les principales caractéristiques de Laravel Breeze sont les suivantes :

• Connexion
• Inscription
• Réinitialisation du mot de passe
• Vérification de l’e-mail
• Page de profil, avec édition

Une question fréquemment posée est de savoir quand choisir Breeze et quand utiliser d’autres solutions d’authentification Laravel.

Il existe deux packages similaires dans l’écosystème Laravel, ce qui peut être déroutant si vous êtes nouveau dans ce domaine.

Le premier est Laravel Fortify qui est un backend d’authentification headless, ce qui le rend idéal pour construire des systèmes d’authentification personnalisés sans interface utilisateur prédéfinie.

Choisissez Fortify si vous avez des besoins d’interface utilisateur très personnalisés ou si vous n’êtes responsable que du backend de l’authentification.

L’autre paquet est Laravel Jetstream qui offre un point de départ plus avancé pour les applications Laravel, y compris des fonctionnalités telles que l’authentification à deux facteurs et la gestion d’équipe.

En revanche, Laravel Breeze convient mieux aux développeurs qui recherchent un échafaudage d’authentification simple mais personnalisable, avec un support pour divers frameworks frontend et une surcharge minimale.

Installation de Laravel Breeze dans un nouveau projet Laravel

Pour rester simple, supposons que nous avons déjà créé un nouveau projet Laravel. Si vous avez besoin d’aide, vous pouvez suivre notre guide pour configurer une nouvelle application Laravel chez Kinsta.

Après cela, nous devons installer Laravel Breeze avec la commande suivante :

composer require laravel/breeze --dev

Dans ce tutoriel, nous utiliserons Blade qui est le moteur de templating par défaut pour Laravel. Pour démarrer l’échafaudage, exécutez les commandes suivantes :

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

Laravel Breeze a également des versions Vue / React / custom API, pour les utiliser il suffit de mettre un drapeau dans la commande.

Pour Vue, exécutez :

php artisan breeze:install vue

Pour React, exécutez

php artisan breeze:install react

Pour l’exécution d’une API personnalisée

php artisan breeze:install api

Après avoir installé Laravel Breeze, vous remarquerez que plusieurs fichiers ont été générés dans votre répertoire de projet. Ces fichiers incluent des routes, des contrôleurs et des vues qui gèrent l’authentification, la réinitialisation du mot de passe et la vérification de l’e-mail. Vous pouvez explorer ces fichiers et les personnaliser en fonction des besoins de votre application.

Comment personnaliser l’interface utilisateur

Laravel Breeze utilise TailwindCSS sous le capot, pour personnaliser l’interface utilisateur, nous pouvons utiliser n’importe quelle classe utilitaire Tailwind.

Vous pouvez personnaliser chaque partie de l’interface utilisateur en éditant les fichiers de vue dans le dossier resources/views/auth; certaines parties de l’interface utilisateur sont organisées en composants Blade, vous pouvez les trouver dans le dossier resources/views/components.

Remplacement du logo Laravel par le logo de notre organisation

Laravel Breeze utilise les composants Blade pour organiser les codes utilisés plusieurs fois. Par exemple, voici comment vous pouvez changer le logo dans le fichier resources/views/components/application-blade.php.

Ouvrez le fichier et remplacez le contenu actuel par votre fichier svg.

Ouvrez le fichier resources/views/components/primary-button.blade.php. Vous pouvez y apporter n’importe quelle modification, par exemple personnaliser le bouton de votre page de connexion à la couleur de votre marque.

Comment personnaliser le flux d’inscription

La page d’inscription de Laravel Breeze est livrée avec 4 champs prédéfinis :

1. Nom
2. E-mail
3. Mot de passe
4. Confirmation du mot de passe

Pour étendre les champs que nous souhaitons voir figurer dans notre formulaire d’inscription, nous devons ouvrir le fichier resources/views/auth/register.blade.php.

Pour continuer avec notre exemple, nous allons créer un champ téléphone après le champ e-mail. Pour ce faire, ajoutez le code suivant après le champ e-mail :

<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>

Le champ téléphone est maintenant visible dans le formulaire d’inscription.

Modifier le backend pour stocker le nouveau champ téléphone

Nous devons maintenant gérer les nouvelles données dans le backend. Cela nécessite trois étapes : d’abord, créer et exécuter une nouvelle migration, puis ajouter de la logique au contrôleur pour stocker les données, et enfin, ajouter phone aux propriétés remplissables dans le modèle User.

Créez une nouvelle migration qui ajoutera un champ téléphone à notre table users.

php artisan make:migration add_phone_field_to_users_table

Ouvrez le fichier créé et ajoutez un champ de type chaîne appelé « phone » :

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

Ensuite, exécutez la migration :

php artisan migrate

Pour stocker le champ téléphone, nous devons modifier la méthode RegisteredUserController.php, dans la méthode store faites ces 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', RulesPassword::defaults()],
]);

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

N’oubliez pas d’ajouter le champ phone aux propriétés remplissables du modèle User.

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

Voilà, nous avons maintenant le formulaire d’inscription modifié !

Comment activer la vérification des e-mails

La vérification des e-mails est le processus de vérification et d’authentification des e-mails que les utilisateurs ont fournis dans le formulaire d’inscription.

Pour activer cette fonctionnalité, nous devons implémenter l’interface MustVerifyEmail dans notre modèle User.

use IlluminateContractsAuthMustVerifyEmail;
…

class User extends Authenticatable implements MustVerifyEmail
{
…
}

Ensuite, un e-mail sera envoyé lorsqu’un utilisateur s’inscrit avec un lien pour vérifier son e-mail.

Cependant, nous devons encore ajouter un middleware à nos itinéraires lorsque nous voulons restreindre l’accès aux utilisateurs non vérifiés.

Nous allons créer une nouvelle route appelée « only-verified » et nous allons ajouter les middlewares « auth » et « verified ». Le middleware « auth » empêche l’accès aux invités et le middleware « verified » vérifie si l’utilisateur a vérifié son e-mail.

Voici un exemple :

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

Résumé

Laravel Breeze est un excellent outil pour mettre en place rapidement un système d’authentification pour votre projet Laravel.

Grâce à son échafaudage simple mais personnalisable, vous pouvez vous concentrer sur la construction de votre application sans vous soucier du processus d’authentification.

Si vous cherchez un endroit pour héberger votre nouvelle application Laravel, consultez notre solution d’hébergement Laravel avec ses puissantes fonctionnalités qui rendent le déploiement et la gestion des applications rapides et faciles.