Voici une description complète et intégrée du Module d’Authentification, regroupant les vues, le store et les services pour expliquer leur fonctionnement ensemble et leur rôle dans le flux d’authentification de l’application.

Module d’Authentification

Le module d’authentification gère toutes les fonctionnalités liées à l’accès utilisateur, incluant l’inscription, la connexion, la réinitialisation de mot de passe, la confirmation d’e-mail, et l’activation de compte. Ce module combine plusieurs éléments : les vues d’interface, le store pour la gestion de l’état, et les services pour les interactions avec l’API.

Vues d’Authentification

Les vues sont les interfaces visibles pour l’utilisateur et couvrent différents aspects du cycle d’authentification :

• SignIn.vue : Permet aux utilisateurs de se connecter en saisissant leur e-mail et mot de passe.

• SignUp.vue : Vue pour l’inscription des nouveaux utilisateurs, leur permettant de créer un compte.

• ActivateAccount.vue : Utilisée pour activer un compte utilisateur après l’inscription.

• PasswordReset.vue : Vue permettant de demander une réinitialisation de mot de passe.

• NewPassword.vue : Vue pour définir un nouveau mot de passe après avoir initié la réinitialisation.

• NewEmailConfirmation.vue : Permet la confirmation d’une nouvelle adresse e-mail pour les utilisateurs modifiant leur e-mail.

Ces vues capturent les données de l’utilisateur et appellent les actions du store d’authentification pour traiter les demandes auprès des services API.

Store d’Authentification (auth.ts)

Le store d’authentification utilise Pinia pour gérer l’état global de l’application concernant l’authentification de l’utilisateur. Il gère les informations de session, l’état d’authentification, et interagit avec les services API pour des actions telles que la connexion, l’inscription, la réinitialisation de mot de passe, et l’activation de compte.

État

• isAuthenticated : Booléen indiquant si l’utilisateur est connecté. Il est initialisé en fonction de la présence d’un token JWT stocké par JwtService.
• user : Objet User contenant les informations de l’utilisateur connecté, telles que le nom, le prénom, l’e-mail, et les tokens d’authentification.
• errors : Objet stockant les erreurs éventuelles rencontrées lors des actions d’authentification.

Actions principales

1. setAuth(authUser: User) : Met à jour l’état isAuthenticated et stocke les informations de l’utilisateur et les tokens JWT dans JwtService. Réinitialise également les erreurs.
2. setError(error: any) : Stocke les erreurs d’authentification dans l’état errors pour permettre une gestion des erreurs centralisée.
3. purgeAuth() : Réinitialise l’état d’authentification en supprimant le token JWT et les informations utilisateur. Déconnecte l’utilisateur de l’application.
4. login(credentials: User) :

• Envoie les informations de connexion (e-mail et mot de passe) au backend via ApiService.

• Si la connexion est réussie, l’action setAuth est appelée pour stocker le token JWT et les informations utilisateur.

• En cas d’échec, setError est appelée pour enregistrer les erreurs reçues du backend.

5. logout() : Déconnecte l’utilisateur en appelant purgeAuth, supprimant ainsi les informations de session et réinitialisant l’état.

6. register(credentials: User) :

• Envoie les informations d’inscription au backend pour créer un nouveau compte utilisateur.

• Si l’inscription est réussie, setAuth est appelée pour enregistrer l’utilisateur et le token JWT.

• En cas d’échec, setError stocke les erreurs reçues lors de l’inscription.

7. forgotPassword(email: string) :

• Envoie une requête pour initier la réinitialisation de mot de passe.

• En cas de succès, les erreurs sont réinitialisées via setError({}).

• En cas d’échec, les erreurs sont stockées pour une gestion centralisée.

8. activate(token: string) :

• Active le compte utilisateur en envoyant un token de validation au backend.

• Si l’activation réussit, setAuth est appelée pour enregistrer le token JWT et les informations utilisateur.

• En cas d’échec, les erreurs sont stockées via setError.

9. resetPassword:

• Envoie une demande de mise à jour du mot de passe avec un nouveau mot de passe, un identifiant unique (UID), un horodatage, et un hash de sécurité.

• En cas de succès, les erreurs sont réinitialisées.

• En cas d’échec, les erreurs sont enregistrées pour être affichées à l’utilisateur.

Résumé des Actions

• Authentification : Le store gère la connexion (login), la déconnexion (logout), et l’inscription (register).

• Gestion des Tokens : Les tokens d’accès et de rafraîchissement sont stockés via JwtService lors de la connexion ou de l’inscription et sont détruits lors de la déconnexion.

• Réinitialisation et Activation : Les actions forgotPassword, resetPassword, et activate permettent de gérer les demandes de réinitialisation de mot de passe et l’activation de compte.

Voici une description du service ApiService, qui utilise Axios pour gérer les requêtes HTTP et centralise les appels vers le backend dans l’application.

Les services

ApiService est une classe qui encapsule les appels HTTP effectués via Axios. Elle initialise Axios avec une URL de base, gère les en-têtes par défaut, et configure des intercepteurs pour gérer les événements de progression lors des requêtes et des réponses. Elle propose des méthodes standardisées pour effectuer des requêtes GET, POST, PUT, et DELETE. De plus, elle permet d’ajouter des actions spécifiques comme l’activation de compte.

Initialisation

• init(app: App) : Cette méthode initialise Axios avec Vue, fixe l’URL de base à partir des variables d’environnement (VITE_APP_API_URL), et configure les intercepteurs de requêtes et de réponses. Elle ajoute une barre de progression (via NProgress) qui démarre lorsque la requête est envoyée et se termine lorsque la réponse est reçue ou en cas d’erreur.

Méthodes

1. setHeader() : Définit les en-têtes par défaut pour les requêtes HTTP, notamment l’en-tête Accept pour indiquer que les réponses doivent être en JSON.

2. Requêtes HTTP Standard :

• query(resource: string, params: any) : Effectue une requête GET avec des paramètres, pratique pour les requêtes nécessitant des options de filtre ou de pagination.

• get(resource: string, slug: string) : Effectue une requête GET vers un resource spécifique, en ajoutant un slug facultatif pour des informations plus ciblées.

• post(resource: string, params: any) : Effectue une requête POST pour créer une ressource ou envoyer des données, avec les params inclus dans le corps de la requête.

• update(resource: string, slug: string, params: any) : Effectue une requête PUT pour mettre à jour une ressource spécifique, identifiée par un slug.

• put(resource: string, params: any) : Envoie une requête PUT générique sans slug, souvent utilisée pour des mises à jour plus globales.

• delete(resource: string) : Effectue une requête DELETE pour supprimer une ressource.

3. Actions Spécifiques :

• activate(token: string) : Utilisée pour l’activation de compte, cette méthode envoie une requête GET avec un token unique pour vérifier et activer le compte de l’utilisateur.

• resetPassword(payload: { uid: string; timestamp: string; hash: string; new_password: string }) : Méthode personnalisée pour la réinitialisation de mot de passe, en envoyant un payload avec les détails nécessaires pour mettre à jour le mot de passe de l’utilisateur.

Exemple de Flux Utilisant ApiService

Voici un exemple de flux où ApiService est utilisé en lien avec le store d’authentification :

1. Connexion :

• Dans le store, la méthode login utilise ApiService.post pour envoyer les identifiants de l’utilisateur à oauth/token.

• En cas de succès, le token est enregistré et l’utilisateur est authentifié.

2. Inscription :

• Le store appelle ApiService.post pour envoyer les informations d’inscription de l’utilisateur à user/register.

• Si l’inscription réussit, les données de l’utilisateur sont sauvegardées, et le compte est potentiellement activé via activate.

3. Activation de Compte :

• Le token d’activation est envoyé via ApiService.activate, qui vérifie le compte de l’utilisateur sur le backend.

4. Réinitialisation de Mot de Passe :

• Le store appelle ApiService.get avec le point de terminaison api/user/reset pour envoyer une requête de réinitialisation.

• Si le lien de réinitialisation est validé, resetPassword envoie un payload pour mettre à jour le mot de passe via ApiService.post.

Ce service ApiService assure la gestion centralisée des requêtes HTTP, permettant un accès uniforme aux endpoints du backend, une configuration partagée et une meilleure gestion des erreurs pour tout le module d’authentification.

Exemple de Flux d’Authentification

Voici comment ces éléments fonctionnent ensemble dans un scénario de connexion utilisateur :

1. Connexion (SignIn.vue) :

• L’utilisateur saisit son e-mail et son mot de passe dans SignIn.vue.

• Le formulaire appelle l’action loginUser du store d’authentification, qui utilise authService.login pour envoyer les données à l’API.

• Si l’authentification est réussie, le token JWT est stocké via JwtService, et isAuthenticated est mis à jour dans le store.

2. Inscription (SignUp.vue) :

• L’utilisateur remplit le formulaire d’inscription dans SignUp.vue.

• Les informations sont envoyées au store via l’action registerUser, qui utilise authService.register pour transmettre les données à l’API.

• Une fois enregistré, l’utilisateur est redirigé vers ActivateAccount.vue pour activer son compte.

3. Réinitialisation de Mot de Passe (PasswordReset.vue & NewPassword.vue) :

• Dans PasswordReset.vue, l’utilisateur demande une réinitialisation de mot de passe en fournissant son e-mail.

• authService.resetPassword envoie la demande au backend, qui répond avec un lien ou un code.

• L’utilisateur clique sur le lien pour accéder à NewPassword.vue, où il peut définir un nouveau mot de passe.

4. Confirmation de Nouveau Email (NewEmailConfirmation.vue) :

• L’utilisateur saisit le code de confirmation dans NewEmailConfirmation.vue.

• Le store appelle confirmNewEmail, qui utilise authService pour valider le changement d’e-mail via l’API.

Ce module d’authentification combine efficacement les vues, le store, et les services API pour offrir une gestion sécurisée et fluide de l’accès utilisateur.