BACK STORY: I am creating a react app which uses back-end-api JSON based authentication for log-in, after user is validated back-end returns a JSON token for future requests.
WHAT AM I DOING NOW: I am passing down that token from one component to another using props (and yes, that's not very elegant nor clean).
WHAT I AM LOOKING FOR: Someone after seeing the project suggested me to store the token & other redundant data in browser memory. Now, I don't know how to do that nor I was able to find any resources.
BUT: I believe that this problem can be solved by redux. But I want to create a react only app first before jumping to redux or some other advanced stuffs.
So, how do I store these type data in browser memory itself?
Or, is there any more elegant solution to this?
Also, gimme some advice about session management. Like when token expires the user is shown a dialog and redirected back to login page.
why not you simply go for LocalStorage ? like this
localStorage.setItem('user_info', JSON.stringify(response));
For more info refer here
https://www.w3schools.com/html/html5_webstorage.asp
https://www.w3schools.com/html/html5_webstorage.asp
Update
To get values from locastorage you can use the syntax below -
localStorage.getItem('user_info');
Redux is a state container for react. It helps you to manage all states in react app. But you can still live without it (barely) using local state and props. Besides, you can use localStorage and cookies to store whatever you want.
Related
Hi iam new to react and been thinking about this for a while,
I want to make react application ,
how would you continue?
I want to fetch data and use it all across the app( best would be just one time when user logs in)
I was thinking about fetching it with redux, but there may be much better way which iam missing.
Thx all
If it is just one simple api request, then you are better of with using Context API. Just call the API with any network library such as fetch or axios, and keep data inside the Context. And use that Context in the whole App.
As the application's complexity grows and you need more functionality you can then use more sophisticated libraries such as Redux for managing state(keeping data at client app), calls to API will still be done with fetch or axios.
if you have small app better way you used contextApi and other wise you need to used redux is best way for state management
for redux you need to prefer below link
https://enappd.com/blog/redux-in-react-native-app/92/
for context APi :
https://blog.devgenius.io/react-native-state-management-with-context-api-61f63f5b099
Redux if your app is a SPA (single page application) since redux loses all state on page refresh
Persistent storage like localStorage or cookies until they expire. This method will survive page refreshes.
Store it in a database on the backend which will keep it until you literally delete it, but I imagine your use-case isn't in need of such a robust solution.
State management like redux is the best way to achieve your goal.
I am implementing the login function using redux-toolkit now. there's a problem.
save accessToken(or the other things) in the redux state store, and when the page is refreshed, all state values stored in the redux disappear. So, i need a way to persist login. in this case
make file such as 'PersistLogin.js' and compare and save again.(->However, in the end, the confirmation also requires an access token, but if the token disappears, it cannot be confirmed.)
use redux-persist npm. (-> I studied that the reason why don't store accessToken in storage is because of security issues, but when using this way, there is an irony that store token in storage.)
which one is better way to use? or is there any other way?
Thank you.
This is probably a duplicate question, but I'm struggling to find what I need. What I'm trying to achieve is a "session" that stays live until the user logs out. What I need to store in this session is username of logged user, and possibly isloggedIn boolean flag to use in my router. Previously, I was using sessionStorage while developing the app, but now that it's time for go-live I will need a more secure approach. My idea is to simulate sessionStorage but in memory. I need a session object that will hold the aforementioned information and will not reset its state on component re-render or whenever I manually change the URL route in the URL bar of the browser. I tried using static attributes in a method, but it looks like the import of the class in the application is reloaded every time the state of the static attributes is reset. I'm using axios as my HTTP client and JWT tokens as authentication for server requests, however I would like to use the session object to manage the routing of the app. I look forward to you replies. Thanks in advance.
I've been working with react from past 1.5 years. When I came across redux it's good library for state management of an app but when it comes to local storage I think it's good to store user session because redux store will change because of page refresh. So I'm little bit confused what to do with redux also it's little complex writing code. Can somebody help me which is better to use for storing user session? Thank you :)
The purpose of Redux (or any other state management tool for SPAs) is to help you manage your app's state when the app is loaded in the browser. You can't "keep it" after you close the app. Use JWT or cookies for storing info about user sessions in the browser.
Also, you don't have to use Redux for your state management if you find it too complex. React's Context Api may be sufficient. But again, not for storing user sessions.
I'm a Java Android developer and been experimenting with React Native lately. What I've been looking into is something similar to the navigation as that of Android Java code.
First, I want to get to SplashScreen. Then check if the user is logged inor not, then take the user into the app or to the login screen.
Now, to achieve this, I need to know if the user is logged in. How do I do that? I don't want to maintain global variables in index.js nor do I want index.js to be the central routing system. Can I store somewhere a flag that says that the user is already logged in, and what's the access-token of the logged in user?
I'm able to visualize this well in native Java code, but failing to figure out how to do in React Native.
In my React Native app, I store all my data in a Redux store. So, when the user initially puts their username and password in the input, I send it up to the server which then sends down an access token. Once I receive the access token, I store this in the Redux store. Therefore, if the user returns to the app later, I just check the Redux store to see if the access token is present. If it is, I know that the user is logged in. I check for the presence of this token all over the place in my app, and further need it for when I make more request to the server.
So to answer your question, you need some way to store the state, and for this I highly recommend checking out the Redux framework which works very well with both React and React Native. http://redux.js.org/