i want to get my jwt value from cookies in browser

Question

i have now stored my jwt in cookies when user sign in or sign up but the data don't stay so i made a function to handle this but i need the value of the token to make it work

this is the function that i need token value for

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common['x-auth-token'] = token;
  } else {
    delete axios.defaults.headers.common['x-auth-token'];
  }
};

and this is my action that i use in react to send the token value to this function i tried to use js-cookies for that but it give me undefined

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

and this is my recieved cookie in browser

where do you set your cookie? Is the cookie there if you `console.log` it? — AWolf, May 22 '20 at 22:21
the cookies is there but when i try console.log it using js-cookie module ti give me undefined — mohamed nageh, May 22 '20 at 22:23
in the photo in the post you will see access-token that is the cookie i want to get it's value — mohamed nageh, May 22 '20 at 22:24

score 2 · Answer 1 · answered May 22 '20 at 23:07

2

If you take a close look at your screenshot, you can see that the cookie is sent by the server as HttpOnly. This is a security measure, and therefore the cookie isn't accessible to any JavaScript code by design.

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Restrict_access_to_cookies

If you are in control of the server, you could change it accordingly, if not you will have to make a deal :-)

answered May 22 '20 at 23:07

Sebastian B.

2,141
13
21

i am the person who create the server , can you tell me what kind of change i can make – mohamed nageh May 22 '20 at 23:10
Can you provide more info about the server tech stack? And how's the access token cookie constructed, by your own code or some library? – Sebastian B. May 22 '20 at 23:13
i use express with node ,the token created by jwt library – mohamed nageh May 22 '20 at 23:15
But lowering the security just to achieve a solution to your question may be the wrong approach. The `access_token` cookie is stored for about a month. Although you cannot access it with JavaScript, the browser should send it for each request (with some restrictions like domain, path, ... but they are not restrictive according to your screenshot). So the server already gets the access_token for each request. You should be able to verify that in the browser devtools, network tab. – Sebastian B. May 22 '20 at 23:17
Ok, I see that you need the access token in a `x-auth-token` header. Where's that header sent to, a separate server (then my previous comment doesnt help) or the same server that delivered the access token via cookie? – Sebastian B. May 22 '20 at 23:19
the same server – mohamed nageh May 22 '20 at 23:22
what about if i set the cookie from frontend i can take the token value and set a cookie by it and then get it for my function loadUser it will be useless or what – mohamed nageh May 22 '20 at 23:23
so what you say i don't to have loadUser and keep sending my token it will happen by it self – mohamed nageh May 22 '20 at 23:24
You use `loadUser` as an API call. I think you still need that. But you don't need to read the cookie value just to send it back via header. The browser sends the cookie automatically. Check the network panel in your developer tools when submitting the `/user/me` request. – Sebastian B. May 22 '20 at 23:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214456/discussion-between-mohamed-nageh-and-sebastian-b). – mohamed nageh May 22 '20 at 23:52

score 0 · Answer 2 · answered May 22 '20 at 23:15

0

 res.cookie('x-auth-token',token,{
      maxAge: 3600,
      httpOnly: true,
      secure:true
    })

answered May 22 '20 at 23:15

mohamed nageh

593
4
9
26

If you still want that "read the cookie" thing, then you need to set `httpOnly` to `false`. – Sebastian B. May 22 '20 at 23:28
but this will allow any one to access this cookie with javascript this will decrease the security level right – mohamed nageh May 22 '20 at 23:52

i want to get my jwt value from cookies in browser

2 Answers2