I'm new to React Native and have a fair amount of experience with React, but I still don't understand some fundamental concepts. One concept I don't understand is when to use local storage. I understand that local storage is used because it persists the data on the browser refresh, but if I were to use something like useContext to hold the user info and the auth token in a global state, then would that take the place of local storage, or do I still need to use local storage to hold it and if I do, then why? I'm asking this question for both React and React Native, as I'm trying to be proficient in both.
useContext hook is used to create a global state that can be shared across multiple components. This can be used to store information such as the user's auth token, which can be used to fetch data from API but it will only persist as long as the user remains on the app. Once the user closes the app or refreshes the page, the global state will be lost.
You can use local storage to persist the user's auth token (stored in the browser) even after the user closes the app or refreshes the page. This way, when the user returns to the app, you can check if the auth token is still present in local storage, and if it is, you can automatically log the user back in without requiring them to enter their credentials again.
useContext to hold the user info and auth token in a global state can be useful for managing the user's session within the app, but it's not a replacement for local storage. Local storage is useful for persisting data across sessions, even when the user closes the app or refreshes the page.
Hope this gives you some clarity.
For more information on local storage, you can refer to the official documentation:
For React: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
For React Native: https://reactnative.dev/docs/asyncstorage
And for more information on React useContext you can refer to: https://reactjs.org/docs/context.html
useContext will not persistent data between refreshes, it simply avoids prop-drilling. A common pattern is to use the context as an accessor for an underlying store (such as localStorage) so that access is abstracted away from components.
Look at this answer for an example: https://stackoverflow.com/a/62505656/4088472
Related
Tech stack: firebase firestore & auth, react native, expo
Question that I can’t seem to answer by googling:
After you authenticate a user with firebase auth you get a user Id and it’s written to a react native context (AuthContext) with a useState hook by calling setUser from a line like this: const [user, setUser] = useState()
When you add fields to a user object like name, email etc do you store that info in the user auth context too? Or in async storage (or some other local storage)? (in addition to writing it to the database)
TLDR: When do you use RN context vs. asyncstorage to store user info?
I tried lots of reading docs and other peoples code on the internet
Typically you would probably use context for this, with a pointer to the ID in async storage loaded into that context on mount. The problem with loading all of the details from a central global storage like AsyncStorage in each component that needs it is that you now have several copies of it lying around in memory. That might not be a big deal, but if you were to need to, say, change the user name (imagine if the user has an edit profile screen), you don't have one canonical copy to change in one location and know 100% it will be reflected everywhere.
Practically speaking it probably wouldn't make much difference because any screen using the "username" for example would be remounted and load it again from the storage when they hit it. But it's bad practice. Let's imagine you now have the username displayed in the navbar for whatever reason, which is rarely (if ever) unmounted. Now the user changes their user name -- that thing is going to be displaying the old one still and you can't make a call in one place to change it and not worry about all the places it's used.
Note it's ok to use AsyncStorage if you want to persist a users session. But you'd probably persist only the user id or auth token there, and the context would make a call to the server using that ID to fetch the other details. Those details would be kept in memory only in the context. The reason for this is if they change their secondary details on another device, and open the app again, the changes will be reflected.
tldr; Store an ID/auth token of the user only in storage, and have a context provider that fetches the rest of the data from server using that and provides it into that context.
I have user data which includes Email,Username,Password,ShippingAddress etc..
I am storing jwt token in localStorage, the token is includes :username,id,createdAt..
I want the user data to be persisted to my redux-store but I can't figure out how to do it.
I don't want user info to be in local storage but on the other hand everytime I refresh the page my user data from redux getting deleted, I kinda stuck.
Tried to do simple check that if localstorage(jwt) id is equal to the user that just logged in - store the data in store and it works, but as I said one refresh delete all..
Would like to get some hints\tips from the pros! :)
Using: graphql\apollo, redux toolkit, react.
My best idea was to have requests from the server on every component that I need username \ email \ password ..etc but I think it will be too massy..
React is just JavaScript, and as such, any data that is stored in React will not persist and will be lost when the page is refreshed. Any information that you want to persist after a page refresh will need to be stored somewhere else (i.e. local storage).
There are ways to retrieve information from local storage and store them (non-permanently) in Redux after every page reload. How that solution looks will differ depending on how you are using React.
If you are using functional components and hooks, the useEffect hook can be used to retrieve data from localStorage after every page reload. Click here to read the docs on useEffect. It might look something like this:
useEffect(() => {
const storedData = JSON.parse(localStorage.getItem("storedData"));
// save to component's state or redux here.
}, []);
If that useEffect is placed somewhere in your app component, it will run on every re-render, thereby making it seem like the data is persisting in React because it will always be there.
Normally the flow that you would have should be smth like:
User logs in e.g /api/v1/login,
Sever returns either a temporal token (in case you are using otp codes or 2fa), or the user jwt that will be used for authorizing subsequent requests.
Token is saved in local storage.
When the user refreshes the page you check local storage and use the token on a request to the server (this way you can check it's still valid, normally you can do smth like /api/v1/user to get the user data.
If the token is valid then you can store the user info returned by the API call into the redux store. If not you can redirect user to login page again
I was using react redux but, when I refresh the data was deleted, so now I am planning to use react redux persist to keep data stored.
I would recommend you to use backend instead of handling this thing using react, what I am trying to say is make one api in backend which will provide you the data of the user which is currently logged in using the auth token which you will pass in the header and call that API first whenever the page is refreshed and directly store the response into your redux this way even on refresh your data will not vanish away.
would it make sense to store the redux store with its states for an application into some local file, e.g like in a .pickle file (in Python), or just save it as some .json file locally to persist the state of an app?
E.g if there is no network connection to persist something to a local database, would it be possible to persist the session in some local storage, or Browser Webstorage or some IndexedDB? And upon the opening of the next session, reload that state again into the store and continue from the session visit?
Sure, you can use redux-persist, this use AsyncStorage to store the information in your reducers.
https://github.com/rt2zz/redux-persist
It is able to use in ReactJS and React Native. It is very easy to use, you only need to add some components in your MainApp component, after that, all your Store is saved in the device or navigator.
You can customize the behaviour to store some information and to store objects.
I'm quite new with react-apollo, however wasn't sure how to approach this problem. I'm authenticating a user with a mutation but would like to access that same user object, that's returned in other components again (live navbar, to render button options, or a profile button once logged in). Should I just fetch the current logged in user everytime I need it? I.e.
query GetUser {
id
name
role {
name
}
dob
}
Append this at the end of every component that needs it? I'm not sure if the best way might be to just cache it after logging in once versus this Even then how do you specifically cache it? I know inheritently it caches it as well, so its not like i have redundancy in fetching, however i might in code. What are some approaches y'all took.
in react applications to save user data for authentication you have to save user data in storage like local storage and store to your global state of your application like redux and mobx to access from all over the application.
i recommend to you using redux.
note:
every time when start application you have to store data from storage to global state again.
also you can use apollo-cache-persist but i don't tried this!