I have a external API which provides signup , login , logout ,
Signup and login APIs in response return a jwt token , I want to save it to the browser such that I can use it on every page and even after reload it gets data from locls storage of the browser to maintain session… how can I achieve it I am using external API that’s why
Hi saurabhebi,
As you’re seeing, Bubble.io doesn’t provide maintaining session across pages using local storage, specifically for JWT tokens. The only way I know of to go about this without paying for a plugin is to use the free Toolbox plugin to run some custom javascript or run some javascript in your bubble workflows using localStorage.setItem() and localStorage.getItem().
Ill write some rough code and i added some console logs for you. Open your console by hitting f12 on your keyboard and going to the console tab. They should print there.
Here’s what you’d do when you save it to local storage~
var token = “YOUR_JWT_TOKEN_HERE”;
// Save it to localStorage under a key name ‘jwt_token’ or whatever you want to call it
localStorage.setItem(“jwt_token”, token)
Retrieving it…
// Get JWT
var storedToken = localStorage.getItem(“jwt_token”);
// Check if it’s present
if (storedToken) {
console.log(“JWT retrieved from localStorage:”, storedToken);
} else {
console.log(“No JWT found in localStorage.”);
}
And going further when they Log out
// Remove from local
localStorage.removeItem(“jwt_token”);
// Verify it’s removed (if you want)
var check = localStorage.getItem(“jwt_token”);
if (!check) {
console.log(“JWT successfully removed from localStorage.”);
} else {
console.log(“JWT is still present:”, check);
}
So try installing the toolbox plugin (free), go to your workflow and do Plugins → Run JavaScript, and copy paste them into that.
This should provide the capability to store and retrieve your JWT from within bubble workflows. This should ensure the token persists across pages after reloads too (because we’re using Local Storage which persists after it’s explicitly removed or the usre clears their browser data). Additionally refreshing and navigating to another page will still keep the same token avail.
Please let me know if this works
would this be a better option than using a custom state on a single page app to show data in a RG? they do not always refresh as expected and storing them in a temp table seems too WU expensive.
Thanks Man , but I used plugin called Local data and Session
It’s doing the job for me
Thanks Man , but I used plugin called Local data and Session
It’s doing the job for me . I will close this issue now , but bubble should allow user to store data in local storage by default
Why someone should use plugins