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.
Related
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.
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.
Redux losing state on page reload and in my app i can't use localStorage.
What can be the best option:
I cant use localStorage for policy reason, so persisting not helping me at all.
Can I set up react-router somehow to save data in redux store over
all app
Redux router?
...
You need to store the redux state somewhere, otherwise it will be lost on reload. Options for saving the state include localStorage, sessionStorage, cookies, file system, pouch db and many others.
Handling this on you own is possible but probably unnecessary. There are libraries like https://www.npmjs.com/package/redux-persist or https://www.npmjs.com/package/redux-storage that handle it for you. Since local storage is not possible in your case you should use the first option offering various different storage engines.
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!
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.