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

Integrating Bubble.io with Asana allows you to synchronize data between these two platforms. This guide will walk you through the integration process using an API connection from Bubble to Asana. This method requires some knowledge of web APIs, but the steps below should guide you through the process.

Preparation
Before starting, ensure you have the following:

• An active account on Bubble.io
• An active account on Asana. This should be a premium account since certain API features are not available on the free tier.

Step 1: Setup API Connetion in Bubble.io

• Log in to your Bubble.io account and navigate to your application dashboard.
• Choose the application you want to integrate with Asana and then go to the "Settings" tab.
• From the menu on the left, select "APIs" and then click on the "+ Add another API" button.
• Enter a name for the new API connection. For clarity, we suggest something like "Asana API".

Step 2: Add API URL in Bubble.io

Next, you'll need to add the base URL for Asana's API.

• In the "Base URL" field, enter https://app.asana.com/api/1.0/.
• Note that this URL always ends with a trailing slash ("/").

Step 3: Setup Authorization

• In Asana, navigate to the "My Profile Settings" then "Apps" and scroll down to "Developer Apps".
• Click on "+ New App", fill out the required details.
• In the "Redirect URL" field, input the URL as https://bubble.io/postmessage_auth.
• Once created, you'll get an "Client ID" and "Client Secret".

Return to Bubble.io and:

• Set the "Authentication" to "Self-handled"
• For "Login+Signup Workflow", select "Handles Logins"
• Set "User Identifier Field" as gid
• Set "Access Token field" as access_token
• Check the "Use refresh tokens" box.

Step 4: HTTP Header

• For "Token Name in The HTTP Header", enter Authorization
• For "Prefix for the access token", enter Bearer

Step 5: Token URL

• Leave the "Token is sent via JSON body" unchecked.
• Set the "Token URL" as https://app.asana.com/-/oauth_token
• For "Token Call Type", select POST.

Step 6: Add Parameters

Add four parameters:

1. client_id with value as the Client ID from Asana
2. client_secret with value as the Client Secret from Asana
3. redirect_uri with value https://bubble.io/postmessage_auth
4. grant_type with value authorization_code.

Also, add two values for to use while logged in:

1. refresh_token with value Result of step 1's refresh token
2. grant_type refresh_token.

Step 7: Configure API Calls

You can now configure API calls to access, create, or modify data in Asana.

• Go back to the API connector window's main page.
• Click on Add another call.
• Specify each call's Settings, including VERB, API endpoint, and parameters if needed.

Step 8: Initialize and test API Call

• Click on "Initialize Call" Button.
• Bubble.io will prompt you to authorize the app. Sign in with your Asana account and authorize the access.
• If everything is correctly set up, the API call will be initialized and ready for use in your application.

Remember to hit save before exiting out of any windows in Bubble.io. The setup for the Asana integration is now complete. Bubble.io can use these API calls in workflows and data sources throughout your Bubble application.