I have a Create-React application with a settings page in it, inside this settings page, the user has several inputs (form inputs) inside of which he can define certain parameters like backend server endpoint, API endpoints... so here is the problem, how can I persist this data in this application without the need for an additional backend server for my front-end application, please note that I tried using .env variables but I couldn't manage to update those based on user input, config files didn't work too since the front-end app is only alive inside the browser and can't access the files, I also tried using Local storage, it worked but again, I can't persist that to the whole application (since Local storage is bound to the browser, changing the browser will change the data) , lastly I considered using redux and store the configs in the store and update the state based on button clicks, but I'm not really sure if this is the right way to do it.
basically there are several ways to store the client side data in browser; like cookie storage, local Storage, and if you are using redux may be redux with redux-persist could be a great choice for this type of use case.
but as you mentioned you want to persist that data between user sessions of the application, for example you user can access the application from chrome, firefox, or even from his/her mobile browser, honestly for your situation there is nothing rather than store the required input data in database ( backend folks should do this ) and provide the data to the authenticated user in an api. there is no way rather than that!
Related
I would like to add functionalities depending on whether or not the user logged in is the administrator but I don't really know which condition (for conditional rendering with delete buttons etc) I should use to check if the user is the admin or not. Is it safe to do it based on the id of the user ? In the first place, I thought about testing the user in every component I want him to have functionalities, with a state called "user" using recoiljs to get access to the user in the whole app but I'm afraid people could change the state with the react tool extension and then pretend they are the admin and so delete articles and stuff... What's the best way to test if a user is the admin or not using firebase authentification in a react project ?
It's never safe for client code to assume admin responsibilities without absolute enforcement from your backend. It's unsafe because client code can be compromised and might not work the way you expect. And it's running on a device that the user controls fully.
Client code can check some indicator to see if the user is admin (in whatever way you find suitable), but the final check needs to happen on your backend, either through security rules (if you're using Firebase products like Realtime Database, Firestore, or Cloud Storage), or in code running on a secure backend, including products like Cloud Functions.
I built an app with authentication, and upon navigation to private route, I'm checking in the redux store if user object exist. when reloading the page, obviously the store clears. I thought of persist-state solution with redux-storage , but I see that the data is being stored in the LocalStorage.
is it safe that all data is being shown there? information like user id, name, email, etc..
Thanks
Do not store plaintext values (user name, id, password etc.) in localstorage. Assume the following:
Someone with access to the physical machine: he can either grab the Chrome profile files, containing my localstorage, or he can open Dev Tools in my browser and see stuff he shouldn't.
A malicious browser (or app with a browser control) can gain access, by getting you to browse to the site and copying the values.
Never rely in your app on info you got back from localstorage. Assume someone manipulated it. Crass, imaginary example: if you store my cart total in localstorage, to save time on recalculating it later, assume I changed it to a lower number on the client.
Finally, assume some of your users will use a private tab to browse to your site, at which point you wont be able to utilize localstorage. So why not design to work without it?
I use the gpl version 5.1.1 of ExtJS, no other library or framework (no ASP...).
I use LocalStorage proxy in a Store to store/save the user preferences. I call "user preferences" the default filter values and other display options. I use LocalStorage because users mostly use the same PC and their preferences can be stored localy.
I don't plan to save these data to the server DB, but I could.
I would like to use Memory proxy for session variables which must be reinitialised every time the user log in.
This proxy simply uses a local variable for data storage/retrieval, so its contents are lost on every page refresh.
This would work fine for me.
I do not use SessionStorage proxy... But I could use this proxy for session variables.
Note that session storage is different to local storage (see Ext.data.proxy.LocalStorage) - if a browser session is ended (e.g. by closing the browser) then all data in a SessionStorageProxy are lost.
This would also be a solution. The browser versions are not a problem, they are compatible with SessionStorage.
I would like to know if I use the correct principle to store user preferences or if I should use another way.
What is the "best" solution between memory proxy and SessionStorage?
The memory proxy will only keep the settings for that page load. If you leave the page then everything will be lost. This does not require a specific browser, any browsers will work even IE6. Even is the user is logged into your app, when they leave the page the settings will be lost and will have to be retrieved on next visit.
The session storage proxy (using HTML5's SessionStorage api) will keep the settings in browser memory for the browser's session. You can leave the page and come back to it and the settings will still be there. The settings will be lost when the browser is closed. This requires a HTML5 compliant browser (IE10+). If the user is logged into your app, when they leave the page but come back to it the settings will still be local (unless the browser is closed).
The local storage proxy (using HTML5's LocalStorage api) will keep the settings forever or until cleared programmatically or by the user manually. Leave the page, close the browser and the setting will still be there when the app is visited again (unless otherwise cleared by code or user).
I'm developing a single page booking application using angular which interacts with my REST API.
I have various routes defined in my application and I'm using local storage to store the state of each page as a user fills in their information. Once the user has filled in everything, I post this to my API, generate a hash and redirect them to a payment gateway before coming back to a results page. The reason for local storage is so we can persist a users filled in details, even if they close the page and re-open it.
I shouldn't store sensitive information such as user names and addresses in local storage though, because this leaves me vulnerable to cross site scripting.
Storing this information on the server would break the stateless principles of REST API's.
Are there any suggestions on how to best architect my application?
Edit: the content below is incorrect. Cookies and local storage are both domain restricted. Local storage's main weakness is that it can be accessed and modified by local users and programs indiscriminately, and that treating the contents of local storage as trusted input opens the door to nasty DOM XSS and stored XSS attacks.
One option would be to use cookies to store the user's information. You could have a cookie per field, set the cookie when the user fills in the field, and read the cookies to populate the fields when the user loads the page.
I am finding myself placing all my data from my api calls in the device local storage and I am not sure if it matters whether I put things in local storage vs putting them in a service. When should I use local storage from device vs using a Angularjs service?
You are a bit mingled up with concepts. When it comes to angularjs services, they persist data as long as the page is not refreshed, as soon as you refresh your page or close the browser tab, The data's gone.
Consider Angularjs services as mere variables that you declare, which are scoped to the lifetime of your browser tab. Hence, you can use it to store some temporary flags and values that aren't meant to be carried forward to next session.
Whereas, When it comes to localStorage, consider it as a database kind of stuff. Whatever you store in localStorage, is saved inside the browser, and will be available across multiple tabs, and sessions of your apps [Until and unless user clears browser data].
Since you're using Ionic and Cordova, you must use localStorage to save stuff such as user name and password, so that the user can use them the next time he opens your app. Take a note that, closing your app is equivalent to closing a browser tab.
Whereas, if you have certain data that keeps refreshing each time user visits your app, you can use services to store them, so that they are removed as soon as the app's closed.
Metaphorically, localStorage --> Secondary, non-volatile Storage, angularjs services --> Primary, volatile storage.
Data stored in local storage is persistent. So, if you reload you web app the data in local storage is till there. Local storage is typically limited to 5MB. See this
Services are in memory constructs. So, if you place anything in service it is in the browser's memory and are lost when refreshing the browser.
So it depends on what you need.
You can use this localstorage plugin for your app. https://github.com/grevory/angular-local-storage