I'm a frontend engineer using React Js. I just want to ask something about the token management in React Js. I have asked a lot of people about these questions below but still, I got no answer.
I have watched these token management videos on React Js. Here is the repository for the videos. I have been using the browser's local storage to store the user profile and the JWT tokens (access token and the refresh token values) for more than one year. After watching and learning about these amazing videos, I tried to migrate from using the browser's local storage into using the browser cookies also using React Context API to store the user profile and the JWT tokens. Sadly, almost all of my friends and coworkers still use the browser's local storage for storing the user profile and the JWT tokens.
My question is:
1. If we want to store the user profile and the JWT tokens in the browser cookies and use the React Context API, does the refresh token API (made by the backend team) require the logged-in user email and the refresh token values on the body parameters?
I have worked on several projects with different backend teams. All of the backend teams made the refresh token API require the logged-in user email and the refresh token values on the body parameters.
For example this documentation snippet below:
Headers:
{
"Content-Type": "application/json"
}
Body:
{
"email": "mail@gmail.com",
"refreshToken": "{{refresh-token}}"
}
I saw from this useRefreshToken.js code from the repository that the frontend app didn't send the the logged-in user email and the refresh token values for the refresh token API.
const response = await axios.get('/refresh', {
withCredentials: true
});
The code above only sends the withCredentials field (I predict that it's the cookies that store the JWT tokens).
Then, I have another question:
2. If the refresh token API (made by my backend teams) needs the logged-in user email and the refresh token, where should I store the logged-in user email and the refresh token values (besides using the browser's local storage and React Context API)?
If I store the logged-in user email and the refresh token values using the React Context API then I refresh the browser's page, the frontend app wouldn't recognize the logged-in user email and the refresh token because React Context API is just a temporary browser memory.
I predict that if the frontend wants to use cookies and React Context API for storing the user profile and the JWT tokens, the frontend should only send the withCredentials field (without the logged-in user email and the refresh token values) and the backend should process the credentials sent by the frontend (no logged-in user email and the refresh token values are required from the frontend).
3. Is my last statement above correct?
I really want to implement something great I learned like using cookies and React Context API for storing the user credentials.