#Mettre en place la connexion utilisateur

On va retourner sur l’écran du compte, cette fois pour mettre en place la fonctionnalité de connexion de l’utilisateur à son compte.

• Gérer connexion de l’utilisateur
• Afficher les informations du compte de l’utilisateur
• Afficher les commandes de l’utilisateur uniquement

#🧠 Notions

• Refactoring du code actuel pour s’adapter aux nouvelles fonctions
• Authentification de l’utilisateur
• Gestion des états de l’UI
• Utilisation du DataStore pour stocker les informations de l’utilisateur
• Gérer les erreurs de connexion

#Etape 1 - Mise en place des modèles

Voilà diagramme de séquence de ce que nous allons faire pour l’étape 1 :

#✅ Complétez les tâches suivantes

• Supprimez les appels à l’API Token que nous avions mis en place avant, nous allons utiliser un token d’authentification jwt scopé à l’utilisateur
• Si ce n’est pas déjà fait, créez un modèle User pour stocker les informations de l’utilisateur connecté
• Dans le AccountViewModel créé précédemment, ajoutez une fonction login qui prend en paramètre un username et un password
• Vous allez devoir modifier la fonction de récupération des orders de votre AccountViewModel pour qu’elle utilise le jwt récupéré ainsi que les informations de l’utilisateur connecté

#🛟 Aide

• La documentation de Strapi pour s’authentifier est très simple et bien expliquée : Strapi Authentification
  • Si besoin je peux vous créer des comptes utilisateurs pour tester l’authentification, demandez moi ;)
• Pour le filtrage des données par utilisateur, vous pouvez utiliser des query parameters dans vos requêtes réseau Strapi Rest API
  • Le token d’authentification
  • Les informations de l’utilisateur connecté (filtrage par id de l’utilisateur)

#💾 Authentification

#Gestion des erreurs 😵

• Utilisez Retrofit et le code HTTP response.code() pour gérer les erreurs de connexion
• Vous pouvez utiliser un when pour gérer les différents codes d’erreurs

when(response.code()) {
  401 -> // Mauvais identifiants
  403 -> // Accès refusé
  404 -> // Ressource non trouvée
  else -> // Autre erreur
}

sealed class LoginError {
  object Unauthorized : LoginError()
  object Forbidden : LoginError()
  object NotFound : LoginError()
  object Other : LoginError()
}

#Et des succès ✅

{
  "jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNzM0MDM2NDgzLCJleHAiOjE3MzY2Mjg0ODN9.nF_BLxs2hblQ_9l1geZ4bPlYmV90ZqFk8Hdl4ANrDhA",
  "user": {
    "id": 1,
    "documentId": "vpfsc4adv76ynm2pqu5sm6i9",
    "username": "campus",
    "email": "[email protected]",
    "provider": "local",
    "confirmed": true,
    "blocked": false,
    "createdAt": "2024-11-10T17:04:20.222Z",
    "updatedAt": "2024-12-11T08:09:57.358Z",
    "publishedAt": "2024-12-11T08:09:56.657Z"
  }
}

@JsonClass(generateAdapter = true)
data class DwitchAuthResponse(...)

#Etape 2 - Stockage des informations utilisateur

Nous allons ajouter un DataStore pour stocker les informations de l’utilisateur connecté entre les redémarrages de l’application.

Voici l’évolution de notre diagramme de séquence :

#✅ Complétez les tâches suivantes

• Créez une class DwitchDataStore pour stocker les informations de l’utilisateur qui est un DataStore de Jetpack
• Ajouter de quoi sauvegarder les informations de l’utilisateur connecté (token et informations de l’utilisateur)
• Ajoutez une fonction pour récupérer les informations de l’utilisateur connecté
• Faites en sorte de stocker les informations de l’utilisateur connecté lors de la connexion et de les supprimer lors de la déconnexion (créer un logout() dans le viewModel)
• La fonction de récupération des orders de votre AccountViewModel doit maintenant récupérer les informations de l’utilisateur connecté depuis le DataStore

#Etape 3 - UI

Nous allons mettre en place la connexion de l’utilisateur à son compte. Comme sur la maquette vu au début de l’itération.

Process	Gestion des erreurs

#✅ Complétez les tâches suivantes

• Votre UIState doit être mis à jour en conséquence des étapes précédentes
• Ajoutez un bouton de connexion sur l’écran du compte
• L’écran doit gérer les états de chargement, d’erreur et de succès
• Créer un formulaire de connexion
• Si l’utilisateur est connecté affichez ses informations + un bouton de déconnexion