score:3
My current approach is to store the jwt in the localStorage, when the application starts, I am loading the token, trying to load user data with the token, if it fails, just redirect to /login
Then I am using the jwt only in the api module, not in the store at all.
My Api module knows based on requests, when to use the token and when not
If the api module recognizes a failed authentication, it also removes the token from the localStorage.. so next time it cannot be loaded.
My api module, which is also separated from redux, knows when to use jwt, and when not.
To make this work more abstract I've created a middleware, which reacts on every action if the payload is an error
and the value Not Authenticated
this is the error I am trowing in the api module, if the server response fails because of auth. The actionCreator
just dispatches the error in catch
and the middleware reacts on it.
So actually its up to you how to do it, all the code I am talking about is ~100 LOC or so.. just some methods which are handling this things.
Source: stackoverflow.com
Related Query
- How to alert when Session (JWT) has expired in React/Redux
- How to refresh the table data when one of the item has its valid till date and time has expired in React Js
- Logging out the user when token has expired - react redux
- How do we know when a React ref.current value has changed?
- React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child?
- React + Redux + Storybook: How to use connected react router's useParams when writing storybook stories?
- How to detect expired user session in a react app?
- React Redux - How to dispatch an action on componentDidMount when using mapDispatchToProps in a connected component
- How to handle side effects when migrating from Redux to React Context API + hooks
- how and when to call a react component methods after state change from redux
- How to fix React Redux and React Hook useEffect has a missing dependency: 'dispatch'
- How to add login authentication and session to ReactJS React Router and Redux with MongoDB + NodeJS Express?
- How to get JWT cookies in our react application, how to check the user is login or not I am unable to find how to handle my react application session
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- How to fix blank screen when using react router in redux
- Which React cycle method should I use to re-render component when redux state has changed?
- How to protect react routing when session (stored cookie) is not accessible?
- How to refresh a react redux application when data changes on DB outside of the application
- How to run a function in React when the Escape button has been pressed?
- How to update a useState which has an array, inside this array I have objects this objects will update when the input value will change in react js
- How can I change the value of an object in an array in react redux when the action is called?
- When using React / Redux, how is dispatching an action that merely changes the Redux state vs actually doing some task?
- How to warn react component when redux saga put a success action?
- Redux + React + FireBase: how to use a state when updating
- How to make pass a test case which use enzyme shallow with contains when a React component has an event handler
- How to get error message in terminal when using Redux React
- React component not refreshing when redux state has been updated with successful action
- React Redux - How to store form state so that it can be populated again when user returns to page
- React Redux - How to take use on a particular location when they come back on that page
- how to return all store when filter in react js and redux
More Query from same tag
- How to capture date in next js head?
- Should a React component prop be required when the data is fetched from the backend API?
- ReactJs context - Element type is invalid
- ReactDOM.unmountComponentAtNode: Uncaught ReferenceError: ReactDOM is not defined
- What does the comment /** @jsx jsx */ do in the Emotion CSS-in-JS library?
- How to drag a component with animation in React
- Adding a greeting to a React App based on the time of day
- Handle multiple Checkboxed in a State:Array. How to?
- Action cable, ReactJS update fails Capybara spec
- Tailwind Typography plugin doesn't change font style of heading tags from default size
- Vitejs | Uncaught Error: Dynamic require of "<path>.svg" is not supported
- Using map on array of objects results in a errormessage
- Yup mapping schema to element like choices[] (react and formik)
- Binding event handlers in React Components fires onClick when rendered
- useNavigate hook react
- How to map another object of arrays after a map?
- Reactjs - add/remove item from array and store using checkbox
- How to store input values of a form in a array to print array data in table list in Reactjs
- Why I can't call useRef inside callback?
- Unable to validate prop types with Typescript
- how to get callback from child to parent class in react-redux?
- A large query on the parent component or a series of small queries on each children?
- Redux app: Cannot read property 'filter' of undefined
- material ui grid positioning confusion
- How to lay out dynamic children in NavLink v6
- React router 3.0.2 + es6: React.createElement: type is invalid
- A way to trigger onFetchData in ReactTable
- React/Redux reducer won't register error from promise
- React-Lightbox Image
- Selected option value is empty while posting the data in react js