Xano Connector Plugin for Bubble by Eli Beachy

Michael Udinski

Great news Bubblers!

@Eli Beachy has launched a Xano Connector plugin for Bubble. He created a detailed walkthrough below to teach you how to leverage it:

https://www.youtube.com/watch?v=1xs48PNhmB0

A main benefit of this Connector plugin is it leverages Xano's JS SDK (https://gitlab.com/xano/js-sdk) and avoids Bubble's proxy. This means you call Xano's servers directly using Eli's connector.

Brandon Hassler

Love this plugin so far @Eli Beachy! I recently left some comments on your YouTube video explaining an issue I was running into and figured I'd move the conversation over here to provide more convienient documentation for you (and for anybody finding this in the future).

The Issue

To summarize the issue I brought up: I have a repeating group that makes an API call to Xano and currently uses parameters in the URL to know what values to send to Xano in the request. Normally, through Bubble's API Connector plugin, if a parameter doesn't exist in the URL, Bubble knows what default values to send back based on what I list in the plugin settings (see below)

Since the Xano Connector plugin bypasses these settings, there isn't a convenient place to add these default values when parameters don't exist.

The Fix (So Far)

On Xano's side, since I allow for external sorting and page overrides, those values need to exist within the request for it to work. So what I did to fix those is I utilized the "set_conditional" filter to enter those desired values when an empty value was detected:

The Unsolved Mystery

There was still something weird going on in my testing and then I figured out what the other issue was. Take a look at the JSON I'm sending Xano from Bubble:

If, for example, the parameter for sortBy is missing, Bubble will just send a "" value and my fix above lets Xano do it's thing. But if I have a dynamic value for a non-string such as a number (in this case the maxPrice and catID values) and that url parameter doesn't exist, it creates invalid JSON and can't even send the request.

Using Xano's Run & Debug, here is essentially what the JSON on Bubble's side would look like if the maxPrice value had nothing in it:

Adding set_conditional logic within Xano for these particular values wouldn't do anything because (and I've verified this in the logs) a call is never even made to Xano because (I presume) the JSON is broken on Bubble's side.

I could change all the values into text strings and then convert certain ones back into numbers within Xano but something tells me that is overkill. Is there a way within Bubble I'm not aware of that would allow me to easily set a default value when one is not found (specifially with URL parameters)?

I suppose a cool future update to the plugin could be something where the Xano Query element would also pull in the parameter data set on the Bubble API Connector which would have the default fields baked in:

Thanks again for building such a great plugin!

Brandon Hassler

Oh boy, this shows how little I know about coding 😂 I seem to have found a fix and it was as simple as adding quotations around those dynamic values in Bubble. Tested it in Xano first and then on Bubble and that did it!

Eli Beachy

Hey Brandon! Great detail on the question and I'm glad you've solved your issue. The fantastic thing, which you have discovered, is that we can pass numeric values as strings to an integer or decimal input in Xano and it will be converted into the correct type.

Something that I would recommend is that you use Bubble's format as JSON-safe operator on your values, especially when sending text such as a query that is submitted by the user. There are a number of characters that can break JSON (ie, a quote or linebreak) and when you use the format as JSON-safe operator, Bubble will automatically format your text in a way that will not break the JSON body you are sending.

The quotes around your values will also be added automatically so when getting data from the page url, you could get it as text as illustrated in the image below.

Excited to see the plugin working well for you!

Stefan Pointecker

Hi @Eli Beachy

thanks for this plugin, just messing around with it currently.

Not sure if this is the place for feedback/bug reports, just let me know.

It is working fine so far, but nevertheless I am getting a javascript error in the chrome console:

I am using only one Xano - Query element on that page.

Stefan Pointecker

I found another issue with my setup.

I have an endpoint which has a list of items including a logo image. The response looks like this:

Then I configured the API connector like this

As you can see, bubble sees this property as "text".

And that seems to be an issue with the xano bubble plugin. As it expects now a "text/string" but in reality it gets a json object.

Following exception is thrown:

Any idea how I can prevent this from happening?

Thanks in advance!

Eli Beachy

Hey @Stefan Pointecker, thanks for the feedback!

Re the error 'xano is not defined'. If you drop a XanoAuth element on that page it should solve this issue. I will work on solving this issue in the plugin code so you can run a XanoQuery as a standalone element.

As far as Bubble expecting a 'string' but getting an object there are two possibilities I see here off the bat

1. Make sure the datatype selected on the XanoQuery is the datatype you set up in the API connector call
2. Check that the API connector call data type is set to JSON and not text as shown in the image

Stefan Pointecker

HI @Eli Beachy,

thanks for the quick response!

I do have the correct datatype set but it is a Data request (not an Action request) - if that makes the difference here.

Also the data type on the xano object should be correct:

For me it looks more like an api connector issue than a xano plugin issue.

Can you tell me, if you have an example by accident, if it works for you that the api connector recognizes such a xano response as object and not as text/string?

Stefan Pointecker

@Eli Beachy do you have an ETA for the fix with the "missing" auth element? :)

Stefan Pointecker

Sorry to bother you again @Eli Beachy

But I found another issue. It seems a bit like the issue with the logo.url, but without a javascript exception.

I still have items in my xano response with some json objects in it. e.g. the logo object:

"logo" : {

"url": "http://whatever.com"

}

I used the JSON response to MANUALLY enter it in the api connector, so the structure is known by bubble.

Unfortunately every object key in an item remains empty for bubble. I do see the data in the real ajax calls. See screenshots:

Edit: I also tried with different keys/addons from xano. Same result, always empty in bubble.

Eli Beachy

@Stefan Pointecker I have an update for the plugin about ready to publish to solve some of these errors that are being thrown but I did some testing with the Query element and it should be working properly as is regardless of the error thrown.

The nested objects values not coming through is an issue we are working on. I have identified what's causing the issue and should have a fix sometime this weekend.

Stefan Pointecker

Awesome @Eli Beachy - thanks for putting time into it!

mlovell

Hi Folks,

I keep getting an 'Unable to locate request' error in Bubble when trying to create a new user.

My base url is correct in Xano Connector Group URL, the XanoAuth User element is visible on the create account page, and my workflow with 'Sign the Xano user up with XanoAuth' seems to be correct too.

Where might I be going wrong?

Any advice appreciated.

espptyltd

Thanks @Eli Beachy for your work on making the connection to bubble more seamless.

I wanted to post some general observations about using a front end like bubble with this plugin for feedback and discussion.

Advantages of the plugin

• In anecdotal testing, appears to be almost a second faster for a call compared with Bubble's API connector
• By adding the Xano callout elements onto a page, it is easy to understand which endpoints are being called by that specific page
• Xano auth element maintains “is user logged in” state, so no need to make a separate api request to ensure user is logged in
• Ensures that no backend data passes through the Bubble infrastructure, which can be the difference between compliance vs non-compliance ( eg: HIPAA )
• Once a page loads, any calls to the Xano back end are made to your Xano region's located server

My noted disadvantages of using the plugin

• The Xano API endpoint is exposed to the user
• By having the front end call the API, it is not possible to create an app specific connection to Xano via an app key/token.
• As a result, end users can make requests directly to the Xano API, bypassing the front-end. ( eg: via postman )
• No way to pass shared headers, nor private headers/parameters to Xano

My noted disadvantages may not be an issue for your app, and in that case, the speed and compliance advantages are significant, however, for app's that require an elevated security profile that do not have compliance requirements, the Bubble API connector, in my opinion, is a better option.

Eli Beachy

@Stefan Pointecker If you update the plugin to the latest version the nesting issue should be resolved.

Eli Beachy

@espptyltd You are correct. Making calls from the browser will expose additional details to your end user if they decide to dig into the console. Every app is different and there are definitely scenarios where you'd want to use the API connector instead.

I will note that you can add security measures to the Xano endpoint to only allows requests that come from a specific domain, etc.

ryanck

Hey @Eli Beachy,

The security measures will be really nice.

Do you think you can bypass the Bubble plugin if building a plugin with a server side action JavaScript? Then it won't expose those things?

Just figuring it out some ideas and possibilities.

Thank you so much!

Mimi

Hi Eli @Eli Beachy ,

Love the plugin! I tried it the other day and it worked to login the user. I tried it today and tried for a while but kept getting an error message (I've attached an image). I've gone through your youtube video so many times I don't know what I am missing. If you can help me figure this out, that would be great.

Stefan Pointecker

Hi there,

I have a question/proposal:

I am setting the Endpoint of a XANO Query via condition (so to say lazy, otherwise there would always be a request on page load), so it is empty in the beginning.

This leads to a minor javascript error:

Would be great if you could handle that case somehow. Although it is working as expected anyway.

Thanks!

Mimi

Hi everyone,

I finally figured out why the plugin was working initially then it wasn't. I didn't have the API connector "connected" the second time. Here is a video by Michael that goes through that if anyone needs it: https://www.youtube.com/watch?v=i7Xzzlta73A&t=498s.

Pawel Magdanski

Hi everyone,

After implementing authentication using Xano Connector (great thing). I was about to set up my first query with connector and replace my old one which is using Bubble API. I was following the video, but in the end the data source is empty and an Connector error appears in console.

It's probably some minor mistake from my side somewhere which I cannot detect. If someone have any ideas what may be the cause it would be cool.

vnihoul77

Hi, that's a really great plugin, thanks @Eli Beachy !

I am wondering if and how you handle security when it comes to private fields (like API keys) when avoiding Bubble's proxy?

Cheers 😀

ihayes

@Eli Beachy I am having a problem with the connector not recognizing that the user is logged in. I can see the user being logged into Xano but the connector thinks the user is logged out. This video shows you what I am seeing https://www.loom.com/share/aa52bc1db8c249489c9c13735e96bcb9

I tried to clear my cache, rename the connector, deleted it and tried a new one, notta.

Any ideas would be appreciated

ihayes

@Eli Beachy following up on the comment above...I am getting a 401 error in the console when your connector is calling my auth/me api. I noticed that your call does not have the Authorization Bearer... header in it.

ihayes

Thanks for your help @Eli Beachy. So I have this working now. If you are unable to login, make sure you haven't changed your auth/login and auth/me API's in Xano. For now they need to be out of the box.

• The auth/login response needs to return authToken (for some reason I changed mine to Authtoken) and pass_result
• auth/me needs to return these fields - field names need to be exact - {"id":4,"created_at":1668449225878,"name":"Bob Johnson","email”:”bobjohnson@email.com","name_first":"Bob","name_last":"Johnson”}
• if you need additional fields from the user record, then you can do a get after you are logged in

tm

@Eli Beachy , huge thanks for the plugin. Any plans to expand the auth user data that can be stored via This XanoAuth? Personally, I am looking for user id, to keep track of audit of who made what kind of changes.

zedman

Hi @Eli Beachy thanks for this plugin! I am exploring the possibilities offered by the Xano Action, especially the fact that we can catch the returned value after an API post in Xano. Would you please be able to give a short explanation of how it works ?

Eli Beachy

@tm We are working on making this customizable. I would guess we'll keep the same values that are returned now but additionally allow you to define the user data that is returned as a virtual data type in the API connector as well.

Eli Beachy

@zedman We'll create a tutorial on youtube for using the XanoAction. Will let you know here as soon as it's available.

Julian

Hey @Eli Beachy

Thanks for developing this plugin.
Could you please explain how to add headers to a XanoQuery Element?

I need this in order to add the Authorization header to the call. Otherwise it won't let me do the call since I need authorization enabled.

Thanks!

Eli Beachy

Hi @Julian, if you are using the signup/login actions the authorization is managed for you and will be automatically passed in the XanoQuery element. Otherwise, you can use the ‘Set the Xano auth token’ action and pass in the access token to set your authorization header.