https://www.youtube.com/watch?v=BXwKPFXHQFs

Vidéo précédente: 🇫🇷Configuration de la base de données (3/8)

Vidéo suivante: 🇫🇷 Login (5/8)

Intro

Essentiel aux objectifs de cette formation, on aborde dans ce tutoriel le sujet de comptes utilisateurs et comment les créer.

Commençons sans plus attendre!

Contenu de la vidéo

Configurer un compte (0:00-5:18) Rediriger vers l’URL du projet (5:18-7:07)

Script

1. Configurer un compte

Salut à tous, dans cette vidéo je vais vous expliquer comment créer un compte en utilisant Supabase et notamment le nœud Supabase Auth. Ce nœud correspond à la gestion des comptes utilisateurs. Je vais vous montrer ça dans la page register de notre projet. J’ai déjà configuré les nœuds Supabase dans la vidéo précédente. Comme vous avez pu le voir dans la première vidéo, on réinitialise toutes ces variables en quittant la page. J’ai déjà des variables errormessage, successmessage, emailpassword et confirmpassword. Le register est ce qui va m’intéresser aujourd’hui. Vous pouvez voir que la gestion de l’asynchrone est géré par la variable « is loading ». Au début, je dis que l’appli est en train de charger. Une fois que tout est fini, j’arrête de le dire. Ceci est répliqué automatiquement sur le bouton, au niveau de son texte et sur le fait qu’il soit désactivé ou non. Le graphe gère aussi les erreurs en vérifiant que la case pour le mot de passe n’est pas vide ou que le mot de passe et sa confirmation sont les mêmes. Ce qui va m’intéresser aujourd’hui est la création de compte essentiellement. Vous n’avez donc pas besoin de vous soucier de cela. Pour cela, je vais utiliser une action qui vient directement du nœud « auth ». Je vais remplacer le debug par l’appel à une action de Supabase auth. Cette action est « créer un utilisateur avec un email et un mot de passe ». Je la mets ici. Elle peut prendre plus ou moins de temps en fonction de votre connexion internet. Ceci explique la nécessité d’un temps de chargement. L’action comporte trois paramètres : email, mot de passe que vous connaissez déjà, ainsi que redirect to. Je vais connecter ces deux premiers paramètres aux variables auxquelles ils correspondent « email » et « mot de passe ». Le paramètre redirect to sera utile pour choisir l’URL vers lequel vous voulez rediriger vos utilisateurs lorsqu’ils recevront un email de confirmation.

Ressources

Noeud Supabase Auth

Bloc debug

2. Rediriger vers l’URL du projet

Avant cela, je vais directement gérer le retour de la création de compte utilisateur. Une fois que la requête est finie et que le chargement est terminé, je vais pouvoir ajouter une condition en fonction de laquelle un message s’affichera. En cas de succès, j’affiche un message de succès et en cas d’erreur j’affiche un message d’erreur. Je définis la variable successmessage en lui donnant la valeur « votre compte a été créé, allez voir vos email pour confirmer ». Je mets un emoji avec des yeux. En cas d’échec, je définis la variable errormessage. Je connecte ce bloc à échec et je lui connecte un bloc « set successmessage ». Je définis donc la variable successmessage en ne lui donnant aucune valeur en cas d’échec. Il ne me reste plus qu’à remplir le champ « redirect to ». Vous devrez y mettre l’URL de votre projet. Il est assez simple de le déterminer. Pour cela, il suffit de copier-coller cet URL. Je vais changer quelques éléments. Je remplace « editor » par « api » puis je remplace « project » par « app ». A la fin je rajoute un « /login » car une fois que le compte est créé, l’utilisateur sera redirigé sur la page login. Puis on rajoute « ?redirect=email ». Cet élément va permettre aux personnes ayant reçu un mail de confirmation d’être redirigées vers une page de login différente de la page classique. Je vous montrerai cela plus spécifiquement dans la prochaine vidéo.