Local Storage of Auth Tokens in Bubble

Felix Tan-2030210

Not a question, but just posting this because there aren't good posts for this.

The recommendation from the Xano team in connecting to Bubble is to use the Local Storage plugin that's available on the Bubble plugin marketplace. This typically works, but in testing, I've found to not be consistently reliable. [image.png]The recommended plugin. The logo has since changed since  did his tutorial video.

Frequently, instances like this happens: [image.png]I've contacted Bubble's team multiple times and wrangled with them over multiple emails. A summary of events: 
• They claim that sometimes, the value of the authToken can't be passed on fast enough into an external API call because it's stored in a 3rd party external plugin. 
• This is despite the workflow appearing to be functional in Bubble's debugger.
• Bubble's technical support team claim that simply adding a "Delay" using their "Add a pause before next action" function will help solve this issue.[image.png]
• I've tried this, and while it works sometimes, have failed multiple times as well, even if I increase the "Delay" duration.
• I've also tried to go around this by saving the authToken into Bubble's Custom States each time a page loads, to no success. [image.png]

Solution I've found:
Bubble's "Current User" functionality essentially saves a cookie to the browser, even if the user isn't logged in by Bubble standards.[image.png]What this means is that you can save data into the "Current User" object. By creating a field "authToken" in my User table in Bubble, I can now use the "Current User" functionality inbuilt into Bubble as a substitute for the Local Storage Plugin. 

I've found this to work 100% of the time (so far) - somehow being in the Current User object means it's "fast enough" to be passed into external API calls.

Hope this saves some people time. Spent days wrangling around this.

Edit: The Current User cookie that Bubble sets expires after 3 days if the User isn't logged in with Bubble's authentication system. Just a point to note here to not use this solution if this is a dealbreaker for you. 

Chris Coleman

Really interesting! I just worked through the Local Storage example myself last week and hadn't observed any of this behavior. My application was very simple, however, so it's definitely not a bad idea to explore other options if consistency becomes an issue. Will dive into this more. Thank you for sharing!

Facundo Lucci

That’s boss Felix, thank you!

Ray Deck

Wonderful contribution to the no-code community,  !

Future

Hey... Just wanted to chime on a solution that works everytime and doesn't use "pauses" where you're not sure that pause will work...

Solution : 
• Add an event "When page is loaded" (if it's not already there) to your workflows...
• Add the workflow : "Do get Web Storage A"
• In this workflow page, click the "Click here to add an event" button.
• Set "Run this" to "Every time"
• Set "Only when" to "Webstorage A's Web Storage value is not empty"
• Then.. set your authentification or data workflows in this event...


This way, you make sure the cookie is always loaded... I would then suggest to do custom events (when webstorage is empty... if your authToken isn't valid, etc...)

Felix Tan-2030210

 Thanks for chiming in Anthony. 

My original workflow is indeed from a "page is loaded" event. The issue I highlighted, a sequential order of events that should happen when the page is loaded, which includes getting the authToken from Local Storage, and then sending it onwards to a 3rd party API doesn't always happen 100% of the time, even with Custom Events included in.

So the issue isn't with whether the "Page Load" event runs - it does - the issue is with the steps *within* the workflow.

Future

 The way to fix this is by using custom event workflows I have a fairly complicated setup for authentification with bubble/xano. And even though I have a "When page is loaded" event... Most of my auth process starts with "When webstorage A state is not empty"...

When page is loaded : Check for a cookie...
When web storage is not empty : (cookie found) : Auth or send to login page if invalid.

By putting in "custom event workflows" different events, you make sure that bubble executes your workflows one after the other instead of in parallel

Felix Tan-2030210

 

As mentioned, I did use Custom Events as well Anthony 🙂I use Custom Events, Custom States, quite extensively and have very complicated workflows in my app as well. 

I've gone through this with Bubble support and gone through every alternative, including yours: 
When page is loaded : Check for a cookie...
When web storage is not empty : (cookie found) : Auth or send to login page if invalid. 

I'm glad it works for you (🥳), but like I mentioned, this doesn't work 100% of the time, though it works most times. 

The method above works for me, which is why I'm sharing it. I'm not asking anybody to follow or use it in anyway. 

Prince NZANZU

Hello , Thank you for your experience, it is very clear. 
But I have a question: how do we save the token in the user table? 
I've tried but it's not possible because the user has to be logged in to be able to save something.