search

gitdagray / react_persist_login

194 stars 85 forks source link

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

Open jaballogian opened 2 years ago

jaballogian commented 2 years ago

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:

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

I really want to implement something great I learned like using cookies and React Context API for storing the user credentials.

gkennedy87 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Hi @gkennedy87 and @gitdagray

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