I would like to build an app that will connect to a multi-tenant REST API. It will allow me to connect to different accounts, by setting the API's authorization header with the account's API key.
I would like to be able to add a new API key (for a new account) easily. The app should then add it to localStorage, so that I don't have to go get the API key each time. I should then be able to switch account easily between those already in the localStorage.
So I thought I could do that with a dropdown box that allows new entries. The dropdown would be filled from localStorage (if there is anything). On submitting a new entry not in the list, it would get added to the localStorage.
Is that possible?
I've been trying but really struggling with it.
To start with, there doesn't seem to be an event handler for "new entry not in the existing options".
Secondly, it looks like localStorage values can only be strings? No arrays or objects?
Take out the local storage and find a way to manage the local storage without the strings and that should solve your problem hopefully
Lot of caveats about number of records and who has access to the app etc but it feels like you're asking the right kind of questions around minimising trips to the server - but unless you're building a large multi-app system then you probably wouldn't need to use local storage for this, you could use a temporary storage instead.
This would be safer in the case that API keys change too, you'd get a fresh set of all the keys once when the page loads and hold them in memory during the session, no need to keep querying the keys from the server.
I think temp storage is more flexible/forgiving with what you're trying to achieve too, local storage is a key/string based approach as you've discovered.
https://docs.retool.com/docs/temporary-state
https://docs.retool.com/docs/share-data-between-apps
In logic terms I think what it would look like to me is:
- get all API keys
- store results in temp storage
- Show dropdown based on temp storage value
In the case that a new API is added (I'm assuming that's not something that happens very frequently) I'd make the call to save the new one and then run the load process above to refresh the list rather than trying to add the new record into storage
Thanks for your detailed answer. The use case is a bit different here actually.
The API does not allow me to get all API keys (multi-tenant platform with solid level of security). So I have to go to that platform's UI to generate an API key for the tenant accounts I have access to.
I therefore need to "register" those keys in my retool app to allow me to easily switch between accounts. I want those keys to persist between sessions in the browser, hence the use of localStorage.
I did actually manage to store objects in localStorage
My main issue was with making a dropdown that would allow me to allow new entries and then store them back into localStorage alongside the others. But then I decided that it was clunky and I created a modal form instead to be able to manipulate the localStorage separately from the dropdown. Which now actually allows me to store more detailed info into localStorage as well (such as a label to associate to the API key)