Bubble.io is a no-code app development platform. It is used to develop software and application without coding or can say Bubble.io offers a way to build an application without having knowledge of core programming languages.
Challenge faced by Bubble.io Users
Bubble.io users want continuous and seamless access to their portal through their existing accounts. They don't wish for their users to have a separate set of credentials for logging in to Bubble.io. They provide a way to allow their users to log in to the platform seamlessly. But, an interface needs to be created which would allow this.
miniOrange provides SSO solution for Bubble.io
miniOrange provides an integrated SSO solution where a logged-in user's existing session can be used to log the users into Bubble.io by creating a valid JSON Web Token (JWT). Bubble.io user is relieved from maintaining separate user credentials for their users.
As a result, miniOrange Single Sign-On (SSO) solution is implemented. Bubble.io users can now login into their platform using their existing credentials.
Video Setup Guide
Connect with External Source of Users
miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, OpenLDAP, AWS etc), Identity Providers (like Microsoft Entra ID, Okta, AWS), and many more. You can configure your existing directory/user store or add users in miniOrange.
Follow the Step-by-Step Guide given below for Bubble.io Single Sign-On (SSO)
1. Configure miniOrange in Bubble.io
Create a new app and install miniOrange SSO plugin:
First, login to your Bubble.io admin dashboard.
Click on the New app button on the Bubble home page.
Enter the relevant details and click on the Create a new app
Install the miniOrange SSO plugin.
Create a new page ( let’s call it SSO page)
On the SSO page, add the following two elements provided by the miniOrange SSO plugin:
SSO Starter
SSO Profile
Let’s add a header and a text field on the index page:
A text field popup will appear. First, click on the text field and then click on the Insert dynamic data
.
Then select Current user from the dropdown and then again select email.
Now let’s add the Workflow.
Workflow to redirect the user to SSO page from index page when the user is not logged in.
Workflow to Initialize SSO when the SSO page is loaded.
Search for the action SSO initialize and add it when the SSO page is loaded.
Add the workflow on the SSO page, to sign-up , login and redirect the user to the index page. Make sure that the password is same in both the signup and the login workflow.
Note: When you Sign the user up, make sure you follow the Bubble's password standard - Password must be at least 7 characters long and contain Capital letter and a number.
Under the Choose Application Type, click on the JWT.
Search for the application and select Bubble from the list.
Fill in the required fields. Enter the Custom App name of your choice.
.
In Redirect URL field, paste the Bubbles's SSO page URL that we created in the Step 1 and click on “Save”.
Your app is configured successfully. Now to complete the configuration in Bubble, download the Certificate by clicking on the “Certificate” and get the Bubble Endpoints by clicking on the “Edit” from the dropdown as shown in the images below.
Keep the Single Sign-On URL.
Go back to the Bubble dashboard >> Plugins.
Paste the Single Sign-OnURL from miniOrange in the sso-url field and Certificate in the public-key field.
Save the settings.
3. Bubble.io SSO Login
Lets say you have configured miniOrange as userstore.
After accessing the SSO page or Index page of the Bubble app, you will be asked for miniOrange credentials.
Once you have entered the valid credentials, click on “Login” and you will be redirected to Bubble.io
4. Configure Your User Directory (Optional)
miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Microsoft Entra ID, OpenLDAP, Google, AWS Cognito etc), Identity Providers (like Okta, Shibboleth, Ping, OneLogin, KeyCloak), Databases (like MySQL, Maria DB, PostgreSQL) and many more. You can configure your existing directory/user store or add users in miniOrange.
Here, fill the user details without the password and then click on the Create User button.
After successful user creation a notification message "An end user is added successfully" will be displayed at the top of the dashboard.
Click on Onboarding Status tab. Check the email, with the registered e-mail id and select action Send Activation Mail with Password Reset Link from Select Action dropdown list and then click on Apply button.
Now, Open your email id. Open the mail you get from miniOrange and then click on the link to set your account password.
On the next screen, enter the password and confirm password and then click on the Single Sign-On (SSO) reset password button.
Now, you can log in into miniOrange account by entering your credentials.
2. Bulk Upload Users in miniOrange via Uploading CSV File.
Navigate to Users >> User List. Click on Add User button.
In Bulk User Registration Download sample csv format from our console and edit this csv file according to the instructions.
To bulk upload users, choose the file make sure it is in comma separated .csv file format then click on Upload.
After uploading the csv file successfully, you will see a success message with a link.
Click on that link you will see list of users to send activation mail. Select users to send activation mail and click on Send Activation Mail. An activation mail will be sent to the selected users.
Click on External Directories >> Add Directory in the left menu of the dashboard.
Select Directory type as AD/LDAP.
STORE LDAP CONFIGURATION IN MINIORANGE: Choose this option if you want to keep your configuration in miniOrange. If the active directory is behind a firewall, you will need to open the firewall to allow incoming requests to your AD.
STORE LDAP CONFIGURATION ON PREMISE: Choose this option if you want to keep your configuration in your premise and only allow access to AD inside premises. You will have to download and install miniOrange gateway on your premise.
Enter LDAP Display Name and LDAP Identifier name.
Select Directory Type as Active Directory.
Enter the LDAP Server URL or IP Address against the LDAP Server URL field.
Click on the Test Connection button to verify if you have made a successful connection with your LDAP server.
In Active Directory, go to the properties of user containers/OU's and search for the Distinguished Name attribute. The bind account should have minimum required read privileges in Active Directory to allow directory lookups. If the use case involves provisioning (such as creating, updating, or deleting users or groups), the account must also be granted appropriate write permissions.
Enter the valid Bind account Password.
Click on the Test Bind Account Credentials button to verify your LDAP Bind credentials for LDAP connection.
Search Base is the location in the directory where the search for a user begins. You will get this from the same place you got your Distinguished name.
Select a suitable Search filter from the drop-down menu. If you use User in Single Group Filter or User in Multiple Group Filter, replace the <group-dn> in the search filter with the distinguished name of the group in which your users are present. To use custom Search Filter select "Write your Custom Filter" option and customize it accordingly.
Click on the Next button, or go to the Authentication tab.
You can also configure following options while setting up AD. Enable Activate LDAP in order to authenticate users from AD/LDAP. Click on the Next button to add user store.
Here's the list of the attributes and what it does when we enable it. You can enable/disable accordingly.
Attribute
Description
Activate LDAP
All user authentications will be done with LDAP credentials if you Activate it
Fallback Authentication
If LDAP credentials fail then user will be authenticated through miniOrange
Enable administrator login
On enabling this, your miniOrange Administrator login authenticates using your LDAP server
Show IdP to users
If you enable this option, this IdP will be visible to users
Sync users in miniOrange
Users will be created in miniOrange after authentication with LDAP
Click on the Next button, or go to the Provisioning tab.
User Import and Provisioning from AD
If you want to set up provisioning, click here for detailed information. For now, we are skipping this step by clicking Skip on Provisioning.
Attributes Mapping from AD
By default userName, firstName, lastName, email are configured. Scroll down and click on Save Configurations. To fetch additional attributes from Active Directory, enable Send Configured Attributes. On the left side, enter the name that you wish to release to the applications. On the right side, enter the attribute name from Active Directory. E.g., if you wish to fetch company attribute from Active Directory, and send it as organization to configured applications, enter the following:
Attribute Name sent to SP = organization Attribute Name from IDP = company
Test Connections
You will see a list of directories in External Directories. Go to the directory you have configured, click Select, then go to Test Connections and click on it.
Click on Test Connection to check whether you have enter valid details. For that, it will ask for username and password.
On Successful connection with LDAP Server, a success message is shown.
Test Attribute Mapping
You will see a list of directories in External Directories. Go to the directory you have configured, click Select, then go to Test Attribute Mapping and click on it.
A pop-up will appear to add the username. After clicking Test, you will see the Test Attribute Mapping Result.
Set up AD as External Directory configuration is complete.
Note: Refer our guide to setup LDAP on windows server.
miniOrange integrates with various external user sources such as directories, identity providers, and etc.
