@plone/volto 14.9.0 → 15.0.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Change Log
 
+## 15.0.0-alpha.2 (2022-02-10)
+
+### Breaking
+
+- Language Switcher no longer takes care of the change of the language on the Redux Store. This responsability has been unified in the `MultilingualRedirector` @sneridagh
+
+### Bugfix
+
+- Prevent the MultilingualRedirector to force 4 content load when switching the language @reebalazs
+
+### Documentation
+
+- Upgrade Guide i18n: Make clear what's project, what add-on. @ksuess
+
+## 15.0.0-alpha.1 (2022-02-09)
+
+### Bugfix
+
+- Fix the `null` error in SelectAutoComplete Widget @iFlameing
+
+## 15.0.0-alpha.0 (2022-02-09)
+
+### Breaking
+
+- Upgrade `react-cookie` to latest version. @sneridagh @robgietema
+  See https://docs.voltocms.com/upgrade-guide/ for more information.
+
+## 14.10.0 (2022-02-08)
+
+### Feature
+
+- Add Pluggable to toolbar user menu. @ksuess
+
 ## 14.9.0 (2022-02-08)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.9.0",
+  "version": "15.0.0-alpha.2",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -350,7 +350,7 @@
     "react-anchor-link-smooth-scroll": "1.0.12",
     "react-animate-height": "2.0.17",
     "react-beautiful-dnd": "13.0.0",
-    "react-cookie": "1.0.5",
+    "react-cookie": "4.1.1",
     "react-dates": "21.5.1",
     "react-detect-click-outside": "1.1.1",
     "react-dnd": "5.0.0",
@@ -401,6 +401,7 @@
     "svgo-loader": "2.2.1",
     "tlds": "1.203.1",
     "undoo": "0.5.0",
+    "universal-cookie-express": "4.0.3",
     "use-deep-compare-effect": "1.6.1",
     "xmlrpc": "1.3.2",
     "yarn-deduplicate": "3.1.0",

package/src/actions/language/language.js

@@ -1,20 +1,22 @@
-import cookie from 'react-cookie';
 import { updateIntl } from 'react-intl-redux';
 import { normalizeLanguageName } from '@plone/volto/helpers';
+import Cookies from 'universal-cookie';
 
 export function changeLanguageCookies(language) {
-  cookie.save('lang', normalizeLanguageName(language), {
+  const cookies = new Cookies();
+
+  cookies.set('lang', normalizeLanguageName(language), {
     expires: new Date((2 ** 31 - 1) * 1000),
     path: '/',
   });
-  cookie.save('I18N_LANGUAGE', normalizeLanguageName(language) || '', {
+  cookies.set('I18N_LANGUAGE', normalizeLanguageName(language) || '', {
     expires: new Date((2 ** 31 - 1) * 1000),
     path: '/',
   });
 }
 
 /**
- * Changes current language using react-intl-redux action and setting the cookie.
+ * Changes current language using react-intl-redux action and setting the cookie
  * @function changeLanguage
  * @param {string} language target language.
  * @param {number} locale set of locales corresponding the target language.

package/src/components/manage/Preferences/PersonalPreferences.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { map, keys } from 'lodash';
-import cookie from 'react-cookie';
+import { withCookies } from 'react-cookie';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
@@ -112,9 +112,10 @@ class PersonalPreferences extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const { cookies } = this.props;
     return (
       <Form
-        formData={{ language: cookie.load('I18N_LANGUAGE') || '' }}
+        formData={{ language: cookies.get('I18N_LANGUAGE') || '' }}
         schema={{
           fieldsets: [
             {
@@ -144,5 +145,6 @@ class PersonalPreferences extends Component {
 
 export default compose(
   injectIntl,
+  withCookies,
   connect(null, { changeLanguage }),
 )(PersonalPreferences);

package/src/components/manage/Sidebar/Sidebar.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Button, Tab } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import cookie from 'react-cookie';
+import { withCookies } from 'react-cookie';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 import { BodyClass } from '@plone/volto/helpers';
@@ -77,11 +77,12 @@ class Sidebar extends Component {
    */
   constructor(props) {
     super(props);
+    const { cookies } = props;
     this.onToggleExpanded = this.onToggleExpanded.bind(this);
     this.onToggleFullSize = this.onToggleFullSize.bind(this);
     this.onTabChange = this.onTabChange.bind(this);
     this.state = {
-      expanded: cookie.load('sidebar_expanded') !== 'false',
+      expanded: cookies.get('sidebar_expanded') !== 'false',
       size: 0,
       showFull: true,
       showFullToolbarExpanded: true,
@@ -95,7 +96,8 @@ class Sidebar extends Component {
    * @returns {undefined}
    */
   onToggleExpanded() {
-    cookie.save('sidebar_expanded', !this.state.expanded, {
+    const { cookies } = this.props;
+    cookies.set('sidebar_expanded', !this.state.expanded, {
       expires: new Date((2 ** 31 - 1) * 1000),
       path: '/',
     });
@@ -269,6 +271,7 @@ class Sidebar extends Component {
 
 export default compose(
   injectIntl,
+  withCookies,
   connect(
     (state) => ({
       tab: state.sidebar.tab,

package/src/components/manage/Toolbar/PersonalTools.jsx

@@ -11,6 +11,7 @@ import cx from 'classnames';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import { getUser } from '@plone/volto/actions';
+import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 import { userHasRoles } from '@plone/volto/helpers';
 
 import logoutSVG from '@plone/volto/icons/log-out.svg';
@@ -172,6 +173,7 @@ class PersonalTools extends Component {
                 </Link>
               </li>
             )}
+            <Pluggable name="toolbar-user-menu" />
           </ul>
         </div>
       </div>

package/src/components/manage/Toolbar/PersonalTools.test.jsx

@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import jwt from 'jsonwebtoken';
+import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
 
 import PersonalTools from './PersonalTools';
 
@@ -35,14 +36,16 @@ describe('Toolbar Personal Tools component', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
-          <PersonalTools
-            loadComponent={() => {}}
-            theToolbar={{
-              current: { getBoundingClientRect: () => ({ width: '320' }) },
-            }}
-          />
-        </MemoryRouter>
+        <PluggablesProvider>
+          <MemoryRouter>
+            <PersonalTools
+              loadComponent={() => {}}
+              theToolbar={{
+                current: { getBoundingClientRect: () => ({ width: '320' }) },
+              }}
+            />
+          </MemoryRouter>
+        </PluggablesProvider>
       </Provider>,
     );
     const json = component.toJSON();

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -11,7 +11,7 @@ import jwtDecode from 'jwt-decode';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-import cookie from 'react-cookie';
+import { withCookies } from 'react-cookie';
 import { filter, find } from 'lodash';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
@@ -175,17 +175,21 @@ class Toolbar extends Component {
     types: [],
   };
 
-  state = {
-    expanded: cookie.load('toolbar_expanded') !== 'false',
-    showMenu: false,
-    menuStyle: {},
-    menuComponents: [],
-    loadedComponents: [],
-    hideToolbarBody: false,
-  };
-
   toolbarWindow = React.createRef();
 
+  constructor(props) {
+    super(props);
+    const { cookies } = props;
+    this.state = {
+      expanded: cookies.get('toolbar_expanded') !== 'false',
+      showMenu: false,
+      menuStyle: {},
+      menuComponents: [],
+      loadedComponents: [],
+      hideToolbarBody: false,
+    };
+  }
+
   /**
    * Component will mount
    * @method componentDidMount
@@ -226,7 +230,8 @@ class Toolbar extends Component {
   }
 
   handleShrink = () => {
-    cookie.save('toolbar_expanded', !this.state.expanded, {
+    const { cookies } = this.props;
+    cookies.set('toolbar_expanded', !this.state.expanded, {
       expires: new Date((2 ** 31 - 1) * 1000),
       path: '/',
     });
@@ -569,6 +574,7 @@ class Toolbar extends Component {
 
 export default compose(
   injectIntl,
+  withCookies,
   connect(
     (state, props) => ({
       actions: state.actions.actions,

package/src/components/manage/Widgets/SelectAutoComplete.jsx

@@ -135,11 +135,11 @@ class SelectAutoComplete extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { value, choices = [] } = this.props;
+    const { value, choices } = this.props;
     if (
       this.state.termsPairsCache.length === 0 &&
       value?.length > 0 &&
-      choices.length > 0
+      choices?.length > 0
     ) {
       this.setState((state) => ({
         termsPairsCache: [...state.termsPairsCache, ...choices],

package/src/components/theme/LanguageSelector/LanguageSelector.js

@@ -7,21 +7,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import cx from 'classnames';
 import { find, map } from 'lodash';
 
-import {
-  Helmet,
-  langmap,
-  flattenToAppURL,
-  normalizeLanguageName,
-} from '@plone/volto/helpers';
+import { Helmet, langmap, flattenToAppURL } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 
-import { changeLanguage } from '@plone/volto/actions';
-
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -33,7 +26,6 @@ const messages = defineMessages({
 
 const LanguageSelector = (props) => {
   const intl = useIntl();
-  const dispatch = useDispatch();
   const currentLang = useSelector((state) => state.intl.locale);
   const translations = useSelector(
     (state) => state.content.data?.['@components']?.translations?.items,
@@ -55,14 +47,6 @@ const LanguageSelector = (props) => {
             title={langmap[lang].nativeName}
             onClick={() => {
               props.onClickAction();
-              if (config.settings.supportedLanguages.includes(lang)) {
-                const langFileName = normalizeLanguageName(lang);
-                import('~/../locales/' + langFileName + '.json').then(
-                  (locale) => {
-                    dispatch(changeLanguage(lang, locale.default));
-                  },
-                );
-              }
             }}
             key={`language-selector-${lang}`}
           >

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import cookie from 'react-cookie';
+import { useCookies } from 'react-cookie';
 import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions';
 import { normalizeLanguageName } from '@plone/volto/helpers';
@@ -9,8 +9,8 @@ import { normalizeLanguageName } from '@plone/volto/helpers';
 const MultilingualRedirector = (props) => {
   const { settings } = config;
   const { pathname, contentLanguage, children } = props;
-  const currentLanguage =
-    cookie.load('I18N_LANGUAGE') || settings.defaultLanguage;
+  const [cookies] = useCookies(['name']);
+  const currentLanguage = cookies['I18N_LANGUAGE'] || settings.defaultLanguage;
   const redirectToLanguage = settings.supportedLanguages.includes(
     currentLanguage,
   )
@@ -23,10 +23,14 @@ const MultilingualRedirector = (props) => {
     // UI are the same. Otherwise, there are inconsistencies between the UI main elements
     // eg. Home link in breadcrumbs, other i18n dependant literals from the main UI and
     // the current content language.
+    // This variable makes sure that the async operation in the lazy load import does not
+    // happen twice (when switching language)
+    let mounted = true;
     if (
       contentLanguage &&
       currentLanguage !== contentLanguage &&
       pathname &&
+      pathname !== '/' &&
       // We don't want to trigger it in Babel View, since Babel view already takes care
       // of it
       !pathname.endsWith('/add') &&
@@ -34,9 +38,14 @@ const MultilingualRedirector = (props) => {
     ) {
       const langFileName = normalizeLanguageName(contentLanguage);
       import('~/../locales/' + langFileName + '.json').then((locale) => {
-        dispatch(changeLanguage(contentLanguage, locale.default));
+        if (mounted) {
+          dispatch(changeLanguage(contentLanguage, locale.default));
+        }
       });
     }
+    return () => {
+      mounted = false;
+    };
   }, [
     pathname,
     dispatch,
@@ -48,12 +57,18 @@ const MultilingualRedirector = (props) => {
   React.useEffect(() => {
     // ToDo: Add means to support language negotiation (with config)
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
+    let mounted = true;
     if (settings.isMultilingual && pathname === '/') {
       const langFileName = normalizeLanguageName(redirectToLanguage);
       import('~/../locales/' + langFileName + '.json').then((locale) => {
-        dispatch(changeLanguage(redirectToLanguage, locale.default));
+        if (mounted) {
+          dispatch(changeLanguage(redirectToLanguage, locale.default));
+        }
       });
     }
+    return () => {
+      mounted = false;
+    };
   }, [pathname, dispatch, redirectToLanguage, settings.isMultilingual]);
 
   return pathname === '/' && settings.isMultilingual ? (

package/src/helpers/Api/APIResourceWithAuth.js

@@ -4,7 +4,6 @@
  */
 
 import superagent from 'superagent';
-import cookie from 'react-cookie';
 import config from '@plone/volto/registry';
 
 /**
@@ -30,7 +29,7 @@ export const getAPIResourceWithAuth = (req) =>
       .get(`${apiPath}${APISUFIX}${req.path}`)
       .maxResponseSize(settings.maxResponseSize)
       .responseType('blob');
-    const authToken = cookie.load('auth_token');
+    const authToken = req.universalCookies.get('auth_token');
     if (authToken) {
       request.set('Authorization', `Bearer ${authToken}`);
     }

package/src/helpers/Api/Api.js

@@ -4,7 +4,7 @@
  */
 
 import superagent from 'superagent';
-import cookie from 'react-cookie';
+import Cookies from 'universal-cookie';
 import config from '@plone/volto/registry';
 
 const methods = ['get', 'post', 'put', 'patch', 'del'];
@@ -42,7 +42,9 @@ class Api {
    * @method constructor
    * @constructs Api
    */
-  constructor() {
+  constructor(req) {
+    const cookies = new Cookies();
+
     methods.forEach((method) => {
       this[method] = (path, { params, data, type, headers = {} } = {}) => {
         let request;
@@ -53,10 +55,15 @@ class Api {
             request.query(params);
           }
 
-          const authToken = cookie.load('auth_token');
+          let authToken;
+          if (req) {
+            // We are in SSR
+            authToken = req.universalCookies.get('auth_token');
+          } else {
+            authToken = cookies.get('auth_token');
+          }
           if (authToken) {
             request.set('Authorization', `Bearer ${authToken}`);
-            if (__SERVER__) request.set('Cookie', `auth_token=${authToken}`);
           }
 
           request.set('Accept', 'application/json');

package/src/helpers/AuthToken/AuthToken.js

@@ -3,19 +3,20 @@
  * @module helpers/AuthToken
  */
 
-import cookie from 'react-cookie';
+import Cookies from 'universal-cookie';
 import jwtDecode from 'jwt-decode';
 
 import { loginRenew } from '@plone/volto/actions';
 import { push } from 'connected-react-router';
 
 /**
- * Get auth token method.
+ * Get auth token method (does not work in SSR)
  * @method getAuthToken
  * @returns {undefined}
  */
 export function getAuthToken() {
-  return cookie.load('auth_token');
+  const cookies = new Cookies();
+  return cookies.get('auth_token');
 }
 
 /**
@@ -24,8 +25,15 @@ export function getAuthToken() {
  * @param {object} store Redux store.
  * @returns {undefined}
  */
-export function persistAuthToken(store) {
-  let currentValue = getAuthToken();
+export function persistAuthToken(store, req) {
+  const cookies = new Cookies();
+  let currentValue;
+  if (req) {
+    // We are in SSR
+    currentValue = req.universalCookies.get('auth_token');
+  } else {
+    currentValue = cookies.get('auth_token');
+  }
 
   /**
    * handleChange method.
@@ -50,11 +58,11 @@ export function persistAuthToken(store) {
     if (previousValue !== currentValue || initial) {
       if (!currentValue) {
         if (previousValue) {
-          cookie.remove('auth_token', { path: '/' });
+          cookies.remove('auth_token', { path: '/' });
         }
       } else {
         if (previousValue !== currentValue) {
-          cookie.save('auth_token', currentValue, {
+          cookies.set('auth_token', currentValue, {
             path: '/',
             expires: new Date(jwtDecode(currentValue).exp * 1000),
           });

package/src/helpers/AuthToken/AuthToken.test.js

@@ -1,20 +1,24 @@
-import cookie from 'react-cookie';
+import Cookies from 'universal-cookie';
 import jwt from 'jsonwebtoken';
 import jwtDecode from 'jwt-decode';
 
 import { getAuthToken, persistAuthToken } from './AuthToken';
 
-jest.mock('react-cookie', () => ({
-  load: jest
-    .fn(() => require('jsonwebtoken').sign({ exp: 1 }, 'secret')) // eslint-disable-line global-require
-    .mockImplementationOnce(() => null), // the first call is for anonymous, no auth_token cookie
-  remove: jest.fn(),
-  save: jest.fn(),
-}));
+jest.mock('universal-cookie', () => {
+  const mCookie = {
+    get: jest
+      .fn(() => require('jsonwebtoken').sign({ exp: 1 }, 'secret')) // eslint-disable-line global-require
+      .mockImplementationOnce(() => null), // the first call is for anonymous, no auth_token cookie
+    remove: jest.fn(),
+    set: jest.fn(),
+  };
+  return jest.fn(() => mCookie);
+});
 
 describe('AuthToken', () => {
   describe('anonymousAuthToken', () => {
     it('avoid unnecessary removing auth token', () => {
+      const cookies = new Cookies();
       const store = {
         subscribe: jest.fn(),
         getState: jest.fn(() => ({
@@ -24,19 +28,21 @@ describe('AuthToken', () => {
         })),
       };
       persistAuthToken(store);
-      expect(cookie.remove).not.toBeCalledWith('auth_token', { path: '/' });
+      expect(cookies.remove).not.toBeCalledWith('auth_token', { path: '/' });
     });
   });
 
   describe('getAuthToken', () => {
     it('can get the auth token', () => {
+      const cookies = new Cookies();
       getAuthToken();
-      expect(cookie.load).toBeCalledWith('auth_token');
+      expect(cookies.get).toBeCalledWith('auth_token');
     });
   });
 
   describe('persistAuthToken', () => {
     it('can set a new auth token', () => {
+      const cookies = new Cookies();
       const store = {
         subscribe: jest.fn(),
         getState: jest.fn(() => ({
@@ -48,13 +54,14 @@ describe('AuthToken', () => {
       const { token } = store.getState().userSession;
 
       persistAuthToken(store);
-      expect(cookie.save).toBeCalledWith('auth_token', token, {
+      expect(cookies.set).toBeCalledWith('auth_token', token, {
         path: '/',
         expires: new Date(jwtDecode(token).exp * 1000),
       });
     });
 
     it('can remove an auth token', () => {
+      const cookies = new Cookies();
       const store = {
         subscribe: jest.fn(),
         getState: jest.fn(() => ({
@@ -65,7 +72,7 @@ describe('AuthToken', () => {
       };
 
       persistAuthToken(store);
-      expect(cookie.remove).toBeCalledWith('auth_token', { path: '/' });
+      expect(cookies.remove).toBeCalledWith('auth_token', { path: '/' });
     });
   });
 });

package/src/helpers/Robots/Robots.js

@@ -4,7 +4,6 @@
  */
 
 import superagent from 'superagent';
-import cookie from 'react-cookie';
 import config from '@plone/volto/registry';
 
 /**
@@ -23,7 +22,7 @@ export const generateRobots = (req) =>
     );
     request.set('Accept', 'text/plain');
 
-    const authToken = cookie.load('auth_token');
+    const authToken = req.universalCookies.get('auth_token');
     if (authToken) {
       request.set('Authorization', `Bearer ${authToken}`);
     }

package/src/helpers/Sitemap/Sitemap.js

@@ -5,7 +5,6 @@
 
 import superagent from 'superagent';
 import { map } from 'lodash';
-import cookie from 'react-cookie';
 import zlib from 'zlib';
 import { toPublicURL } from '@plone/volto/helpers';
 
@@ -24,7 +23,7 @@ export const generateSitemap = (_req) =>
       `${settings.apiPath}/@search?metadata_fields=modified&b_size=100000000&use_site_search_settings=1`,
     );
     request.set('Accept', 'application/json');
-    const authToken = cookie.load('auth_token');
+    const authToken = _req.universalCookies.get('auth_token');
     if (authToken) {
       request.set('Authorization', `Bearer ${authToken}`);
     }
@@ -35,7 +34,7 @@ export const generateSitemap = (_req) =>
         const items = map(
           body.items,
           (item) =>
-            `  <url>\n    <loc>${toPublicURL(item['@id'])}</loc>\n  
+            `  <url>\n    <loc>${toPublicURL(item['@id'])}</loc>\n
             <lastmod>${item.modified}</lastmod>\n  </url>`,
         );
         const result = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">\n${items.join(

package/src/middleware/api.js

@@ -3,7 +3,7 @@
  * @module middleware/api
  */
 
-import cookie from 'react-cookie';
+import Cookies from 'universal-cookie';
 import jwtDecode from 'jwt-decode';
 import { compact, flatten, union } from 'lodash';
 import { matchPath } from 'react-router';
@@ -174,7 +174,8 @@ export default (api) => ({ dispatch, getState }) => (next) => (action) => {
           });
         }
         if (type === LOGIN && settings.websockets) {
-          cookie.save('auth_token', result.token, {
+          const cookies = new Cookies();
+          cookies.set('auth_token', result.token, {
             path: '/',
             expires: new Date(jwtDecode(result.token).exp * 1000),
           });

package/src/server.jsx

@@ -9,12 +9,13 @@ import { renderToString } from 'react-dom/server';
 import { createMemoryHistory } from 'history';
 import { parse as parseUrl } from 'url';
 import { keys } from 'lodash';
-import cookie, { plugToRequest } from 'react-cookie';
 import locale from 'locale';
 import { detect } from 'detect-browser';
 import path from 'path';
 import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
 import { resetServerContext } from 'react-beautiful-dnd';
+import { CookiesProvider } from 'react-cookie';
+import cookiesMiddleware from 'universal-cookie-express';
 import debug from 'debug';
 
 import routes from '~/routes';
@@ -62,10 +63,7 @@ const server = express()
     // Support for HEAD requests. Required by start-test utility in CI.
     res.send('');
   })
-  .all('*', (req, res, next) => {
-    plugToRequest(req, res);
-    next();
-  });
+  .use(cookiesMiddleware());
 
 const middleware = (config.settings.expressMiddleware || []).filter((m) => m);
 
@@ -106,14 +104,14 @@ function setupServer(req, res, next) {
   const browserdetect = detect(req.headers['user-agent']);
 
   const lang = new locale.Locales(
-    cookie.load('I18N_LANGUAGE') ||
+    req.universalCookies.get('I18N_LANGUAGE') ||
       config.settings.defaultLanguage ||
       req.headers['accept-language'],
   )
     .best(supported)
     .toString();
 
-  const authToken = cookie.load('auth_token');
+  const authToken = req.universalCookies.get('auth_token');
   const initialState = {
     userSession: { ...userSession(), token: authToken },
     form: req.body,
@@ -132,7 +130,7 @@ function setupServer(req, res, next) {
   // Create a new Redux store instance
   const store = configureStore(initialState, history, api);
 
-  persistAuthToken(store);
+  persistAuthToken(store, req);
 
   function errorHandler(error) {
     const errorPage = (
@@ -204,11 +202,13 @@ server.get('/*', (req, res) => {
       resetServerContext();
       const markup = renderToString(
         <ChunkExtractorManager extractor={extractor}>
-          <Provider store={store} onError={reactIntlErrorHandler}>
-            <StaticRouter context={context} location={req.url}>
-              <ReduxAsyncConnect routes={routes} helpers={api} />
-            </StaticRouter>
-          </Provider>
+          <CookiesProvider cookies={req.universalCookies}>
+            <Provider store={store} onError={reactIntlErrorHandler}>
+              <StaticRouter context={context} location={req.url}>
+                <ReduxAsyncConnect routes={routes} helpers={api} />
+              </StaticRouter>
+            </Provider>
+          </CookiesProvider>
         </ChunkExtractorManager>,
       );
 

package/src/start-client.jsx

@@ -8,6 +8,7 @@ import { ConnectedRouter } from 'connected-react-router';
 import { createBrowserHistory } from 'history';
 import { ReduxAsyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import { loadableReady } from '@loadable/component';
+import { CookiesProvider } from 'react-cookie';
 import debug from 'debug';
 import routes from '~/routes';
 import config from '@plone/volto/registry';
@@ -55,15 +56,17 @@ export default () => {
 
   loadableReady(() => {
     hydrate(
-      <Provider store={store}>
-        <IntlProvider onError={reactIntlErrorHandler}>
-          <ConnectedRouter history={history}>
-            <ScrollToTop>
-              <ReduxAsyncConnect routes={routes} helpers={api} />
-            </ScrollToTop>
-          </ConnectedRouter>
-        </IntlProvider>
-      </Provider>,
+      <CookiesProvider>
+        <Provider store={store}>
+          <IntlProvider onError={reactIntlErrorHandler}>
+            <ConnectedRouter history={history}>
+              <ScrollToTop>
+                <ReduxAsyncConnect routes={routes} helpers={api} />
+              </ScrollToTop>
+            </ConnectedRouter>
+          </IntlProvider>
+        </Provider>
+      </CookiesProvider>,
       document.getElementById('main'),
     );
   });

package/pyvenv.cfg

@@ -1,3 +0,0 @@
-home = /opt/homebrew/Cellar/python@3.8/3.8.12_1/bin
-include-system-site-packages = false
-version = 3.8.12