Comment Ajouter une Confirmation d'Email à Votre App Bubble.io

Ajouter une fonctionnalité de confirmation d'email à votre app Bubble.io est l'un des meilleurs moyens de renforcer la sécurité de votre app et de créer un lien de confiance avec vos utilisateurs.

Que vous construisiez une marketplace, une plateforme SaaS, ou un site communautaire, confirmer les adresses email de vos utilisateurs aide à prévenir le spam, assure la validité des comptes, et vous donne un canal de communication vérifié.

La bonne nouvelle ? Vous n'avez besoin d'aucun plugin ou code pour le configurer.

Dans ce guide pratique, nous vous accompagnerons à travers chaque étape pour créer un flow de confirmation d'email personnalisé dans Bubble.io, de la génération d'un token sécurisé à la mise à jour de votre database et à l'envoi d'un email de confirmation brandé.

Pas de blabla—juste une solution propre et fonctionnelle que vous pouvez implémenter en moins de 30 minutes.

C'est parti !

Pourquoi Vous Devriez Ajouter une Confirmation d'Email à Votre App Bubble.io

Quand vous construisez des apps avec Bubble.io, le sign-up utilisateur est souvent la première interaction que quelqu'un a avec votre plateforme. Mais sans vérifier l'adresse email de l'utilisateur, vous laissez la porte ouverte à :

• Des comptes fake ou spam

• Des fautes de frappe qui cassent votre communication

• Des vulnérabilités de sécurité dans les flows de récupération de compte

C'est là qu'intervient la confirmation d'email dans Bubble.io. En demandant aux utilisateurs de confirmer leur email après le sign-up, vous ne validez pas seulement l'identité—vous protégez aussi votre plateforme et améliorez la fiabilité de votre app.

Un système de vérification d'email approprié dans Bubble vous permet aussi de :

• Assurer que les utilisateurs ont accès à une inbox valide

• Réduire les taux de bounce et améliorer la deliverability pour les futurs emails

• Créer des flows d'onboarding plus intelligents en trackant les utilisateurs confirmés

En résumé, que vous dirigiez une marketplace, un outil SaaS, un dashboard interne ou une app de répertoire, ajouter la confirmation d'email à votre app Bubble.io est une best practice qui sera rapidement rentable.

Étape 1 – Construire Votre Flow de Signup

Avant de configurer votre confirmation d'email dans Bubble.io, vous aurez besoin d'une page de signup fonctionnelle où les utilisateurs peuvent s'inscrire.

Dans ce tutorial, nous utilisons une page Signup/Login pré-construite de la library Nocodable Components. Elle inclut tout ce dont vous avez besoin :

• Un layout responsive

• Des vues Login, Signup, et Reset Password

• Un design propre prêt à être intégré dans n'importe quelle app Bubble.io

✅ Pas de temps perdu sur l'UI. Concentrez-vous juste sur vos features.

💡 Vous n'avez pas encore de page de signup ? Récupérez celle pré-faite de Nocodable Components et commencez en minutes !

Vous avez déjà un formulaire de signup configuré dans votre app Bubble ?

Parfait ! Vous pouvez passer à l'étape suivante et intégrer la feature de confirmation d'email directement dans votre flow existant.

Étape 2 – Configurer Votre Workflow de Signup

Maintenant que votre page de signup est prête, construisons le workflow qui enregistre un nouvel utilisateur.

Dans l'exemple ci-dessous, nous utilisons une action basique "Sign the user up"—juste pour démontrer la logique clairement. Votre flow de signup actuel pourrait inclure des étapes supplémentaires comme envoyer des données vers des services externes, afficher des alertes, ou rediriger vers une page d'onboarding. C'est totalement normal !

Pourquoi Nous N'Utilisons Pas la Confirmation d'Email Intégrée de Bubble

Vous pourriez remarquer une checkbox dans l'action "Sign the user up" : ☑️ Send an email to confirm the email

Ça sonne bien, non ? Pas vraiment.

❗️Nous n'utilisons intentionnellement pas la feature de confirmation d'email native de Bubble dans ce tutorial.

Voici pourquoi :

• Vous ne pouvez pas customizer le layout ou le branding de l'email

• L'email intégré est très limité (seulement des éditions de texte plain)

• Il est plus difficile de tracker et gérer le statut de confirmation dans votre propre database

Au lieu de cela, nous construirons un flow de confirmation d'email custom dans Bubble.io qui vous donne un contrôle total sur le design, la logique, et l'user experience—tout en restant simple à implémenter. Et plus important, vous pourrez utiliser cette logique avec n'importe quel provider d'Email que vous voulez.

Étape 3 – Configurer Votre Database pour la Confirmation d'Email

Maintenant que nous avons construit l'interface et la logique de signup, préparons la database pour tracker si un utilisateur a confirmé son email.

Pour cela, nous ajouterons deux nouveaux champs au data type User :

• emailConfirmed? → (yes/no) —> valeur par défaut = "no"

• emailConfirmationToken → (text)

🔐 Pourquoi Ces Champs Comptent

emailConfirmed? vous aidera à contrôler l'accès à travers votre app. Par exemple, vous pouvez facilement restreindre l'accès des utilisateurs à certaines pages à moins que Current User's emailConfirmed? soit "yes".

emailConfirmationToken stockera une string unique que nous générerons juste après le signup. Ce token sera utilisé pour identifier et vérifier l'utilisateur quand il cliquera sur le lien dans son email de confirmation.

💡 Cela vous donne un contrôle complet sur le processus de confirmation d'email dans Bubble.io—bien plus que la solution intégrée par défaut.

Alors allez-y et ajoutez ces deux champs à votre type User avant de continuer.

Étape 4 – Générer un Token de Confirmation Sécurisé (En Utilisant les Backend Workflows)

Juste après qu'un utilisateur s'inscrive, votre app doit faire deux choses :

1. Générer un emailConfirmationToken sécurisé

2. Envoyer un email de confirmation avec ce token

Pour faire cela de manière sécurisée, nous utiliserons un Backend Workflow (aussi connu comme un API workflow dans Bubble).

Pourquoi Pas un Frontend Workflow ?

Bien que vous puissiez générer le token en utilisant un workflow frontend classique, ce n'est pas 100% sécurisé. Un utilisateur tech-savvy pourrait inspecter son browser et récupérer le token de confirmation—sans même cliquer sur l'email.

✅ Utiliser un Backend Workflow garde la génération du token cachée et sécurisée, puisqu'elle se passe côté serveur.

⚠️ Note : Les Backend Workflows nécessitent un plan Bubble payant. Si vous utilisez le plan gratuit, vous pouvez toujours suivre ce tutorial en utilisant un frontend workflow—mais soyez conscient des limitations de sécurité.

Étape par Étape : Créer le Workflow Générateur de Token

1. Allez dans votre onglet Backend Workflows

Assurez-vous que la feature "Backend Workflows" (API workflows) soit activée dans les paramètres de votre app.

2. Créez un nouvel API Workflow

Cliquez sur "Add an API workflow" et nommez-le quelque chose comme sendEmailConfirm.

3. Ajoutez un nouveau paramètre

Appelez-le user et définissez son type comme User.

4. Ajoutez une action "Make changes to thing"

Définissez le "thing to change" comme user.

5. Mettez à jour le champ emailConfirmationToken

Utilisez le "Calculate formula" → "Generate random string".

• Length : 8 caractères

• Only Numbers (vous pouvez customizer cela)

6. Ajoutez une action d'envoi d'email

Maintenant, envoyons l'email de confirmation. Vous pouvez utiliser n'importe quel provider d'email, tant que vous incluez le lien de confirmation avec le token.

Dans cet exemple, nous utiliserons l'action Send Email intégrée de Bubble pour la simplicité, mais vous pouvez aussi utiliser :

• Mailchimp

• Postmark

• Brevo (Sendinblue)

• Ou n'importe quel plugin/API que vous préférez

Assurez-vous que l'email contienne un lien comme celui-ci :

• email_confirm est la page que nous créerons dans l'étape suivante

• token=12345678 est le token que nous venons de générer

💡 Pro Tip : Bubble a récemment annoncé que l'intégration SendGrid gratuite sera discontinuée. Considérez passer à un plan SendGrid payant ou à un provider d'email alternatif si vous planifiez une utilisation en production.

Étape 7 – Déclencher le Backend Workflow Après le Signup

Maintenant que votre backend workflow est configuré et prêt à générer le token de confirmation et envoyer l'email, connectons-le à votre flow de Signup.

Voici comment faire :

1. Retournez sur votre page Signup

2. Dans le workflow où vous inscrivez l'utilisateur (l'action "Sign the user up"), ajoutez une nouvelle étape juste après

3. Choisissez l'action "Schedule API Workflow"

4. Dans le dropdown "API Workflow", sélectionnez le backend workflow que vous venez de créer (ex : sendEmailConfirm)

5. Définissez le paramètre User comme Current User

6. Définissez la Scheduled Date comme Current Date/Time

Et c'est tout ! 🎉

Maintenant, chaque fois qu'un nouvel utilisateur s'inscrit, votre app va :

• Générer de manière sécurisée un token de confirmation d'email

• Envoyer l'email de confirmation avec un lien

• Tracker si leur email est confirmé

Passons à l'Étape 5 – Construire la Page de Confirmation d'Email pour que les utilisateurs puissent cliquer sur le lien et confirmer leur adresse email.

Étape 5 – Créer Votre Page de Confirmation d'Email

Maintenant que nous envoyons un email de confirmation avec un lien unique, nous devons créer la page où les utilisateurs atterriront pour vérifier leur email.

Voici comment faire :

1. Créez une nouvelle page dans votre app Bubble.io (vous pouvez l'appeler quelque chose comme email_confirm, verify, ou ce que vous voulez).

2. Designez-la comme vous voulez ! Un simple message comme "Merci de confirmer votre email" ou "Vérification d'email en cours…" suffit.

🔗 IMPORTANT : L'URL de la page doit exactement correspondre à celle que vous avez ajoutée dans le lien de l'email de confirmation. Par exemple, si votre email inclut ce lien :

Alors votre page Bubble doit être appelée email_confirm.

C'est ici que nous traiterons le token et confirmerons l'email de l'utilisateur dans l'étape suivante.

Étape 6 – Confirmer l'Email de l'Utilisateur au Chargement de la Page

Nous y sommes presque ! Maintenant nous devons juste confirmer l'email de l'utilisateur quand il atterrit sur la page de confirmation.

Voici ce que vous devez faire :

1. Ouvrez votre page de confirmation dans Bubble (celle que vous avez liée dans votre email, comme email_confirm).

2. Allez dans l'onglet Workflow, et créez un nouvel event : 👉 "When Page is loaded"

3. Ajoutez une nouvelle action : ➕ "Make changes to a thing"

4. Pour le Thing to change, vous devrez trouver l'utilisateur basé sur le token dans l'URL :

   • Cliquez sur "Do a Search for User"

   • Ajoutez cette constraint : emailConfirmationToken = Get data from URL → parameter = token

   • Puis sélectionnez :first item pour obtenir l'utilisateur qui correspond à ce token

5. Dans les changes, mettez à jour :

   • emailConfirmed? → ✅ Yes

Et voilà, l'email de l'utilisateur est maintenant confirmé ! 🎉

🔐 C'est l'étape finale pour rendre votre feature de confirmation d'email Bubble.io sécurisée et entièrement fonctionnelle.

Conclusion

Et voilà — vous venez de construire un système complet de confirmation d'email dans Bubble.io !

En utilisant un backend workflow sécurisé, un token de confirmation custom, et une page de confirmation dédiée, vous avez maintenant un contrôle total sur votre processus de confirmation d'email — à la fois en termes de design et de sécurité.

Cette approche non seulement vous aide à vérifier l'identité de vos utilisateurs, mais elle améliore aussi la trustworthiness de votre app et garde votre database propre des emails fake ou mal tapés.

Récap Rapide :

• Nous avons créé un flow de signup utilisant un component responsive.

• Nous avons étendu la database pour gérer la logique de confirmation.

• Nous avons construit un backend workflow pour générer et envoyer un token de confirmation sécurisé.

• Nous avons créé une page de confirmation et utilisé les paramètres d'URL pour vérifier l'utilisateur.

Si vous avez suivi ce tutorial étape par étape, votre app Bubble.io a maintenant une feature de confirmation d'email entièrement fonctionnelle — et une qui est flexible et scalable !