https://www.youtube.com/watch?v=l_mHEBo6_Oo
Vidéo précédente: 🇫🇷Création de compte (4/8)
Vidéo suivante: 🇫🇷 Test (6/8)
Comme promis on passe à l’étape suivante de la création de comptes utilisateurs : le login.
Vous trouverez toutes les explications nécessaires dans ce tutoriel.
Commençons!
Récapitulatif (0:00-3:00) Vérifier la création d’un compte (3:00-8:45) Se connecter (8:45-10:46) Récupérer les données d’un profil (10:46-21:44) Connecter un utilisateur déjà identifié (21:44-27:00) Conclusion (27:00-27:35)
Salut à tous. Dans cette partie, je vais vous montrer comment configurer le login en utilisant Supabase. Dans la vidéo précédente, je vous ai montré comment créer un compte. Si vous vous rappelez bien, un email était envoyé à l’utilisateur pour qu’il confirme la création de son compte. Dans ce mail, il y avait un lien pour valider tout cela et rediriger l’utilisateur sur la page de login. Parmi les éléments qui composent l’URL, il y avait notamment « api », « /app » et « /login?redirect=email ». Ce dernier élément permet de rediriger l’utilisateur sur la page de login avec un paramètre supplémentaire. Le « ?redirect=email » permet de différencier la page login classique de la page login accessible via le lien de l’email de confirmation. Pour rendre ce détail tangible, je vais modifier le graphe de la section de la page login. Ce paramètre est ce qu’on appelle un paramètre d’URL. Il en existe deux types dont les paramètres de querystring. Ce sont les paramètres à la fin de l’URL. Dans ces paramètres, il faut toujours mettre un point d’interrogation à la fin de l’URL puis ajouter des esperluettes entre les paramètres. Par exemple, je peux écrire « ? settings=value&other=hello& etc ». Il existe un deuxième type de paramètre qui s’écrivent avec un dièse. Ceci implique qu’il faut modifier le graphe pour qu’il vérifie la présence du paramètre qui m’intéresse. En cas de succès, il affichera un message de succès.
J’ajoute un bloc « apparaît » ici. Puis je mets un bloc « condition » et un bloc pour récupérer les paramètres d’URL. Ce bloc va vérifier le paramètre avec une clé redirect. Dans le résultat, le bloc me propose de récupérer une liste. C’est donc ce que je vais faire avec un bloc pour récupérer les éléments d’une liste. Je connecte l’élément result du premier bloc à l’élément list du second bloc. Je vérifie que l’index a une valeur égale à 0. Je branche un bloc d’égalité à l’élément du dernier bloc. Il faut donc que la valeur testée soit égale à email puisque je m’intéresse au paramètre redirect. Je le décale ici pour connecter le résultat du bloc « égal à » au test de la condition. En cas de succès, je vais définir la variable successMessage en lui donnant la valeur « Votre compte a été activé, vous pouvez vous connecter ». En cas d’échec, je vais me servir des paramètres en hash gérés par Supabase. J’ajoute un bloc pour récupérer les paramètres d’URL. Pour le type, je prends le type hash, pour la clé je regarde s’il y a une erreur en tapant « error », tout simplement. A partir de cela, je crée un bloc pour récupérer l’élément d’une liste. Avec un bloc « égal à », Je vérifie, en fait, si le client est autorisé. Plus précisément, je vérifie ce que nous renvoie Supabase quand il y a un souci à ce niveau-là . Je crée une nouvelle condition, en cas d’échec. Si c’est bien cette erreur-là , je demande à Voltapp d’afficher un errorMessage. Il y a moyen de vérifier auprès de Supabase quelle est l’erreur précise mais pour cela, je vous conseille de voir le template Supabase. Je définis errorMessage en lui donnant la valeur suivante : « Impossible de valider la création du compte ». S’il n’y a pas d’erreur, je ne fais rien de spécial car cela signifie que l’utilisateur se trouve sur l’écran de login classique. Je vais ordonner mes blocs. Je mets les blocs liés à la condition numéro un en dessous de celle-ci. Pareil pour les conditions suivantes.