< Bubble

Bubble + Cotter

In this recipe, you'll learn how to build a bubble site with passwordless login using magic link.



We have created 2 pages: Login Page (index) and Protected Page (protected).  The login page will display the embedded Cotter login form for your users to type in their email while the protected page will display protected content that only a logged in user can view.



If you need any help following this tutorial, head to our Slack Channel! We're here to help.





Instructions:

Get a Cotter API Key. 1. Go to https://dev.cotter.app to create an account.  2. Go to "Plugins" tab, click Cotter Passwordless Login", enter your Cotter API Key ID.



That's it! Customers can now easily sign up/sign in to your website without any passwords.



This template is pre-equipped with the following elements:

 Login Page (index) 1. Cotter Login Form from Cotter's Bubble Plugin.

2. "Join Waitlist" button linked to the Waitlist Page.

* This "Join Waitlist" button is optional (Optional Feature 4). Feel free to remove it if you are not planning to use Optional Feature 4.

Protected Page (protected) 1. Cotter Page Shield from Cotter's Bubble Plugin to make sure only logged-in users can see protected content.

2. Group Protected Content. Elements in this group will be shown only if the user is logged in. This group contains a Text element "Welcome, [user's email]" to load the user's email address once the user is logged in.



* This Text element is optional (Optional Feature 1). Feel free to remove it if you are not planning to use Optional Feature 1. * This Group Protected Content is not visible on page load.



3. Button "Log Out" to enable the user to sign out from your website.

* This Button element is optional (Optional Feature 2). Feel free to remove it if you are not planning to use Optional Feature 2.



Waitlist Page (waitlist)

* This page is optional (Optional Feature 4). Feel free to remove it if you are not planning to use Optional Feature 4.



1. Cotter Waitlist Form from Cotter's Bubble Plugin 2. "Login" button linked to the Login Page.



This template is pre-built with the following workflows:

Login Page (index) Go to protected page when the user successfully logs in. 1. Event > Elements > A Cotter Login Form - User Pressed Login.



2.  Action > Navigation > Go to a page..., and "protected" page is set as the destination.



Protected Page (protected) Check if the user is logged in. 1. Event > Elements > A Cotter Page Shield is loaded. 2. Action > Plugins > Check Logged In. 3. The access_token is set as ThisCotterPageShield's access_token and the identifier is set as ThisCotterPageShield's identifier.

Show protected content only if the user is logged in.

Continuing on  Event > Elements > A Cotter Page Shield is loaded's workflow: 1. Action > Element Actions > Show. 2. The Element is set as Group Protected Content and the Only When is set as Result of Step 1 (Check Logged-in)'s logged_in is yes.

 Optional Features:

Feature 1: Display logged in user's email in the protected page.



Your template should have a a Text element "Welcome, CotterPageShield A's identifier".  1. CotterPageShield A's identifier will be populated with the user's email address. 2. This Text element is part of Group Protected Content.



Feature 2: Add log out functionality in the protected page.

Your template should have a Button "Log Out" to enable the user to log out from your website. This button is pre-built with the following workflows: ‍ Show Log Out Button. Continuing on  Event > Elements > A Cotter Page Shield is loaded's workflow:

1. Action > Element Actions > Show.

 2. The Element is set as the Button Log Out and the Only When is set as Result of Step 1 (Check Logged-In)'s logged_in is yes".



* This Log Out Button is not visible on page load.



Log the User Out. 1. Event > Elements > An Element is Clicked. 2. Action > Plugins > Cotter Logout. Redirect the user back to the Login Page. Action > Navigation > Go to page..., the "index" page is set as the destination page.



Feature 3: Restrict login to specific people only (using Google Sheets)

Instructions:  Step 1: Set up Google Sheets. Go to Cotter Email List and follow the instructions there. This is to connect your Google Sheets that contains a list users' emails allowed to login to your site. See an example Google Sheets here. (You can make this sheet private - you just need to connect your Google Account in the website above). Step 2: Go to the Login Page and click on the Cotter Login Form. Add your Google Sheets ID to the "Allowed Email List ID" field.



Step 3: Go to the Protected Page and go to the "Workflow" tab.

Continuing Event > Elements > A Cotter Page Shield is loaded's workflow: Under "Check Logged-In", add your Google Sheets ID to the "Allowed Email List ID" column.





Feature 4: Add A New Entry to the Waitlist Google Sheets in Feature 3



We created 1 additional page for this feature: Waitlist Page (waitlist). This template is pre-equipped with the following elements: 1. Cotter Waitlist Form from Cotter's Bubble Plugin. 2. Text Element for Waitlist Message Success: "You are on the waitlist!". 3. Text Element for Waitlist Message Failed: "Something went wrong, please try again".



*Waitlist Message Success and Waitlist Message Failed are not visble on Page Load.



This template is pre-built with the following workflows: Show success message: 1. Elements > A Cotter Waitlist Form - User Successfully Joined Waitlist. 2. Action > Element Actions > Show. 3. The Element is set as Waitlist Message Success.

Show failed message: 1. Elements > A Cotter Waitlist Form - User Failed Joining the Waitlist. 2. Action > Element Actions > Show. 3. The Element is set as Waitlist Message Failed. Instruction: 1. Click on Cotter Waitlist Form and add your Google Sheets ID to the "Waitlist Sheets ID" column. 2. Set the "Default Allowed Value" to either TRUE or FALSE. TRUE means all waitlists will automatically be approved and will be able to login. FALSE means your admin needs to manually change the permission to TRUE to allow them to login.



☁️Made with Typedream