Visual Element Based (SSO Plugin)
This method handles the visual element and renders all the selected providers 'Login with x' buttons automatically.
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.
- Click on Add Plugin in your Bubble Editor
- 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)
- 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)
- 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)
- 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)
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.
Workflow documentation on how to implement an SSO based registration, integrated with the Current User in Bubble
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)
- 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
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
-
- 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.
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
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
- Modify the Workflow to make changes to the field and select the custom field created
- 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
Reach out to our support via [email protected] or live chat through your Pathfix dashboard
