Connect Xano to Bubble

Hey there! In this blog post, we'll show you how to connect your Xano backend with Bubble, a popular no-code platform for building web and mobile applications. By integrating these two powerful tools, you can leverage Xano's robust and scalable backend while utilizing Bubble's user-friendly interface for building your frontend.

Prerequisites

Before we dive in, make sure you have the following:

1. An active Xano account with a workspace set up (if you don't have one yet, you can sign up for free at xano.io).
2. A Bubble account and a new or existing project you want to connect with Xano.

Step 1: Install the Bubble API Connector Plugin

First, we need to install the Bubble API Connector plugin, which will allow us to connect Bubble with external APIs like Xano's.

1. In your Bubble project, click on "Plugins" in the left-hand menu.
2. Click "Add a plugin" and search for "API Connector."
3. Click "Install" on the API Connector plugin.
4. Once installed, click "Done."

Step 2: Set Up the Xano API Connection

Now that the API Connector plugin is installed, we can set up the connection to the Xano API.

1. In the API Connector plugin, click "Add another API."
2. Give your API a name (e.g., "Xano API").
3. Click "Add another API call."

Get All Products

Let's start by setting up an API call to fetch all products from your Xano database.

1. In the new API call, expand the settings and give it a name like "Get Products."
2. Set the "Command" to "GET."
3. Copy the URL for the "Get All Products" API endpoint from your Xano workspace (you can find it under the "APIs" section).
4. Paste the URL into the "URL" field in Bubble.
5. Click "Initialize call" to confirm the data structure.
6. Click "Save."

Get a Single Product

Next, we'll set up an API call to fetch a single product by its ID.

1. Click "Add another API call."
2. Give it a name like "Get Single Product."
3. Set the "Command" to "GET."
4. Copy the URL for the "Get Product by ID" API endpoint from your Xano workspace.
5. Paste the URL into the "URL" field in Bubble, but replace the `{id}` part with `{:id}` (e.g., `https://your-workspace.xano.io/api/products/{:id}`).
6. In the "Parameters" section, add a new parameter with the key "id" and set its value to the ID of an existing product in your Xano database (e.g., `1`).
7. Uncheck the "Private" checkbox for the "id" parameter.
8. Click "Initialize call" to confirm the data structure.
9. Click "Save."

Login a User

To authenticate users and access protected API endpoints, we'll set up an API call for user login.

1. Click "Add another API call."
2. Give it a name like "Login User."
3. Set the "Command" to "POST."
4. Copy the URL for the "Auth Login" API endpoint from your Xano workspace.
5. Paste the URL into the "URL" field in Bubble.
6. Change the "Use as" setting to "Action."
7. In the "Body" section, paste the following JSON structure:

1. For the "email" and "password" fields, uncheck the "Private" checkbox.
2. Set the "email" value to a valid email address for a user in your Xano database (e.g., `prakash@email.com`).
3. Set the "password" value to the corresponding password for that user (e.g., `password123`).
4. Click "Initialize call" to confirm the data structure. You should receive an authentication token in the response.
5. Click "Save."

Access a Protected API Endpoint

Finally, let's set up an API call to access a protected API endpoint that requires authentication.

1. In your Xano workspace, go to the API endpoint you want to access (e.g., "Get All Products") and mark it as "Locked" to require authentication.
2. Back in Bubble, click "Add another API call."
3. Give it a name like "Xano Login."
4. Set the "Command" to "GET."
5. Copy the URL for the protected API endpoint from your Xano workspace.
6. Paste the URL into the "URL" field in Bubble.
7. Click "Add header."
8. For the "Key," enter `Authorization`.
9. For the "Value," enter `Bearer ` followed by the authentication token you received from the "Login User" API call (e.g., `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`).
10. Click "Initialize call" to confirm the data structure. You should now receive the data from the protected API endpoint.
11. Click "Save."

Congratulations! You've successfully connected your Xano backend with Bubble. From here, you can start building your application's frontend in Bubble while leveraging the power and scalability of Xano's backend services.

Remember, this guide only covers the basics of connecting Xano and Bubble. For more advanced tutorials on displaying data, handling user interactions, and building complex workflows, be sure to check out the additional resources provided by Xano and Bubble.

Happy building!