Setting up an authenticated API endpoint in Bubble

Working with external APIs is a common task when building web and mobile applications. Xano and Bubble both support this functionality, allowing you to integrate different services and enhance your application's capabilities. In this guide, we'll walk you through the process of setting up an authenticated API endpoint in Xano and connecting it to Bubble.

Understanding Xano's Authentication

Before we dive into the setup, let's quickly review how authentication works in Xano:

• Xano uses JSON Web Encryption (JWE) tokens for authentication, which is a standard on the internet.
• The JWE token is passed in the Authorization header of the request.
• The format of the header is: Authorization: Bearer <your_jwe_token>

You can easily find the format of the Authorization header in Xano by creating a new API endpoint and returning the httpHeaders environment variable in the response. This will show you the exact format used by Xano for passing the authentication token.

Setting Up the API Endpoint in Xano

1. In Xano, create a new API endpoint or use an existing one that requires authentication.
2. Enable authentication for the API endpoint.
3. (Optional) To view the format of the Authorization header, add the following code to the endpoint's response:

return env.httpHeaders;

4. Run the endpoint and copy the Authorization header value from the response.

Connecting to Bubble

Now that you have the API endpoint set up in Xano, let's connect it to Bubble.

1. In Bubble, go to the "API Workflow" editor and create a new workflow or use an existing one.
2. Click on "Add an API data source" and select "New API endpoint."
3. Enter a name for the endpoint and paste the URL of the Xano API endpoint you want to connect to.
4. Under "Authentication," select "Private key in header."
5. In the "Header name" field, enter Authorization.
6. In the "Header value" field, paste the value you copied from Xano, starting with Bearer followed by the JWE token (e.g., Bearer <your_jwe_token>).
7. Configure the remaining options as needed, such as the HTTP method, request data type, and response data type.
8. Click "Initialize call" to test the connection.

If everything is set up correctly, you should see the response data from the Xano API endpoint in Bubble.

Conclusion

Integrating Xano with Bubble using authenticated API endpoints is a straightforward process. By understanding how Xano handles authentication and following the steps outlined in this guide, you can easily connect the two platforms and leverage their combined functionality to build powerful web and mobile applications.

Remember, Xano simplifies backend development by providing a no-code approach, while Bubble empowers you to create dynamic user interfaces without writing code. Together, they form a powerful combination for building modern applications efficiently.