Persistent login data after refreshing page in React - javascript

I have created a login page in React which takes user data and opens a User Page with the user's name. When I refresh this page again, it loses user data. I am storing user data in redux store.
If I want to make it persistent what should I do? Should I use local storage or create a Mysql DB to store data? Which one is better for a large application?

It looks like a backend job to me ...
Your persistence should probably be on the express side of your application.
If you really want to do it with React only check this :
https://www.npmjs.com/package/redux-react-session
There are a lot of resources on the Web about sessions :
https://auth0.com/blog/adding-authentication-to-your-react-flux-app/
https://code.tutsplus.com/tutorials/data-persistence-and-sessions-with-react--cms-25180
...

Related

Newb question: How to maintain a data list for all users in my webapp?

Disclaimer: I'm finding my way and not sure how to ask the question. This is what I want to do:
I am getting data from twitter API in my app (this is working).
I then want to store that data (as an array), and serve it to whichever user is accessing the app (so that I don't need to query the API everytime, just poll every 10 mins).
What do I need to be able to do this? (external database? or can I just save to a file on the server in someway? or something else)
For ref I'm building with sveltekit, and deploying with vercel.
If you are using Twitter's API directly within your own app, every user of your app needs to query the API at least once to get some data. You cannot serve the results that are returned to one user to other users without having your own back-end server and handling this accordingly. However, you can save a copy of the data returned to each user to that user's localStorage so that specific user does not have to query the API every time.
You can save the data on the client's localStorage and save an expiry timestamp that allows you to query the API again after the timestamp has passed.
Here is a tutorial on how to use localStorage with SvelteKit

Keeping or "caching" locally a state while refreshing the page

My idea is to reduce the number of requests to the server from the web client. Say, a view/component that shows user data (first retrieved before this view/component is rendered), if the user reloads the page (F5) then the whole application is reloaded and initialized again, so another request to the server to get that data again, is there any way to maintain or "caching" that state locally?.
I don't know how to implement this.
you can try redux presist link : https://github.com/rt2zz/redux-persist
or you can use localstorage : https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Like others have said, local storage is probably your best bet, but I don't think it's a very good idea. If the users reloads the page, that's essentially a blank slate for your app. You could get the data from local storage but how do you know it's still up to date? You'd need to check with the server anyway.
You should definitely look into a redux/store solution where you can store data for use while the user is using your app, so you can share data between components and don't have to fetch the same data every time. But actually storing it locally just reeks of bad practice, IMO.

How to restore User on Page reload in MongoDB Realm + VueJS App

I use MongoDB Realm Client SDK in Javascript to login and get user info.
But on page reload user has to login again. I tried to store the user object in localstorage but I don't see any methods or functions to assign this info back to the Realm APP
How can I avoid this relogin for user in MongoDB Realm javascript app?

What it's the best to store user data with react during a session?

So I'm working on a react application as a front and as the back python, Django and rest.
I'll do the front part in a few days, but a question spawn: how can I manage all my apps for the user with an account and the other (without the account)?
I look a few options but I don't really know which one is better:
local storage
context API
cookies
For example if the user is connected and wants to see him own profile page, he could without fetch in the code cause it's just a few information like name, email, ...
I don't know if it's enough to clear but hopefully enough to get some suggestions.
Cookies are mainly for reading server-side, whereas local storage can only be read by the client-side.
An other point is saving data, a big technical difference is the size of data you can store, localStorage give you more space.
Context API you'll use it eather you work with cookies or localStorage
You can call the API for fetching information the first time the user logs in, and then you could store the information on the app state for the whole session. If you want to store information between sessions localstorage works just fine, is easy to access. However, you'll have to check if this information exists when the user logs in.
Context API can help you to access the stored data easily by using useContext react hook API in other child components and manage them by React, but localStorage is a way to persists Context API changes with localStorage to get them back after every page reloads(prevent losing data in page refresh). But cookies have a maximum length(I don't know how much is it) which isn't the best way because it has security issues and a use-case of cookies is using them on the server-side by the backend.

Where to store user data in SPA

I have been developing a SPA with AngularJS and I have stored the user data in an Angular Value service but I do not feel confortable with that, basically because the Angular Value is not shared between browser tabs. So if the user opens a new browser tab and on every page refresh (F5) I have to request the server the user data like full name, email, etc. I am using a REST API.
Is this approach fine or not?. If I use localStorage it will help me to share data between tabs but I do not know if it is a better technique.
There are only 3 places you could store your data in a browser
Cookie
Local storage
Database (IndexedDB or Web SQL)
You can open your console panel to see these option.
Consideration:
Security
It depends on how important or sensitive your data stored in the
browser, if it is user sensitive, you should never stored them in the browser in the 1st place!
Size
how big is the data, you going to store? if it is huge it is good to store them in the Database, you could check out some of this framework (PouchDB)
if it is small, you could just store them in the local storage

Categories

Resources