Is it safe to store user information in Localstorage? - reactjs

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?

Related

Store some login information to be used throughout the application

I'm looking for a way to store some information captured on login. This information will be used to make calls to a database later. Is this the User case for Redux? I dont need to store functions but store UID string along with another identifier.
Looking for some advice.
if you want to store it even user closes the website and reuses it again, use localStorage or session-storage or cookies.
We you want to keep it in an application then use context API provided by react itself.
keeping such small info (only login info no other thing) in redux would an overkill.

How do I add a remember login details button to my website?

I've looked around for an answer to this for a few hours now and not really found anything, I thought it would be easy as basically every site has it. All I want to know is how do websites safely store your username and password so that the next time you load your browser and go to sign in, the username and password input fields are already filled in?
I've read about localStorage, but a lot of people seem to say that's not safe. I'm using react in case that makes a difference.
You may store JWT in a persistent cookie or browser local storage to create this functionality.
freecodecamp does a good job explaining this step by step:
https://www.freecodecamp.org/news/how-to-persist-a-logged-in-user-in-react/
You could even persist your state in a statemanager such as redux and rehydrate your store based on new incoming data.

Dynamically change API endpoints and base url based on user input

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!

Redux security - Is it possible to access store data?

I'm making an app which holds sensitive information about the user. This data is held in the store and is used throughout the app, on different views.
The session can expire, with the store being completely cleared if the user tries to navigate to another route after a timeout. However, the store is not cleared until the user navigates to a new route. Let's say the user leaves their machine without logging out. The session times out but the page is still there and the store is yet to be cleared.
Would it be possible for someone else to access information from the store if it hasn't been cleared yet? (e.g. With Chrome dev tools)
The other option I can see is to clear the store on session timeout and somehow keep the current view in place. The idea being that the current view should not break if the session has expired.

How can i persist value in angular.js?

How can i persist user details in angularjs unless user logs out of the system?
My header is using a variable called user, so when the user logs in successfully, i set the user attributes from REST response.Once , user is set then using ng:show and $scope.watch i change parts of the header and show welcome 'username'.
The issue comes when user again refreshes the page, in that case User is reset and user sees the landing page header.How can i correct it?How can i persist the User value unless user logs out of the system?Should i set user in rootScope or is there any other better way to handle this?
This is an open-ended question and to really answer it, I'd need to know what your back end looks like and what your security requirements are.
I can see a two ways forward:
(1) If can rely on and trust cookies for security, you could just log the user in with data from cookies just like you log them in via the REST response. The cool thing about this is that, to the user, it would be instantaneous (the next option won't be).
(2) Have a separate controller that handles the header that will always make a request to the server for user data (logged in or not). SEN does something like this (and it drives me crazy btw). I don't know if you have a SEN account, but if you do, you could log in/out and try it out. You'll see that when you hit the page initially, you get a loading screen, but even after that loads, the header even has a little "Signing in..." loading widget itself.
You can use the local storage (a key-value pair HTML5 storage) to store the information and retrieve it on page load. There is a very simple library for this, if you don't want to write javascript yourself, called Lawnchair. Otherwise google for html5 local storage tutorials.

Resources