cookie value is undefined (react-cookie 2.0.6)

Question

I have a problem with implementing react cookies v^2. I use webpack-dev-server for testing.
Here is a conlose log:

Warning: Failed context type: The context cookies is marked as required in withCookies(App), but its value is undefined.
in withCookies(App)
in Provider

/App.jsx:

import React, { Component } from 'react';
import { CookiesProvider, withCookies, Cookies} from 'react-cookie'
import {Route, Switch, BrowserRouter} from 'react-router-dom';

//import RequireAuth from './RequireAuth';
import NotFoundPage from './NotFoundPage';
import LandingPage from './LandindPage';
import WorkSpace from './WorkSpace';
import ActivationPage from './ActivationPage';

class App extends Component {
  render() {
    return (
      <CookiesProvider>
        <BrowserRouter>
          <Switch>
            <Route exact={true} path="/" component={LandingPage}/>
            <Route path="/workspace" component={WorkSpace}/>
            <Route exact path="/activation" component={ActivationPage}/>
            <Route path="*" component={NotFoundPage}/>
          </Switch>
        </BrowserRouter>
      </CookiesProvider>
    );
  }
}

export default withCookies(App);

/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import { Provider } from 'react-redux';

import App from './components/App';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
  <Provider store = {store}>
    <App/>
  </Provider>
  ,
  document.getElementById('root'));

So, to solve the problem I've changed the react-cookie lib to universal-cookie and it works. But the question remains, why it's not defined? Should it be defined on the server side? (but there is an example in the README on react-cookie github without server) — svnvav, May 10 '17 at 18:07

score 8 · Accepted Answer · edited May 23 '17 at 11:55

It appears that the functionality previously present in the react-cookie npm package has been moved to universal-cookie. The relevant example from the universal-cookie repository now is:

import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('myCat', 'Pacman', { path: '/' });
console.log(cookies.get('myCat')); // Pacman

Source (all credits to author of the orginal answer)

score 5 · Answer 2 · answered Aug 30 '20 at 21:07

HttpOnly

If you're convinced you're using universal-cookie (or similar package) correctly, and still getting undefined:
Check (in the source code) how the cookie is being set (or inspect it with a cookie inspector browser extension, like EditThisCookie for Chrome, and check the HttpOnlyproperty).
If HttpOnly is set to true, then (by definition) no javascript will be able to access it (that's the point of HttpOnly). Hence the value would be returned as undefined.

From developer.mozilla.org/en-US/docs/Web/HTTP/Cookies:

Restrict access to cookies

A cookie with the HttpOnly attribute is inaccessible to the JavaScript Document.cookie API; it is sent only to the server. For example, cookies that persist server-side sessions don't need to be available to JavaScript, and should have the HttpOnly attribute. This precaution helps mitigate cross-site scripting (XSS) attacks.

cookie value is undefined (react-cookie 2.0.6)

2 Answers2

HttpOnly

Restrict access to cookies