Do not store the token in localStorage, the token can be compromised using xss attack.
I think the best solution will be to provide both access token and refresh token to the client on login action.
save the access token in memory (e.g redux state) and the refresh token should be created on the server with httpOnly flag (and also secure flag if possible).
The access token should be set to expire every 2-3 minutes.
In order to make sure that the user will not have to enter his credentials every 2-3 minutes I have an interval which calls the
/refreshToken endpoint before the current token expires (silent refresh token).
that way, the access token cannot be compromised using xss/csrf.
but using an xss attack, the attacker can make a call on your behalf to the
/refreshToken endpoint, but this will not be harmful because the returned token cannot be compromised.
Since saving the JWT in localStorage is vulnerable to XSS attacks, the other way can be saving it inside a httpOnly cookie but too bad that you cannot do that in frontend, check this post.
The only option you have is to configure your server-side to return you a the JWT in a httpOnly cookie and also accept the token inside httpOnly cookie. You'll also have to think of how you want to deal with token expiry.
NOTE: While modern browsers support and prevent reading/writing via httpOnly cookies, but I am not sure about old browsers.
1- login component send a login request to the API server endpoint
2- server API endpoint returns a token
3- I save the token in user's localStorage
4- all the API calls from now on will have in the header
A better place is to store it as a Cookie with HttpOnly flag.
- How do I store JWT and send them with every request using react
- how to store textarea new line value into array with react and send it to node js variable with post request
- react with TS - using setInterval with useEffect() how to send the request and only then start the interval
- How to send data from react and use the request body in express, using Axios?
- How to send data using fetch and POST request with credentials included?
- How to create a form with text and file input in react and send form data to server using Nodejs?
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- how to send data in GET request header using react and axios to Django rest framework?
- where and how to store laravel passport authentication token and send request from front-end with that token?
- How to store Configuration file and read it using React
- How to send JWT token with fetch and cors to an Express server in Authorization headers?
- How to tell if a user is logged in with http only cookies and JWT in react (client-side)
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- how to change image src using props with styled component and react
- how to make google bots crawl my react website with dynamic urls and display them in google
- How to send GET/POST requests using express and react router?
- How to send image to server with Blob type using Axios in React Native?
- How to wrap 2 or more menu items to use them in one condition, using React and ant design?
- How to set up a chrome extension using React and TypeScript with multiple pages and entry points?
- How to Upload files in graphql using graphene-file-upload with apollo-upload-client to Python Database and react front-end.?
- How to make a loop request with React using Axios?
- How to POST request using axios with React Hooks?
- How to draw a bubble map with longitude and latitude using Highcharts in react
- React with conditional promises chain and wait for them all before send dispatch
- How can I specify authentication globally instead of defining on every page in Next js, I am using next-auth package with react query
- React - How to Populate and Show a Modal, then Send AJAX Request on Submit
- how to get images from mongo with axios and display them with react
- How to add event listener to the div element accessed with ref using react and typescript?
- How do I store and access my API keys with a React + Webpack app?
- How to integrate axios api in react js with async and await using react hooks
More Query from same tag
- My code get error element on function call ( code attached )
- Why React-router doesn't re-render the page and doesn't update the data when the url changes?
- Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate
- useSelector cannot make real time update once the state is changed in react
- Redux undefined in ES6 syntax mode
- Jest - Could not locate module with dynamic import template string
- React - use relative paths to static assets in CSS
- How can I change the color of MUI styled component?
- Triggering transition on componentDidMount
- React propTypes for specific children components
- react-google-maps change marker icon to waypoints
- React Prevent re-fetching on page changing
- Material-UI: ListItem onClick not called
- View source not displaying dynamic content
- Button with 3 states using React
- How to use a prop to form an image url
- Trigger useEffect on an api call with query
- Call async method in Office Fabric CommandBar onClick event using react hooks?
- Storybook JS Interaction Testing with Enzyme - State Changes being Overidden
- Unexpected redux state flushing
- React-router-dom - Link change url but does not render
- removing an item from an array in ReactJS
- Any way to avoid passing all parameters in styled components mixin?
- How to use css clip-path in React JSX
- useState for both increasing and decreasing number?
- Set component state, from unreachable variable
- I am having a problem setting state with returned json data
- Testing component behaviour (click) in React-Native with Jest
- react-share Parameter 'href' should represent a valid URL
- HTML-React-Parser returning object - not string?