[Question] Does the refresh token API require the logged-in user email and the refresh token values on the body parameters?

[jaballogian]

Hi Dave,

I'm Jabal. I'm a frontend engineer using React Js. Sorry if I create an issue in your repository. I just want to ask something about the token management in React Js.

I have watched your token management videos on React Js. I really loved them. 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 your amazing videos, I tried to migrate from using the browser's local storage into using the browser cookies and 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:

• 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": "[email protected]",
    "refreshToken": "{{refresh-token}}"
}

I saw from your useRefreshToken.js code on this repository that the frontend app didn't send the the logged-in user email and the refresh token values for your 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:

• 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 haven't watched your Node Js tutorial video because of my current workload, I haven't got any time to learn the backend. 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.

• 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.

[gkennedy87]

You don't include the refresh token in the request body. When you use withCredentials, you'll sending cookies along with your request. You'd only include the email address in the request body.

You can grab the cookies with req.cookies, in this case you could do something like const cookie = req.cookies; const token = cookie.token;

From there, you want to verify that the refresh token matches the one saved to that particular user (in a database for example).

Hope that helps.

[gitdagray]

I did not see this right away so thank you for your patience, Jabal.

Grant provided an excellent response. Thank you, Grant!

Your JavaScript should not be able to access the secure, httpOnly cookie that stores the refresh token. It is simply sent with the request. Any other info needed, such as an email, can be sent in the body of the request.

On Wed, Jul 20, 2022 at 8:13 AM Grant Kennedy @.***> wrote:

You don't include the refresh token in the request body. When you use withCredentials, you'll sending cookies along with your request. You'd only include the email address in the request body.

You can grab the cookies with req.cookies, in this case you could do something like const cookie = req.cookies; const token = cookie.token;

From there, you want to verify that the refresh token matches the one saved to that particular user (in a database for example).

Hope that helps.

— Reply to this email directly, view it on GitHub https://github.com/gitdagray/react_persist_login/issues/1#issuecomment-1190270990, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHRWJN52ELSZIXDAOAYTS6LVU73PPANCNFSM53SMW4UQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[jaballogian]

Hi @gkennedy87 and @gitdagray

Thank you for the comments. I will look into them and edit this comment soon.