Bubble x Xano : How to write / get localeStorage (doesn't work for me)

[ejaal3]

Hello everyone,

I’m totally lost with APIs and localStorage… I’ve been stuck on this for 3 days straight and nothing I try seems to work. I just don’t get it. A few times I managed to see the auth_token appear in “step by step” debugging during login, but I already forgot how I did it because I feel like I’ve tried everything.

Let me explain:

My goal is to display a message like Hi <first_name> on my dashboard page.

My setup in Xano:

• My login API returns the auth_token as an object:

  { "auth_token" : "string value" }
  
  

• My auth/me API (authentication required) returns:

  { 
    "id": uuid,  
    "email": email,  
    "First_Name": text,  
    "Last_Name": text  
  }
  

My setup in Bubble:

• In the API Connector, I configure my API as a JSON Action.

• For the GET request, in the header I set:

  • Key = Authorization

  • Value = Bearer

• For initialization I used Bearer + a real token and it worked fine.

I also place the LocalStorageA element (1px by 1px) on both my login page and my dashboard page.

Login page workflow:

When the Login button is clicked →

1. Call my API log-in with Input email's value and Input password's value

2. Write LocalStorageA

   • keys: auth_token

   • values: Result of step 1's auth_token

     

3. Go to Dashboard.

In Bubble’s step-by-step debugger, I do see my auth_token in the value after login.

Dashboard page workflow:

When the page loads →

1. Get LocalStorageA (keys: auth_token)

   

2. Call my API auth/me with:

   • Header Authorization = Bearer LocalStorageA's Values:first item
     (I also tried without Bearer, and without first item, but still no success)

3. Create a custom state on the dashboard for firstname.

   

4. My text element shows: dashboard's first_name.

In step-by-step debugging, I can see my auth_token at every step.

But at the final step, the API returns:

{ "code":"ERROR_CODE_UNAUTHORIZED", "message":"Invalid token." }

And in Xano’s request history it also shows Error 401 – Invalid Token.

What I also tried:

I tried the Current User method:

Login button → Call API log-in → Make changes to current user (auth_token = Result of step 1's auth_token) → Go to dashboard.

In the API Connector, I set Use as Action with Authorization = Bearer (just Bearer).
When I initialized with a real token, it showed me id and First_Name.

But in step-by-step, at the step Make change to current user, the auth_token is empty — while in Xano I can see the request was sent and the token returned.

And when I try to display dashboard's current user's first_name, nothing shows — makes sense since the console says Invalid Token.

---

In short:

I just don’t get it. Why is this so difficult?
All I want is to store the token after login, call /auth/me with that token, and show the user’s first name.

If anyone can help me get this working, I’d really appreciate it

Arthur

[ratsoundsystems]

IF you inspect your bubble logs, what info do you see being sent with the auth/me api call?

[ihsanzainal84]

Share the API connector setup

[boston85719]

Is the token being read properly from local storage and in the local storage element in the dashboard. Local storage requires a write and read. In your explanation you state clearly you’ve confirmed the token as properly written to local storage on login page, but don’t specifically mention verifying the local storage is read properly by local storage element in dashboard before you run the call using that local storage element value.

If it was me right now, that is what I would check, verify and rule out as cause before anything else.

[ejaal3]

Hi ratsoundstystems,

Here’s what I see step by step:

• On my login page I successfully write the auth_token to localStorage.

  
  

• On my dashboard page, I can confirm that the value is properly read, because the Bubble debugger clearly shows the auth_token in plain text.

  
  

• In my API call (see this screenshot), I don’t see Authorization: Bearer <auth_token> because in the API Connector I already have Auth_token set up.

  

• 

• If I remove Bearer from the API Connector and try to add it directly in the API call, the result is still not successful.

Thanks for your reply

[ejaal3]

Hi ihsanzainal84,

Here is my API Connector setup.

I tried with Bearer in the API Connector and without Bearer in my API call, then I also tried without Bearer in the API Connector and adding it in my API call instead — neither option works.

However, if I put a real key hardcoded in the API Connector, I do get the first_name displayed correctly on my dashboard.

Thanks for your replay,

[ejaal3]

Hi Boston 85719,

Thanks for your reply,

I tested with a “set state auth_token to dashboard” and it does display the value of my auth_token, so it looks like it is being read correctly, right?

[ejaal3]

I really feel like the problem comes from this step.
If, in my API Connector call, I put Bearer + my key hardcoded, it displays my first name.
But as soon as I change it and use either Bearer or nothing (depending on whether I put Bearer in the API call or not), it doesn’t work anymore.

And the strangest part is that in the API call I can actually see my auth_token showing up, but the response still says “Invalid Token”!

Look these steps (the javascript step is just for console.log my auth_token and it displays it well).

[ratsoundsystems]

Well in this image, you are missing the Bearer + a space proceeding your token.

I was suggesting you inspect the server logs of your Bubble App which should tell you what is being sent to Xano from the backend.

[ejaal3]

Yes, but even if I add “Bearer ” (with a space), it still doesn’t work.
I’m trying two things:

1. Put “Bearer ” in the API Connector and not include it in my API call,

2. Or leave nothing in the API Connector and put everything in my API call (meaning “Bearer ” + space + my key).

   

But neither option works.
Here are my Bubble logs

Thanks for your help !

[ejaal3]

And look how strange this is: in my server log it shows Bearer with nothing after it, while in my step-by-step debugger it shows Bearer + space + my auth_token.

[ratsoundsystems]

I think the server log tells the story, the api call does not have the auth token in it, just “bearer” and a blank space.

There probably needs to be a different/better way to ensure the local storage value is retrieved in time for the api call to be fired.

[ejaal3]

Yes, do you have any idea how? I tried with another plugin, with the Current User method, and even with JavaScript, but nothing works.

I can’t get my auth_token to be recorded in the header, even though the step-by-step debugger shows that it’s there.

Thanks for your answers

[ejaal3]

More crazy information!
I added a condition on my API call — “Only when This page’s auth_token is not empty” — so it should only run if it’s filled.
Right before that, the previous step reads my auth_token and it does display a value.
My API call also shows an auth_token, but the Bubble log says “Action failed” as if my auth_token were empty!!
Yet in the step-by-step debugger it clearly shows the auth_token.

[ratsoundsystems]

Yeah the added pause won’t do anything I am pretty sure that just pauses displayed items.

And step-by-step imho is not a helpful way to debug since the actual workflows do not occur in this manner, so I do not recommend relying on it.

It is clearly a problem with the reference to the plug-ins value. I have a app with a xano setup I made a few years ago I never deployed, and I used the local storage plug-in at one point.

If I have time this evening I will see how I did it.

[ejaal3]

Thank you so much, that would really help me after being stuck for 5 days. I would be very grateful ratsoundsystems

[ratsoundsystems]

I reviewed some of the documentation, i think the aforementioned “Current User” method is the simplest way to do this, and avoids a plug in too. What happened when you tried that method?

And when you initialize the auth api, the auth token is saved as text correct?

OK, I had a chance to test the method Xano recommends in one of their videos, storing the auth token as a temp for the Current User. Works great, it is easier than a plug in.

I recommend it.

[boston85719]

First, there would be no reason to set the custom state after the local storage value is read, since the local storage element is essentially acting as a custom state already. Second, I think running this api call from the client device is likely a security issue, unless the auth token is time limited in it’s validity.

Ways to confirm everything in your setup as of now is working properly:

1. Run in debugger as you are
2. Grab the token and copy
3. Go to api connector and try to run call with that token
4. If that fails, something is wrong with the token, if it is successful, something is wrong with how you are running the api call in regards to the token.

Also, what is the run javascript action for?

In most screen shots of debugger the bearer is missing. I suggest for the action that runs the call use ‘arbitrary text’ as the dynamic expression in the token parameter. Then in that add the word Bearer, then put a space, then do the dynamic expression for the local storage value. This will help ensure it is properly structured.

After doing all of that stuff. Test again, but use the same auth token that worked in the api connector and hard code that into your action step and see if it still works or not.

If it does but then test again with a dynamic token, the issue likely is the token you feed in via the local storage, where for some reason it might not be the full token or is somehow getting distorted.

@ratsoundsystems

There probably needs to be a different/better way to ensure the local storage value is retrieved in time for the api call to be fired.

Yes, put the read local storage into a custom event. Make it return the value, then have the api call in it’s own custom event as well. This will ensure the token is retrieved prior to attempting the api call.

@ratsoundsystems

OK, I had a chance to test the method Xano recommends in one of their videos, storing the auth token as a temp for the Current User. Works great, it is easier than a plug in.

If the local storage plugin setup is the issue (where maybe there are different values in local storage and they are not cleared and getting crossed up), it might just be simpler to use that approach of temp value on the current user.

[ejaal3]

Hi boston85719,

I’ve already tried that, and everything works fine when I use a real auth_token. I also tried using arbitrary text, but without success.

The JavaScript action was just to console.log my auth_token and confirm that it exists. When I hardcode everything, it works perfectly. The only issue is that my API call doesn’t seem to pick up the value from localStorage, and I can’t figure out why.

But great news, I finally got it working with Current User I’ll post a message below with the details

[ejaal3]

Hey hi!

First of all, a big thank you for your help. I think thanks to you, I’ve managed to solve my problem! I finally got it working by using Current User, setting my API as a data call and not an action (which I probably forgot the first time I tested with Current User).

To recap, it didn’t work for me with the LocalStorage login method, but I decided to drop that approach and go with Current User instead.

Here’s my final setup for anyone else who might run into the same issue:

On my log-in Page:

On my dashboard page (arbitraty text is juste texte like “Hi” and some emoji):

And put your API CALL in Data mode, not action.