title: ReactJS: How to implement react-cookie properly in an action?
body: <p>I have read articles that saving the token in <code>localstorage</code> is dangerous to XSS attack. So I have decided to store my tokens in cookies. And I am using <a href="https://www.npmjs.com/package/react-cookie" rel="nofollow noreferrer">react-cookie</a>. I saw the examples and I am trying to do it but my <code>auth.js</code> consists of <code>const</code> and is not a class, so I do not know how to use the <code>withCookies()</code> with it, this is my <code>auth.js</code> where I want to store the token to the cookies: </p>
  
  <pre><code>import {
    LOGIN,
    LOGIN_SUCCESS,
    LOGIN_FAILED,
  
    GET_USER_DATA,
    GET_USER_DATA_SUCCESS,
    GET_USER_DATA_FAILED,
  
    LOGOUT,
    LOGOUT_SUCCESS,
    LOGOUT_FAILED,
  } from './types'
  
  import axios from 'axios'
  var api = require ('./../api.js');
  
  
  export const login = (email, pass) =&gt; {
      return (dispatch) =&gt; {
          dispatch({
              type: LOGIN
          })
          var url = api.logInApi
          axios.post(url, {
                email: email,
                password: pass
              })
              .then(res =&gt; {
                  dispatch({
                      type: LOGIN_SUCCESS,
                      payload: res.data
                  })
                  localStorage.setItem('token', res.data.token)
                  dispatch(getUserData())
              })
              .catch(err =&gt; dispatch({
                  type: LOGIN_FAILED,
                  payload: err
              }))
      }
  }
  
  
  
  export const getUserData = () =&gt; {
      return (dispatch) =&gt; {
          dispatch({
              type: GET_USER_DATA
          })
          var url = api.getUserDataApi
          axios.post(url, {}, {headers: {
                  "Authorization": `Bearer ${localStorage.getItem("token")}` 
                }})
              .then(res =&gt; {
                  dispatch({
                      type: GET_USER_DATA_SUCCESS,
                      payload: res.data
                  })
              })
              .catch(err =&gt; dispatch({
                  type: GET_USER_DATA_FAILED,
                  payload: err
              }))
      }
  }
  
  
  export const logout = () =&gt; {
      return (dispatch) =&gt; {
          dispatch({
              type: LOGOUT
          })
          var url = api.logoutApi
          axios.post(url, {}, {headers: {
                  "Authorization": `Bearer ${localStorage.getItem("token")}` 
                }})
              .then(res =&gt; {
                  window.location.replace("")
                  dispatch({
                      type: LOGOUT_SUCCESS,
                      payload: res.data
                  })
              })
              .catch(err =&gt; dispatch({
                  type: LOGOUT_FAILED,
                  payload: err
              }))
      }
  }
  </code></pre>
  
  <p>Now, I tried doing this and of course it doesn't work: </p>
  
  <pre><code>import {
    LOGIN,
    LOGIN_SUCCESS,
    LOGIN_FAILED,
  
    GET_USER_DATA,
    GET_USER_DATA_SUCCESS,
    GET_USER_DATA_FAILED,
  
    LOGOUT,
    LOGOUT_SUCCESS,
    LOGOUT_FAILED,
  } from './types'
  
  import axios from 'axios'
  import { withCookies, Cookies } from 'react-cookie'; &lt;&lt;added this
  var api = require ('./../api.js');
  
  const login  = (email, pass) =&gt; {
      return (dispatch) =&gt; {
          dispatch({
              type: LOGIN
          })
          const { cookies } = props; &lt;&lt;added this
          var url = api.logInApi
          axios.post(url, {
                email: email,
                password: pass
              })
              .then(res =&gt; {
                  dispatch({
                      type: LOGIN_SUCCESS,
                      payload: res.data
                  })
                  cookies.set('token', res.data.token, { path: '/' }); &lt;&lt;added this
                  dispatch(getUserData())
              })
              .catch(err =&gt; dispatch({
                  type: LOGIN_FAILED,
                  payload: err
              }))
      }
  }
  export default withCookies(login) &lt;&lt;added this(wrong)
  
  
  
  const getUserData = () =&gt; {
      return (dispatch) =&gt; {
          dispatch({
              type: GET_USER_DATA
          })
          const { cookies } = props; &lt;&lt;added this
          var token = cookies.get('token'); &lt;&lt;added this
          var url = api.getUserDataApi
          axios.post(url, {}, {headers: {
                  "Authorization": `Bearer ${token}` &lt;&lt;added this(this is where I wanna get the cookie)
                }})
              .then(res =&gt; {
                  dispatch({
                      type: GET_USER_DATA_SUCCESS,
                      payload: res.data
                  })
              })
              .catch(err =&gt; dispatch({
                  type: GET_USER_DATA_FAILED,
                  payload: err
              }))
      }
  }
  export default withCookies(getUserData) &lt;&lt;added this(wrong)
  
  
  const logout = () =&gt; {
      return (dispatch) =&gt; {
          dispatch({
              type: LOGOUT
          })
          const { cookies } = props;
          var token = cookies.get('token');
          var url = api.logoutApi
          axios.post(url, {}, {headers: {
              "Authorization": `Bearer ${token}` &lt;&lt;added this
                }})
              .then(res =&gt; {
                  window.location.replace("")
                  dispatch({
                      type: LOGOUT_SUCCESS,
                      payload: res.data
                  })
              })
              .catch(err =&gt; dispatch({
                  type: LOGOUT_FAILED,
                  payload: err
              }))
      }
  }
  export default withCookies(logout) &lt;&lt;added this(wrong)
  </code></pre>
  
  <p>this one is wrong because there should only be one export default. But I don't know how to implement withCookies to const and there are also these ones that are included in the example and I don't know if I need them or where do I put them:</p>
  
  <pre><code>  static propTypes = {
      cookies: instanceOf(Cookies).isRequired
    };
  
    constructor(props) {
      super(props);
  
      const { cookies } = props;
      this.state = {
        name: cookies.get('name') || 'Ben'
      };
    }
  </code></pre>
  
  <p>and also, another question is that, I can access my cookies anywhere in my project right? just like how <code>localstorage</code> is accessible to my project? </p>
  
  <p>I hope someone can help me and I am a newbie to this. I have never used cookies before so thank you for your consideration. </p>