Bubble.io and Box integration: Step-by-Step Guide 2024

Step 1: Getting started with Bubble.io Integration

In order to integrate Bubble.io with Box, you’ll need both a Bubble.io and a Box account. If you don't have a Box account, you can create one for free at www.box.com. On the other hand, if you don't have a Bubble.io account, you can create one for free at www.bubble.io.

Step 2: Setup the Box App

• Go to Box Developers (developers.box.com) and click on Create New App.
• Select Custom App and click on Next.
• Choose OAuth 2.0 with JWT (Server Authentication) as the type of security and click on Next.
• Name your application accordingly and then click on Create App.
• After creating, a page will appear. Click on View your app.
• The app's page will display some important details like client_id, client_secret, public_key_id and JWT_key, we will use these to configure Bubble.io.
• Scroll down and click on Add and manage public keys. Under Public Key, click on the + button to add a key. This generates the Public Key ID which we will use later.
• At the bottom, in the OAuth 2.0 Credentials section, you'll see client_id and client_secret.

Step 3: Generate a Public Key

In order to integrate Box in Bubble.io, we need a public key. Follow the steps below to generate a public key:

• Open your terminal and navigate to the location where you want to save your key.
• Run openssl genrsa -aes256 -out private_key.pem 2048 to generate a private key.
• Run openssl rsa -pubout -in private_key.pem -out public_key.pem to generate a public key.
• Open the public_key.pem file in a text editor and copy the contents.

Step 4: Setting up Box Configuration

• Go back to the app’s page in your Box Developer console.
• Paste the public key into the public key field and save the changes. This would generate the public_key_id.
• Go to Application Access and make sure to select Enterprise.
• Under Advanced Features, ensure that Perform Actions as Users and Generate User Access Tokens are both checked.
• Finally click on Save Changes.

Step 5: Configure Bubble.io environment

• Open your Bubble application and go to Plugins > Add Plugins.
• Search for Box and click Install.
• Now go to Settings > General > API Keys > Box.
• Paste your client_id, client_secret, public_key_id and JWT_key from the box app settings earlier into the corresponding fields in Bubble.io.

Step 6: Manage Scopes

• Go back to Box App Console.
• Under Scopes, make sure the following are checked: Manage users, Read and write all files and folders stored in Box, Read and write all groups, Read and write all user information.
• Under Application Scopes, check manage enterprise properties.

Step 7: Test Integration

• Now you can create workflows in Bubble using Box. To test if everything has been done correctly, you can create a simple user registration workflow in Bubble.io and use Box actions to store the user’s data.
• Run your application to see if it works. If the authentication was successful, you should be able to perform actions on Box through Bubble.io.

Note: The steps above show how to configure Bubble.io to connect with Box using server-side (back-end) operations. Different steps may be necessary if you want to perform front-end operations (i.e. making API calls directly from the user's browser).

Remember to keep these secret keys private and safe, they allow full control over your Box account. Anyone with access to these keys will be able to manipulate your data.