Bubble

Login to Secqure

Create KEY_ID for your Login Form

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

Bubble Setup

The below section provides step by step guide to integrate the Secqure Login form to home page (Index) and a members-only page (Protected).

Install Plugin

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.

Add API Key_ID

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.

Secqure Login Form

Once the plugin is installed successfully, you can find the "Secqure Login Form" under the Input form in the Design Tab

Index Page

Drag and add the Secqure Login Form to your index page. A login form would be visible as shown below.

Protected Page

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".

Login Workflow

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

Well done 👍, You are almost there 👏

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.

Logout Button

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.

Logout User

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.

Login button

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.