---
title: Visual Element Based (SSO Plugin)
slug: bubble/visual-element-based-sso-plugin
description: Add SSO login functionality to your Bubble.io app
docTags: 
createdAt: 2021-01-25T08:25:57.000Z
---

This method handles the visual element and renders all the selected providers 'Login with x' buttons automatically. 



![](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/Rbrj5k_MLxvQl_LZpD4F__sso1.jpg "Image: SSO Login")





:::hint{type="warning"}
## Important Note

After installing the SSO plugin and adding the UI, make sure you add the LOGOUT workflow before you test SSO. Once you have authorized and gone through the SSO process, the User Interface is automatically hidden.
:::



## Install Instructions

- Click on **Add Plugin** in your Bubble Editor
- [ SSO Login (Multiple Providers)](https://bubble.io/plugin/sso-login-multiple-providers-1610551017887x287322804471726100) plugin by Pathfix Inc. and install it
- Add your Pathfix **Public key** in the Public Key section of the plugin (make sure you have configured the provider integration in your Pathfix account)



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/rcntrcjVp8QtDwOTzbaGg_image.png" size="84" width="1465" height="475" position="center" showCaption="false"}



### Add SSO UI

- You will see 2 elements available for you to use in the Design tab:
  - SSO UI (element renders the UI/visual element for SSO login)
  - SSO Profile (element captures the state of authentication and offers profile info)



::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/dhGbBMHGrCsqq4fNYTx_-_image.png" size="32" caption="Image: SSO Elements" position="center" showCaption="true"}



- Add the **SSO Profile** element to your Reusable Header Element
- The SSO Profile element checks for user connectivity status (we add it to the Reusable Header so it can do a check on user connectivity status across all pages where the Header is placed)



::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/Nd1RDjhdaoGDSD4jyZQii_image.png" size="80" caption="Image: SSO Profile on Header" position="center" showCaption="true"}



- On your Login page, add the SSO Profile Element (if the Reusable Header is placed on Login page then you can ignore this step) (marked in pink)
- Then, add the **SSO UI** element where you want the SSO buttons to loads. This element will load the buttons for your users to sign in. (marked in green)
- Select the providers you want to include as part of your SSO options (marked in blue)



![](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/jZYv0GHpITItTywn9JXVS_image.png "Image: SSO UI Element")





The setup for UI element is complete. Follow through the documentation below to setup the Workflow for capturing user email, profile info and logging in your users using the SSO plugin. 



## Login Workflow

Workflow documentation on how to implement an SSO based registration, integrated with the Current User in Bubble



### Logout Button Setup 

The SSO UI automatically hides itself if you are logged in successfully. So make sure you add a logout button and add the workflow to be able to logout. 

- Add a Logout button element to your Home page
- Setup the Condition for the button to show based on User status (Show Logout button for users who are logged in)



::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/DICCbfRq7Qixx1IBbEXXC_image.png" size="46" caption="Image: Logout button Condition" position="center" showCaption="true"}



- Setup the Logout Button Workflow to take the user to your Home/external page once they have logged out
- Note: Make sure you have included the SSO Profile element on the Logout page



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/FdVf6cKEV-mrEGeyd1D3f_image.png" size="80" width="2424" height="1231" caption="Image: Logout workflow" position="center" showCaption="true"}



### SSO Login Workflow

Once completed, you need to setup the Workflow for the Login process. This workflow will also create the user in your database.

- Go to your Login page in your Workflow and add the following Workflow
  1.





![](https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/z7B8oECUBOL5AmhP0Ntp5_image.png "Image: Workflow setup")





- Follow the below 2 steps to Check for User status and either Sign them up as new user or log them in to your app

***Note**: When you Sign the user up, make sure you follow Bubble's password standard - Password must be at least 7 characters long and contain Capital letter and a number.*



::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/5d1bLmn8z2Ztysy4pnMvc_workflow.png" size="84" caption="Image: Login Workflow" position="center" showCaption="true"}



The Password in Step 1 (image) should be unique. You can choose to keep a password for your system to access your users or pick a unique ID associated with them *(make sure you follow Bubble's password standard of at least 7 characters and contain Capital letter and a number)*

The Password is Step 2 is the one you chose in Step 1 



### Additional Check

When logging the user in, the password works in **combination **with the oauth process. So, if the oauth process is not successful, the user **will not **be logged in. 

However, you may want to add an additional layer of login security check before logging the user in. This is done easily by adding a custom field in your user data

- Add a Custom Field to capture the provider name 

::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/DFD3OliIFVCTIMRP7CYiq_image.png" size="48" width="714" height="523" position="center" showCaption="false"}



- Modify the Workflow to make changes to the field and select the custom field created 



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/QPjZ8h09SWusmu62Fj9Tw_image.png" size="70" width="889" height="1006" position="center" showCaption="false"}



- In Log the user in:
  - Run a check by adding a **Only when** condition to make sure the user custom field matches with the SSO provider value returned



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/_RHFg_Uxf9t8Kok2CN5Oi_image.png" size="74" width="1105" height="841" position="center" showCaption="false"}









Reach out to our support via support\@pathfix.com or live chat through your Pathfix dashboard