Here’s How to Integrate Cotter’s Magic Link to Your Bubble Site!

Build a Bubble site with password-less login using magic link.

Try it!

In this tutorial, we are going to guide you on how to authenticate your users using magic links on Bubble.

Part 1: Cotter Setup

Go to https://dev.cotter.app to create an account. Once you have created an account make sure to create a new project and grab the API Key ID. We will be using your API Key ID later in part 2.

Part 2: Bubble Setup

For this tutorial, we will create 2 pages: Login Page and Protected Page.

Login Page: This is where the users will see the Login form

Protected Page: This contains protected content that are only accessible to logged-in users.

Adding Elements

Login Page

Go to “Design” tab, under “Input Forms”, click “Install More…”, then install “Cotter Passwordless Login” plugin.

Go to “Plugins” tab, click “Cotter Passwordless Login”, and enter API_KEY_ID, which you can get from Cotter’s dashboard.

Once you’ve done that, you should be able to see Cotter Login Form under Input Forms.

Drag the plugin into your page. You should be able to see the login form like this:

Protected Page (Member-only Page)

Create a new page called the “protected” page. Go ahead and add content to the page.

To only allow logged-in users, add a Cotter Page Shield element

Put it somewhere visible in your page.

Show logged-in user’s email

Add a Text element, type “Welcome”, click on “Insert dynamic data”, and choose CotterPageShield A's identifier

When the user is logged-in, this will be populated with the user’s email address.

Show protected content ONLY if the user is logged-in

Add a Group, then put all of your protected content in that group. Name the group “Group Protected Content”. Make sure you uncheck “This element is visible on page load”. We’ll add some logic so that this group will only show up if the user is logged-in.

Show error message if user is not logged-in

Add a Text with an error message and a Link to go to the login page to login. Group the elements together and call it “Group Not Logged-In”.

Add Login Logic

Login Page

Go to Protected page when the user successfully logs in

Let’s go back to our login page. When the user is successfully logged in on the form, we want to direct them to the Member Only/Protected page.

Go to Workflow and add a new element: “Elements > A Cotter Login Form — User Pressed Login”

Then, add an “Action” > Navigation > Go to a page…, and set the “protected” page as the destination.

Add a link to go to the Protected page on the top of the page

Link style: Button Link

Protected Page

Show Protected Content if the user is logged-in (and hide the error message)

Go to the protected page, and click Workflow.

1. Add an Event > Elements > A Cotter Page Shield is loaded
2. Then add an Action > Plugins > Check Logged In
3. Set access_token as ThisCotterPageShield's access_token, identifier as ThisCotterPageShield's identifier

4. Show content if logged-in: Add another Action > Element Actions > Show. Then set the element as our Group Protected Content, and set “Only when: Result of Step 1 (Check logged in)’s logged_in is yes”

5. Hide error if logged-in: Add another action > Element Actions > Hide. Then set the element as our Group Not Logged In, and set “Only when: Result of Step 1 (Check Logged-In)’s logged_in is yes”

Log Out Button

Add a log out button

1. Make a log out button in the Protected Page.
2. Make sure you uncheck “This element is visible on page load”.
3. We want to show this button only if the user is logged-in: Continuing to the workflow above, add an action > Element Actions > Show. Set the Button Log Out as the element, and show “Only when: Result of Step 1 (Check Logged-In)’s logged_in is yes”

Log out the user when the Log Out button is clicked

1. Go to Workflow and add another event > Element > an element is clicked. Pick the Log out Button as the element.
2. Add an action > Plugins > Cotter Log Out
3. Then, we want to redirect them back to the home page. Add an action > Navigation > Go to page…, set index as the destination page.

Log in Button

Add a log in button

1. Make a log in button in the Protected Page, on top of the Log Out button.
2. Make sure you uncheck “This element is visible on page load”.
3. We want to show this button only if the user is not logged-in: Continuing to the workflow above, add an action > Element Actions > Show. Set the Button Log In as the element, and show “Only when: Result of Step 1 (Check Logged-In)’s logged_in is no”

Navigate to the Home page when clicked

1. Go to Workflow and add another event > Element > an element is clicked. Pick the Log In Button as the element.
2. We want to redirect them back to the home page. Add an action > Navigation > Go to page…, set index as the destination page.

That’s it.

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 1, 2020.