Email confirmation made EASY

How to Set Up an Email Confirmation Workflow in Bubble.io

Here's everything you need to know about sending an email confirmation when a user signs up on your Bubble app. First, let’s look at why you might want to use this feature. A confirmation email serves as an identity check, helping to ensure that the person who signed up is the real owner of the email address. It’s also a useful way to combat users signing up with multiple accounts or fake email addresses.

Keep in mind the Gmail alias trick, which allows users to create unique addresses by adding "+" tags to their emails (e.g., name+alias@gmail.com). While it can’t fully prevent spam signups, a confirmation email provides some level of verification. There are third-party ID check services that could help here too, though they’re often more complex to set up.

Setting Up the Registration Form

Start by creating a basic registration form in Bubble. If you click into the workflow, you’ll see an option to “Send an email to confirm email” by simply checking a box. Avoid creating your own front-end workflows for this; Bubble’s built-in confirmation email is a secure solution. Generating a verification code in the front-end is risky since a technically skilled user could access this code.

Configuring the Confirmation Redirect

In the email confirmation settings, you can select the page the user will be directed to upon confirming their email. For instance, you might choose a dashboard page. Once confirmed, they’re taken to this page, and Bubble updates their email status to "confirmed" within the database.

Verifying Email Confirmation in Bubble’s Database

If you check the user data in Bubble, you’ll find a built-in field called email confirmed. While it’s not visible in the regular data fields, this Boolean field tracks whether the user’s email has been verified. You can then create workflows that restrict access to specific pages until the user’s email is confirmed. For example, when a page loads, check if current user’s email confirmed is no. If it is, redirect them back to the home page or index.

Adding User Feedback on Registration

When a user registers, it’s good practice to provide immediate feedback. Hide the form after submission and show a message instructing them to check their inbox. Here’s how:

• Create a new group element (e.g., Step 1 for the registration form).
• Add a message in a separate group (e.g., Step 2) that will display after the form is hidden.
• In the workflow, hide Step 1 and show Step 2 when the user registers, providing clear feedback that an email has been sent.

Customizing the Confirmation Email with an API

If you’re not satisfied with Bubble’s default email provider (SendGrid), you can set up custom email services like Postmark or Loops. Here’s how to implement it:

1. In the workflow, replace Send email confirmation with Make token. This generates a unique token for the confirmation link.
2. Use the API connector to link with your chosen email provider and include the token in the email link.
3. Double-check the link in the email logs to ensure accuracy.

Using a custom email provider allows you to design a more polished confirmation email with branded templates and styled buttons.

Conclusion

This overview covers the essential steps for setting up email confirmation in Bubble. By following these best practices, you’ll improve security and provide a smoother experience for new users. If you have any questions, feel free to leave a comment below!