Implémenter une solution d’inscription et connexion, en NoCode

Vous cherchez à développer un produit ou un MVP ?

Souvent, vous avez besoin d’une solution de signup et login pour vos utilisateurs.

Mais clairement vous avez pas envie de développer un système d’inscription et connexion et de gérer des mots de passes, etc..

Ni de payer une fortune pour qu’un dev vous le fasse.

En plus c’est du défocus, concentrez vous sur la valeur que votre produit apporte, et sur la problématique que vous résolvez.

Alors oui, il existe des alternatives NoCode

Notamment Memberstack.

Mais il faut prendre en compte que ça représente :

• Des frais mensuels

• Du temps de configuration de l’outil

• La mise en place d’une synchro entre votre base de données et Memberstack

Dans le cadre du 12 Months studio (sortir 12 produits, un par mois pendant un an).

Je me dois de simplifier au maximum les process, pour être efficace (car mon activité principale reste la prestation pour mes clients).

Aussi, je dois avoir un système de login qui sera compatible avec tous les produits.

---

Ma solution NoCode

La meilleure option que j’ai trouvée c’est : passer par un lien de connexion envoyé par email, sans mot de passe.

Et pour éviter que l’utilisateur ait à se reconnecter à chaque visite : utiliser un cookie pour authentifier l’utilisateur.

Détaillons :

1 - Page de connexion et formulaires

Première étape, avoir un point d’entrée pour l’inscription.

Pour ça une page web ou un même juste formulaire fera l’affaire.

Pour mes projets, j’utilise cette page :

Pour cette page, je passe par Webflow car je maîtrise l’outil et c’est l’outil que j’utilise pour mon site product-builder.com.

J’utilise également les formulaires natifs de Webflow.

Mais vous pouvez faire bien plus simple !

Par exemple, en utilisant Notion et Tally, et en intégrant votre formulaire Tally sur une page publique Notion.

(Vous pouvez d’ailleurs construire toute votre landing page sur Notion. Et même utiliser un outil comme super.so pour ajouter un nom de domaine, du code, etc..)

Le plus important c’est d’utiliser un formulaire que vous pouvez connecter avec Zapier, Make ou n8n, afin de récupérer les soumissions et agir en conséquences (on voit ça au point 3)

2 - Page de redirection et cookies

Afin d’éviter que l’utilisateur ait à se reconnecter à chaque visite, j’utilise un cookie pour authentifier l’utilisateur.

Pour cela, on a besoin d’une page de redirection (qui peut être la page de votre produit, ou pas).

Dans mon cas, vu que c’est une extension chrome, je renvoie vers une page plutôt basique, qui invite à télécharger l’extension.

Mais si, c’était une web app, je renverrai directement sur l’app.

Venons en au cookie

Déjà un cookie c’est quoi ?

Les cookies web sont de petits blocs de données créés pendant qu'un utilisateur navigue sur un site Web et placés sur le navigateur de l'utilisateur.

Dans notre cas, la donnée sera l’identifiant de l’utilisateur dans la base de donnée.

Ainsi, quand on navigue sur l’app, ou qu’on ouvre l’extension chrome, on vérfie que le cookie existe.

S’il n’existe pas, alors il suffit de rediriger l’utilisateur vers la page de connexion.

Maintenant, pour pouvoir ajouter le cookie sur le navigateur de l’utilisateur, il faudra passer la valeur du cookie en paramètre de l’URL de redirection.

Je ne vais pas détailler le process ici pour ne pas être trop technique, si vous voulez les détails, dites le moi, je vous expliquerai tout.

3 - Création de l’utilisateur et envoi de l’email

Il est temps d’implémenter la logique qui va collecter l’inscription, créer l’utilisateur dans la base de données et envoyer l’email de connexion.

La première étape est de connecter votre formulaire avec Zapier, Make, ou n8n, afin de traiter les soumissions.

Dans mon cas, j’utilise un formulaire Webflow et je récupère les données sur n8n via un webhook.

Voilà à quoi ça ressemble :

Le scénario doit en premier lieu requêter la base de donnée afin de savoir si l’utilisateur existe déjà.

S’il existe, on renvoi simplement le lien de connexion, via Gmail.

S’il n’existe pas, il faut le créer.

Dans mon cas, j’utilise Baserow comme base de données (alternative opensource de Airtable).

Les identifiants de Baserow étant trop simples, je passe par l’API de UUID Generator pour générer des IDs plus complexes comme :

86b32dc9-f7ce-4a3a-87e2-a410286a13ad

Afin d’éviter que les filous se connectent sur le compte d’autres personnes.

Si vous utilisez Airtable, les identifiants natifs sont très bien.

Cet identifiant sera inclut dans l’URL de la page de redirection de la manière suivante :

https://www.product-builder.com/auth/redirect?uuid={id}

La page de redirection se chargera d’extraire l’identifant et l’insérer comme cookie.

Et le tour est joué 🔥

---

Conclusion

Je voulais vraiment vous partager cet article pour vous montrer comment on peut simplifier des process indispensables et parfois coûteux, grâce au NoCode.

Si vous souhaitez plus de détails, n’hésitez pas à me contacter : antoine@product-builder.com.

Et si vous l’avez raté, voici le premier produit du challenge, qui est sorti la semaine dernière : un Email Finder pour Linkedin, pour trouver l’email professionnel et valide d’un profil Linkedin.

À plus,

Antoine