Laravel Breeze : implémenter l'authentification

L'authentification et Laravel Breeze

L'authentification pour une application web est un processus permettant à l'application de s'assurer de la légitimité de la demande d'accès faite par une entité (un utilisateur, un client ou un système, ...) afin d'autoriser l'accès de cette entité à des ressources de l'application.

Pour développer plus rapidement une application web, le framework PHP Laravel propose des kits (Breeze et Jetstream) pour mettre en place les routes, les contrôleurs, les vues et d'autres ressources dont on a besoin pour enregistrer et authentifier les utilisateurs de l'application.

Laravel Breeze ou laravel/breeze est un package qui implémente les fonctionnalités d'authentication de Laravel. Il met en place les routes, les contrôleurs et les vues pour :

• Enregistrer un nouvel utilisateur avec un nom, une adresse email et un mot de passe
• Connecter un utilisateur avec une adresse email + mot de passe
• Récupérer le mot de passe d'un utilisateur
• Vérifier l'adresse email d'un utilisateur
• Déconnecter un utilisateur
• ...

Breeze utilise le moteur de template Blade pour les vues et Tailwind CSS pour le style CSS. Il propose également une implémentation d'Inertia.js pour travailler avec VueJS et ReactJS.

Nous voulons voir dans ce guide comment installer et utiliser laravel/breeze pour l'authentification des utilisateurs dans un projet Laravel.

👉 Voir aussi : créer un projet Laravel avec Laragon

Installer Laravel Breeze

Avant d'installer laravel/breeze, nous devons nous assurer d'avoir importé la table « users » ou migré database/migrations/..._create_users_table.php dans la base de données en exécutant la commande php artisan migrate. Breeze utilise la table users :

Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->timestamp('email_verified_at')->nullable();
    $table->string('password');
    $table->rememberToken();
    $table->timestamps();
});

Pour installer laravel/breeze dans un projet Laravel, on exécute la commande composer suivante :

composer require laravel/breeze

Une fois laravel/breeze installé avec composer, on l'implémente dans l'application en exécutant la commande artisan suivante :

php artisan breeze:install

Cette commande installe les contrôleurs, les vues, les routes et d'autres ressources de Breeze pour l'authentification des utilisateurs.

Les routes

Breeze insère la route nommée « dashboard » (tableau de bord) puis inclut le fichier /routes/auth.php où sont définits ses routes dans le fichier /routes/web.php :

// Les routes de laravel/breeze

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

require __DIR__.'/auth.php';

En exécutant la commande php artisan route:list, nous pouvons voir les nouvelles routes :

Les assets CSS et JavaScript

Nous pouvons voir les modules Node que Breeze apporte au fichier /packages.json :

"devDependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "alpinejs": "^3.4.2",
    "autoprefixer": "^10.1.0",
    "postcss": "^8.2.1",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^2.0.2"
},

Pour le style CSS, Tailwind CSS est importé au fichier /resources/css/app.css :

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Alpine.js est importé au fichier /resources/js/app.js :

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

Notez-bien : Vous pouvez commenter les lignes d'intégration de Tailwind CSS et Alpine JS si vous ne souhaitez pas les utiliser tout en sachant que les vues (templates Blade) de Breeze les utilisent.

Pour finalement installer puis compiler les assets CSS et JavaScript, on exécute les commandes npm suivantes :

npm install
npm run dev

Utiliser Laravel Breeze

Exploitons à présent les fonctionnalités que Breeze intègre en supposant que l'adresse de notre application web est « exemple.com ».

L'inscription : register

La page d'inscription exemple.com/register permet à un utilisateur de s'enregistrer en entrant un nom, une adresse email, un mot de passe et la confirmation du mot de passe :

La présentation de la page vient de la vue /resources/views/auth/register.blade.php.

La connexion : login

La page de connexion exemple.com/login permet à un utilisateur de se connecter en utilisant son adresse email et son mot de passe pour accéder au dashboard (tableau de bord) :

La présentation de la page vient de la vue /resources/views/auth/login.blade.php.

Le tableau de bord : dashboard

Une fois connecté avec une adresse email et un mot de passe, l'utilisateur est rédigé vers le tableau de bord exemple.com/dashboard :

La présentation de la page vient de la vue /resources/views/dashboard.blade.php. Lorsqu'on clique sur le nom d'utilisateur du compte, le menu déroulant affiche le bouton Log Out pour se déconnecter.

La récupération du mot de passe : forgot-password

Lorsqu'un utilisateur perd ou oublie son mot de passe, il peut le récupérer (le modifier) en se rendant à l'adresse exemple.com/forgot-password pour entrer son adresse email :

La présentation de la page vient de la vue /resources/views/auth/forgot-password.blade.php.

L'utilisateur reçoit ensuite cet e-mail avec le lien Reset Password pour modifier son mot de passe :

Il faudra configurer le service d'envoi de mail dans votre application pour que ce mail soit envoyé. 

👉 Voir aussi : Envoyer un mail via le serveur SMTP Google

Portez-vous bien ! 😉