Bubble
Add Secqure Plugin to your Bubble.io App
Last updated
Add Secqure Plugin to your Bubble.io App
Last updated
1) Login to Secqure Dashboard from https://www.secqure.io and click on "Dashboard"
2) Once Logged-in Create a New Project from Dashboard by clicking "New Project"
3) Select your newly created Project and copy your project Key_ID
4) add style, logo, text to your login form under Project >Design
5) You can customize the email link content under Custom Email
6) Add this Key_ID in your installed Secqure Plugin in your Bubble.io App
Note: If the login form does not show up after following the steps mentioned in the Bubble Setup or you received an error message "something went wrong", the likely cause may be incorrect URL configuration. You can add your test or live url correctly from Project Setting>Web URL. You can add multiple URLs with comma-separated.
Example: For bubble test URL https://myauthtest.bubbleapps.io/version-test , add the Web URL as https://myauthtest.bubbleapps.io
The below section provides step by step guide to integrate the Secqure Login form to home page (Index) and a members-only page (Protected).
Go to the Plugins tab of your Bubble application design view. Click on Add Plugins and search for "Secqure" or "Secqure Passwordless Login" as displayed in the below screen and install.
From the Plugins tab, click Secqure Passwordless Login, and enter your Secqure Project Key_ID as mentioned in Login to Secqure.
Keep the Key_ID-dev field blank.
It's suggested using the latest version of the plugin to keep up-to-date on all Secqure's new features.
Once the plugin is installed successfully, you can find the "Secqure Login Form" under the Input form in the Design Tab
Drag and add the Secqure Login Form to your index page. A login form would be visible as shown below.
Create a new page called Protected .
Select Add a new page by clicking on the top left corner above the Design tab as displayed in the below screen.
Add a "Secqure Protection" component to make this page protected. Find and Drag it from the left panel under the Visual Elements.
Welcome Logged-in user
Add a text element and select it's value as SequreProtection A's identifier. which will show the logged-in user's email or phone number.
Show Protected Content
Add a group from Containers and change the name "Group A" to Group Logged-in by clicking on the top part of the grey box as shown in the screen below.
Add all your protected content in that group, including text, buttons, images, and containers. Make sure to uncheck "This element is visible on page Load". The workflow logic will be added later to make sure it is visible on successful login. In this example we have added text element as "You are Logged In : Members Only View".
Show not Logged-in Content
Create another Group and name it Group Not Logged-In , just like previous one.
This group will be visible if you do not successfully log in. Add a text message saying "You are Not Logged In:Guest View" . Make sure to uncheck "This element is visible on page Load".
Let's add the worflow steps for index page and protected page.
Index Page
Once user logged-in from index page we want to re-direct them to the protected page.
Navigate to index page, go to workflow tab and add an event.
Add a new element: Elements > A Secqure Login form - User Pressed Login
click to add an action to Navigate to the Protected page
Select Navigation > Go To Page action to select Protected page as the destination.
Protected Page
Let's create a workflow to show the Protected content if the user successfully logged-in , else, show the Not Logged In content.
Navigate back to the protected page by clicking on the top left, and click workflow.
Add an Event > Elements > A SecqureProtection is_loaded. This enables us to take action whenever the Protected page is loaded.
Add an Action > Plugins > Check User Logged-in
Set "access_token" as ThisSecqureProtection's access_token, "identifier" as ThisSecqureProtection's identifier
Let's create the logic to show the protected content when the user successfully 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 User Logged-in)‘s logged_in is yes.
To create the logic when the user fails to log 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 User Logged-in) logged_in is no.
Let’s create a logout button to log the user out of the website and redirect to index page.
On the protected page, switch back to Design and drag a button under the Visual element and place on the top left corner of the page. Edit the button text as "Logout".
Make sure you uncheck "This element is visible on page load". We want to show this button only if the user logs in.
Add another action by clicking on the Action > Element Actions > Show. just like the previous one.
Set the Button Logout as the element, and show Only when: Result of Step 1 (Check User Logged-in) logged_in is yes.
This logic will display the button only when the user logged in.
Finally, let’s create the workflow of the Logout button.
Go to Workflow and add another event Event > Element > An element is clicked beside the previously created event A Secqure Protection is loaded as shown below.
Select Logout Button as the element.
Add an action > Plugins > logout Then, we need to redirect them back to the home page.
Add an Action > Navigation > Go to a page under the same event and select the index page.
This will redirect you to the index page and log you out.
We need to show this button only if the user is not logged-in.
Add a Login Button and uncheck “This element is visible on page load”
Continuing with the workflow above, add an action > Element Actions > Show.
Set the Button Log In as the element, and show “Step 1 (Check User Logged-in) logged_in is no"
Let's navigate to the Home page when Login is clicked
Go to Workflow and add another event > Element > an element is clicked.
Select the Login Button as the element.
We need to redirect the user back to the home page. So, let's add an action > Navigation > Go to page, set "index" as the destination page.
👍Congratulations.....You are all set.
