Restrict Your Bubble Site Login to “Allowed” Emails Only using Google Sheets

This guide shows you how to only allow certain emails to log in to your Bubble website. Use cases include RSVP, waitlists, student lists, and more.

Try it!

How it works

You will have a Google Sheet that contains a list of emails that are allowed to log in. Your Google Sheet data will look like this. Emails that are marked as Allowed = TRUE will be allowed to log in, otherwise, they won't be able to log in.

Google Sheets Setup

Go to https://cotteremaillist.herokuapp.com to connect your Google Sheets that contains a list of emails and follow the instructions there. See an example Google Sheet here. (You can make this sheet private — you just need to connect your Google Account in the website above).

You can add emails to this list either manually or programmatically using Cotter’s Waitlist Form.

Basic

Login & Member Page: Restricting Login to “Allowed” Emails Only

Add Cotter’s Login Form to your Bubble Website

Follow this tutorial to add Cotter’s Login Form and protect members-only pages. We will modify what you have from this tutorial to only allow the emails in your Google Sheets.

Restrict the Login Form to only allowing emails in the list to log in

Go to Plugins > Cotter Passwordless Login > Upgrade to the newest version

Go back to Design > Click on the Cotter Login Form

Update your Cotter Login Form by adding the Google Sheets ID on the “Allowed Email List ID” field:

Restrict Member Only pages to only allow emails in the list to access the page

Update the Workflow on the member page and edit “When CotterPageShield A is loaded > Step 1 Check Logged-In”, insert the same Google Sheets ID on the “Allowed Email List ID” input

Waitlist Page: Inserting Emails to the List using Cotter’s Waitlist Form

Make a Waitlist Page and Add The Form

Make a Waitlist Page in your Bubble site, then add a Cotter Waitlist Form. Then enter the Google Sheets ID for Waitlist Sheets ID:

Add a Success Message when the user is added to the waitlist

Add 2 Text elements:

• “Waitlist Message Success” with text You are on the waitlist!
• “Waitlist Message Failed” with text Something went wrong, please try again.

Uncheck the box for “This element is visible on page load” for both text elements:

Edit Workflow to Show the Success Message

Showing success message:

• Add a new event “Elements > A Cotter Waitlist Form — User Successfully Joined Waitlist”
• Add an action “Element Actions > Show” and set “Waitlist Message Success” as the element to show

Showing failed message:

• Add a new event “Elements > A Cotter Waitlist Form — User Failed Joining the Waitlist”
• Add an action “Element Actions > Show” and set “Waitlist Message Failed” as the element to show

Use Case — Blog: Continuing our Medium Publication-clone Tutorial

Let’s make our Medium Publication-clone one step forward by only allowing certain users to upload contents to the Blog Homepage. This is especially important to maintain your blog quality by making sure that you authorize the collaborators. Users that are granted access to collaborate to the blog are also granted access to the Blog Content Page to read the full article.

Login Page

Go to your Login Page add click on the Cotter Login Form.

Update your Cotter Login Form by adding the Google Sheets ID on the “Allowed Email List ID” field:

Other Pages (Blog Homepage, Blog Content Page, and Upload Page)

Restrict Protected Pages to only allow emails in the list to access the page.

Update the Workflow on the member page and edit “When CotterPageShield A is loaded > Step 1 Check Logged-In”, insert the same Google Sheets ID on the “Allowed Email List ID” input.

Apply to Become A Writer: Inserting Emails to the List using Cotter’s Waitlist Form

Make a Writer Application Page (Waitlist Page) and Add The Form

Make a Writer Application Page in your Bubble site, then add a Cotter Waitlist Form. Then enter the Google Sheets ID for Waitlist Sheets ID:

Add a Success Message when the writer application is received

Add 2 Text elements:

• “Waitlist Message Success” with text Writer application received!
• “Waitlist Message Failed” with text Something went wrong, please try again.

Uncheck the box for “This element is visible on page load” for both text elements:

Edit Workflow to Show the Success Message

Showing success message:

• Add a new event “Elements > A Cotter Waitlist Form — User Successfully Joined Waitlist”
• Add an action “Element Actions > Show” and set “Waitlist Message Success” as the element to show

Showing failed message:

• Add a new event “Elements > A Cotter Waitlist Form — User Failed Joining the Waitlist”
• Add an action “Element Actions > Show” and set “Waitlist Message Failed” as the element to show

That’s it! 🎉

• Your Login Form and Member Page now only accept emails that are marked as Allowed: TRUE in your Google Sheets.
• Your Waitlist Form will now automatically add new emails as Allowed: FALSE to your Google Sheets.
• You can manually update the allowed status of each email in the list to TRUE or FALSE.

Check out the demo:

Bubble - Visual Programming

Questions & Feedback

Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter’s Slack Channel.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.

If you need help, ping us on our Slack channel or email us at team@cotter.app

Originally published at https://blog.cotter.app on September 15, 2020.