Build a Bubble site with password-less login using magic link.
In this tutorial, we are going to guide you on how to authenticate your users using magic links on Bubble.
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.
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.
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:
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". Make sure you uncheck "This element is visible on page load".
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
Show Protected Content if the user is logged-in, and show an error message otherwise
Go to the protected page, and click Workflow.
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. Show error if not logged-in: Add another action > Element Actions > Show. 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 no"
Add a log out button
Log out the user when the Log Out button is clicked
Add a log in button
Navigate to the Home page when clicked
Check out the demo:
Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter's Slack Channel.
If you need help, ping us on our Slack channel or email us at firstname.lastname@example.org.