# Bubble ### Login to Secqure #### Create KEY\_ID for your Login Form 1\) Login to Secqure Dashboard from and click on "[Dashboard](https://docs.secuuth.io/setup-configuration)" 2\) Once Logged-in Create a [New Project ](https://docs.secuuth.io/setup-configuration/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](https://docs.secuuth.io/setup-configuration/design#style-your-login-form) 5\) You can customize the email link content under [Custom Email](https://docs.secuuth.io/setup-configuration/configure-magic-link-page-custom-email-and-sms#custom-email) 6\) Add this Key\_ID in your installed Secqure Plugin in your Bubble.io App {% hint style="info" %} **Note:** If the login form does not show up after following the steps mentioned in the [Bubble Setup](#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](https://docs.secuuth.io/setup-configuration/project-setting-domain-and-session#web-url). You can add multiple URLs with comma-separated. Example: For bubble test URL , add the Web URL as {% endhint %} ### 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. ![Install Secqure Passwordless Login Plugin](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2Fr7wBImpfRfENeC008UyX%2FInstall%20Plugin.PNG?alt=media\&token=602c83a2-6b6a-4ed7-a061-25acbf88debf) #### 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](#login-to-secqure "mention"). 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. ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FB0btXipD2L6bBJy8qUzw%2Fimage.png?alt=media\&token=2934e42c-0f45-4346-864b-f4f4a46aeb50) #### Secqure Login Form Once the plugin is installed successfully, you can find the "**Secqure Login Form**" under the **Input form** in the Design Tab ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2Flh7qwlqRuvsRVWCKZ0je%2Fimage.png?alt=media\&token=4b5abfc8-10d7-43a5-a517-ba8bb84b52fc) #### Index Page Drag and add the Secqure Login Form to your index page. A login form would be visible as shown below. ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FY82JghYqoiFNOheB0sOp%2Fimage.png?alt=media\&token=aa7cb767-53bc-4cd9-b789-11d06a0fa9de) #### 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. ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FYN9ElJ0HYqEgXNmleMOm%2Fimage.png?alt=media\&token=ca61ef5d-e17b-418e-a2ce-4ac71d24d87a) * Add a "**Secqure Protection**" component to make this page protected. Find and Drag it from the left panel under the **Visual Elements**. ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FmpLzdLTP7w82onGomXXR%2Fimage.png?alt=media\&token=cfb2fd3a-83e7-4c41-93de-3eae1c3c1895) **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. ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FP5aP0Wq4rPxj22CCGh5i%2Fimage.png?alt=media\&token=afd0a76a-179b-4cde-a6ef-14b044d04e7d) **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. ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FAIKtMeKyoCHzBX8DXzdL%2Fimage.png?alt=media\&token=baa22143-75d2-4aff-a031-a6bc3f686b28) 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". ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FyKyQcgJW5KQZTY8dcmUB%2Fimage.png?alt=media\&token=071dfdf5-8556-402c-9aac-f5bb098f32db) **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". ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FOeHvQkad8zugtFrSH1BF%2Fimage.png?alt=media\&token=0520ceb1-3412-42e0-b6af-76344fa02fec) #### 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** ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FKC5R7OZOtzgm87wIwaBz%2Fimage.png?alt=media\&token=8a1c8424-be0d-4ef5-81ab-e049d90de277) click to **add an action** to Navigate to the Protected page ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FrdxCjjFX16NCwgOP5pRa%2Fimage.png?alt=media\&token=797b1d58-c682-4af9-801e-0a9f1974240f) * Select **Navigation > Go To Page** action to select **Protected** page as the destination. ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FlJwi5mI4Nvzk2v57Rbgv%2Fimage.png?alt=media\&token=8f809961-e5e9-43fa-96d7-046576a84fda) **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** ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FXXQsRSuD0A2Rvys31C3B%2Fimage.png?alt=media\&token=01fc5e27-3ec9-478e-ba60-d6dafd812dc0) * Set "*access\_token"* as **ThisSecqureProtection's access\_token**, "*identifier"* as **ThisSecqureProtection's identifier** ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FFyvHuceyUURNvyhAk9jF%2Fimage.png?alt=media\&token=43bdc3ce-c110-49d6-99b2-cd56ee20d623) ### Well done :thumbsup:, You are almost there :clap: 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.** ![Check User Logged-in is 'yes'](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FsLI6xS4dPV7H6ZPkUk7S%2Fimage.png?alt=media\&token=8ad00849-9349-4700-90db-08653f19ec38) 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.** ![Check User Logged-in is 'no'](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FzVTTQMfZizCZc9ukiuf4%2Fimage.png?alt=media\&token=9aa09e8e-4732-47ec-bb4f-e48a1f056260) #### 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. ![Show Logout Button Condition](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FVEpQhmBWR6TwnPhi7prH%2Fimage.png?alt=media\&token=4b6ec901-d5b5-4a2a-83c0-d832e356e460) ### **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. ![Add an event for Logout Button Click](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FTiALu1MEAdZG1mayxckC%2Fimage.png?alt=media\&token=dfa4b52c-e983-4669-bc62-6454ed8d036f) * 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. ![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FSdncjZw0sm4byT4EB2bP%2Fimage.png?alt=media\&token=dff48eb0-b206-471d-8513-5c30fe5509a1) 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. :thumbsup:**Congratulations.....You are all set.**