LARAVEL

Un mot de passe est plus facile à oublier qu’à retenir, d’autant qu’on en est littéralement submergé ! Toute application avec une authentification doit prévoir ce genre de situation et donner la possibilité aux utilisateurs de se sortir de ce mauvais pas. Le plus simple est de leur permettre de créer un nouveau mot de passe. Laravel est équipé pour cela et nous allons le voir dans ce chapitre.

Le présent article est une suite du précédent et il faut avoir mis en place ce qui concerne l’authentification avec l'installation du starter kit livewire.

La base de données

Avec les migrations réalisées dans le chapitre précédent, il y a la table password_reset_tokens dans notre base :

Schema::create('password_reset_tokens', function (Blueprint $table) {
    $table->string('email')->primary();
    $table->string('token');
    $table->timestamp('created_at')->nullable();
});

On voit qu’on va mémoriser ici l’adresse email, le jeton token et le timestamp (par défaut les jetons sont valables pendant une heure). On trouve ces réglages dans le fichier config/auth.php :

'passwords' => [
    'users' => [
        'provider' => 'users',
        'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
        'expire' => 60,
        'throttle' => 60,
    ],
],

Première étape : la demande

Pour l’utilisateur, la première étape va consister à cliquer sur le lien « Forgot your password? » prévu sur la vue de connexion :

On active cette route :

Volt::route('forgot-password', 'auth.forgot-password')
    ->name('password.request');

Et on appelle ce composant Volt :

Avec un formulaire qui a cet aspect :

On demande l’adresse email à l’utilisateur. Après la soumission apparaît ce message :

Pour les curieux, la vérification de l'existence effective d'un compte avec l'email saisi se fait dans Illuminate\Auth\Passwords\Passwordbroker.php.

Voici l'email reçu si le compte existe :

L’envoi de l’email se fait avec un système de notification dont je vous parlerai dans un prochain article.

Dans la table, un jeton (token) a été généré. Il sera ainsi possible de vérifier la provenance de la demande.

Deuxième étape : le renouvellement

Lorsqu'on clique sur le lien de la notification on est dirigé sur cette route :

Volt::route('reset-password/{token}', 'auth.reset-password')
    ->name('password.reset');

Et ce composant Volt :

Ce composant affiche ce formulaire :

À la soumission, on commence par une validation :

$this->validate([
    'token' => ['required'],
    'email' => ['required', 'string', 'email'],
    'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
]);

Ensuite, on procède au changement du mot de passe. Enfin, si tout va bien, on renvoie sur la page de connexion avec un message :

En résumé

• Un système complet de renouvellement du mot de passe est prévu. Avec ses routes et ses composants, en ajoutant le starter kit livewire.
• Le renouvellement se fait en deux étapes : une demande qui reçoit une réponse sous forme d’email sécurisé avec un jeton (token) puis une soumission du nouveau mot de passe avec un formulaire.