My "How To Connect Bubble And Xano (Professionally)" Guide - Part 1

Felipe Letelier

Hi everyone! I started working on a guide to teach beginners, intermediate and even advanced devs to connect Xano to Bubble professionally.

The reason I wanted to do this is because I have noticed that there are a lot of devs having troubles managing app versions, authentication, among other topics. At the same time I couldn't find any tutorial/course that showed how to do this in a secure and scalable way, so, I decided to create a guide myself based on my experience.

This is the first of a series of blog posts and videos that will, hopefully , help you make your Xano/Bubble apps more secure, maintainable and scalable. In this part 1, I'm going to show you how to sync and manage versions/environments between Bubble and Xano, allowing you to keep separated versions of your application for development, staging and production.

Blog post

Also, I recorded a video following the same steps explained in this first part, sadly my english is not the best so I hope you can still understand me 😆.

The second part will be about authentication, how to take advantage of the built in user system of Bubble to store your access/refresh tokens and keep them safe, and review other methods I use to secure my public/global endpoints.

Please, feel free to comment any suggestion that you have that could improve this guide!

Cheers!

Ryan Anderson

This is brilliant ! I've been thinking about implementing this recently so your step by step guide on how you approached it is super helpful.

Really interested to see part 2... is it on the way?

Felipe Letelier

Hi , I'm glad you found it helpful!

The post is practically ready, I just need to check the grammar/orthography and record the video. I took my time as I had a lot of work during the past month and was chatting with Bubble support to see the feasibility of setting HTTP Only cookies, but it is not possible using the API Connector directly. I also wanted to create a simple plugin to make the process easier, but I will leave that for the future. 

So, basically what I will cover is how to protect endpoints that not require user authentication and how to store tokens in Bubble's user table and local storage.

I will do my best to publish it this week 🤞

Ryan Anderson

Thanks for the update.

I'm storing auth tokens in Bubble's user table too but the problem is that it doesn't last longer than 3 days so you can't keep users logged-in longer than that...

Are there any workarounds for this?

Felipe Letelier

 Yep, there is. Bubble provides a cookie that , as you mentioned, last 3 days (and that from the first time that the user opened the app in that specific browser) and this cookie "creates" a temporal "user" for you which keeps data you have created while you are logged out and it is passed on to the account you create or signin with. If you don't authenticate yourself (using Bubble built in user system), the cookie expires (losing the associated data) and creates a new cookie that also last 3 days.

You have to actually log the user in using Bubble's built in auth system and keep it sync with Xano. I will try to publish the post asap and maybe let the video recording for another day, I explain in detail how to:
• Create the related endpoints
• Keep Bubble's and Xano's authentication sync
• Create automatized flows to check that the token is not expired

Will see if I can manage to publish it today or tomorrow

Ryan Anderson

Sounds very cool!

I'm not in a rush, I can live with the 3 days for now... I have the workflows in place to deal with a missing or expired token.

But would love to improve that UX at some point so users don't have to keep logging back in.

Felipe Letelier

 https://www.igniuslabs.com/post/how-to-connect-bubble-and-xano-professionally-part-2 here is the second part, I still have to record the videos. 

Also, I created a plugin to make it easier to handle versions and tokens (if you are using local storage). This is the link https://bubble.io/plugin/xano-token-manager-localsotrage-1664822294838x258602818666496000 if you have any questions let me know, I will record another video to show how the plugin works.

Ryan Anderson

 Thanks so much. There's a lot in here to digest and figure out if/how it would apply to my app.