@eeacms/volto-clms-theme 1.1.291 → 1.1.293

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.293](https://github.com/eea/volto-clms-theme/compare/1.1.292...1.1.293) - 5 June 2026
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`8c05ecd`](https://github.com/eea/volto-clms-theme/commit/8c05ecd107a922be765a39df0c161e5d407ae053)]
+
+#### :hammer_and_wrench: Others
+
+- add deps [Dobricean Ioan Dorian - [`1000ea9`](https://github.com/eea/volto-clms-theme/commit/1000ea9261702391c255f833e961b27c6fd9a2d5)]
+- add deps [Dobricean Ioan Dorian - [`199a21f`](https://github.com/eea/volto-clms-theme/commit/199a21f7022ff81337cd8e10c609bbbdf0421351)]
+- Add volto-authomatic dependency to package.json [dobri1408 - [`a9151d6`](https://github.com/eea/volto-clms-theme/commit/a9151d62c369a4225a6e0750b28f25f492b37138)]
+- add entra id [Dobricean Ioan Dorian - [`a167b6a`](https://github.com/eea/volto-clms-theme/commit/a167b6ac92480f9e99c1478d322cfc829c99d238)]
+### [1.1.292](https://github.com/eea/volto-clms-theme/compare/1.1.291...1.1.292) - 2 June 2026
+
 ### [1.1.291](https://github.com/eea/volto-clms-theme/compare/1.1.290...1.1.291) - 22 May 2026
 
 ### [1.1.290](https://github.com/eea/volto-clms-theme/compare/1.1.289...1.1.290) - 21 May 2026

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.291",
+  "version": "1.1.293",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -32,7 +32,8 @@
     "volto-cookie-banner",
     "@eeacms/volto-tableau",
     "@eeacms/volto-embed",
-    "@eeacms/volto-globalsearch"
+    "@eeacms/volto-globalsearch",
+    "@plone-collective/volto-authomatic"
   ],
   "resolutions": {
     "@elastic/search-ui": "1.21.2",
@@ -59,6 +60,7 @@
     "@fortawesome/react-fontawesome": "0.1.14",
     "@ginkgo-bioworks/react-json-schema-form-builder": "2.10.1",
     "@kitconcept/volto-blocks-grid": "7.0.2",
+    "@plone-collective/volto-authomatic": "2.0.1",
     "connected-react-router": "6.8.0",
     "d3-array": "^2.12.1",
     "husky": "7.0.4",

package/src/components/CLMSLoginView/AuthomaticLoginPlone.jsx

@@ -0,0 +1,390 @@
+/**
+ * Combined Login container - supports both external providers and Plone login.
+ * @module components/Login/Login
+ */
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+import {
+  Container,
+  Button,
+  Form,
+  Input,
+  Segment,
+  Grid,
+} from 'semantic-ui-react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import qs from 'query-string';
+import { useCookies } from 'react-cookie';
+
+import { Helmet } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import { Icon } from '@plone/volto/components';
+import { login, resetLoginRequest } from '@plone/volto/actions';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import './Login.less';
+
+// Import authomatic components and actions
+import {
+  authomaticRedirect,
+  listAuthOptions,
+  oidcRedirect,
+} from '@plone-collective/volto-authomatic/actions';
+import AuthProviders from '@plone-collective/volto-authomatic/components/AuthProviders/AuthProviders';
+
+const messages = defineMessages({
+  login: {
+    id: 'Log in',
+    defaultMessage: 'Log in',
+  },
+  loginName: {
+    id: 'Login Name',
+    defaultMessage: 'Login Name',
+  },
+  Login: {
+    id: 'Login',
+    defaultMessage: 'Login',
+  },
+  password: {
+    id: 'Password',
+    defaultMessage: 'Password',
+  },
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
+  loginFailed: {
+    id: 'Login Failed',
+    defaultMessage: 'Login Failed',
+  },
+  loginFailedContent: {
+    id:
+      'Both email address and password are case sensitive, check that caps lock is not enabled.',
+    defaultMessage:
+      'Both email address and password are case sensitive, check that caps lock is not enabled.',
+  },
+  register: {
+    id: 'Register',
+    defaultMessage: 'Register',
+  },
+  forgotPassword: {
+    id: 'box_forgot_password_option',
+    defaultMessage: 'Forgot your password?',
+  },
+  signInWith: {
+    id: 'Sign in with EEA Microsoft Entra ID',
+    defaultMessage: 'Sign in with EEA Microsoft Entra ID',
+  },
+  orSignIn: {
+    id: 'Or sign in with EEA Entra ID:',
+    defaultMessage: 'Or sign in with EEA Entra ID:',
+  },
+  loading: {
+    id: 'Loading',
+    defaultMessage: 'Loading',
+  },
+});
+
+/**
+ * Get return url function.
+ * @function getReturnUrl
+ * @param  {Object} location Location object.
+ * @returns {string} Return url.
+ */
+function getReturnUrl(location) {
+  return `${
+    qs.parse(location.search).return_url ||
+    (location.pathname === '/login'
+      ? '/'
+      : location.pathname.replace('/login', ''))
+  }`;
+}
+
+/**
+ * Combined Login function.
+ * @function Login
+ * @returns {JSX.Element} Markup of the Login page.
+ */
+function Login({ intl }) {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const location = useLocation();
+
+  // Authomatic state
+  const [startedOAuth, setStartedOAuth] = useState(false);
+  const [startedOIDC, setStartedOIDC] = useState(false);
+  const loading = useSelector((state) => state.authOptions.loading);
+  const options = useSelector((state) => state.authOptions.options);
+  const loginOAuthValues = useSelector((state) => state.authomaticRedirect);
+  const loginOIDCValues = useSelector((state) => state.oidcRedirect);
+  const [, setCookie] = useCookies();
+
+  // Plone login state
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const error = useSelector((state) => state.userSession.login.error);
+  const ploneLoading = useSelector((state) => state.userSession.login.loading);
+
+  const returnUrl =
+    qs.parse(location.search).return_url ||
+    location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
+    '/';
+
+  useEffect(() => {
+    dispatch(listAuthOptions());
+  }, [dispatch]);
+
+  // Handle successful Plone login
+  useEffect(() => {
+    if (token) {
+      history.push(returnUrl || '/');
+      if (toast.isActive('loggedOut')) {
+        toast.dismiss('loggedOut');
+      }
+      if (toast.isActive('loginFailed')) {
+        toast.dismiss('loginFailed');
+      }
+    }
+    if (error) {
+      if (toast.isActive('loggedOut')) {
+        toast.dismiss('loggedOut');
+      }
+      if (!toast.isActive('loginFailed')) {
+        toast.error(
+          <Toast
+            error
+            title={intl.formatMessage(messages.loginFailed)}
+            content={intl.formatMessage(messages.loginFailedContent)}
+          />,
+          { autoClose: false, toastId: 'loginFailed' },
+        );
+      }
+    }
+    return () => {
+      if (toast.isActive('loginFailed')) {
+        toast.dismiss('loginFailed');
+        dispatch(resetLoginRequest());
+      }
+    };
+  }, [dispatch, token, error, intl, history, returnUrl]);
+
+  // Handle OAuth redirects
+  useEffect(() => {
+    const next_url = loginOAuthValues.next_url;
+    const session = loginOAuthValues.session;
+    if (next_url && session && startedOAuth) {
+      setStartedOAuth(false);
+      // Give time to save state to localstorage
+      setTimeout(function () {
+        window.location.href = next_url;
+      }, 500);
+    }
+  }, [startedOAuth, loginOAuthValues]);
+
+  useEffect(() => {
+    const next_url = loginOIDCValues.next_url;
+    if (next_url && startedOIDC) {
+      setStartedOIDC(false);
+      // Give time to save state to localstorage
+      setTimeout(function () {
+        window.location.href = next_url;
+      }, 500);
+    }
+  }, [startedOIDC, loginOIDCValues]);
+
+  useEffect(() => {
+    if (
+      options !== undefined &&
+      options.length === 1 &&
+      options[0].id === 'oidc'
+    ) {
+      setStartedOIDC(true);
+      dispatch(oidcRedirect('oidc'));
+    }
+  }, [options, dispatch]);
+
+  // Handle provider selection
+  const onSelectProvider = (provider) => {
+    setStartedOAuth(true);
+    setCookie('return_url', getReturnUrl(location), { path: '/' });
+    dispatch(authomaticRedirect(provider.id));
+  };
+
+  // Handle Plone login form submission
+  const onLogin = (event) => {
+    dispatch(
+      login(
+        document.getElementsByName('login')[0].value,
+        document.getElementsByName('password')[0].value,
+      ),
+    );
+    event.preventDefault();
+  };
+
+  // Prepare providers for external login
+  const validProviders = options
+    ? options.filter((provider) => provider.id !== 'oidc')
+    : [];
+
+  return (
+    <div id="page-login">
+      <Helmet title={intl.formatMessage(messages.Login)} />
+      <Container text>
+        <Segment.Group raised>
+          <Segment className="primary">
+            <FormattedMessage id="Log In" defaultMessage="Login" />
+          </Segment>
+          <Segment secondary>
+            <FormattedMessage
+              id="Sign in to start session"
+              defaultMessage="Sign in to start session"
+            />
+          </Segment>
+
+          {/* Plone Login Form */}
+          <Segment className="form">
+            <Form method="post" onSubmit={onLogin}>
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    <Grid.Column width="4">
+                      <div className="wrapper">
+                        <label htmlFor="login">
+                          <FormattedMessage
+                            id="Login Name"
+                            defaultMessage="Login Name"
+                          />
+                        </label>
+                      </div>
+                    </Grid.Column>
+                    <Grid.Column width="8">
+                      <Input
+                        id="login"
+                        name="login"
+                        placeholder={intl.formatMessage(messages.loginName)}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    <Grid.Column stretched width="4">
+                      <div className="wrapper">
+                        <label htmlFor="password">
+                          <FormattedMessage
+                            id="Password"
+                            defaultMessage="Password"
+                          />
+                        </label>
+                      </div>
+                    </Grid.Column>
+                    <Grid.Column stretched width="8">
+                      <Input
+                        type="password"
+                        id="password"
+                        autoComplete="current-password"
+                        name="password"
+                        placeholder={intl.formatMessage(messages.password)}
+                        tabIndex={0}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    {config.settings.showSelfRegistration && (
+                      <Grid.Column stretched width="12">
+                        <p className="help">
+                          <Link to="/register">
+                            {intl.formatMessage(messages.register)}
+                          </Link>
+                        </p>
+                      </Grid.Column>
+                    )}
+                    <Grid.Column stretched width="12">
+                      <p className="help">
+                        <Link to="/passwordreset">
+                          {intl.formatMessage(messages.forgotPassword)}
+                        </Link>
+                      </p>
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+            </Form>
+          </Segment>
+
+          <Segment className="actions" clearing>
+            <Button
+              basic
+              primary
+              icon
+              floated="right"
+              type="submit"
+              form="login-form"
+              id="login-form-submit"
+              aria-label={intl.formatMessage(messages.login)}
+              title={intl.formatMessage(messages.login)}
+              loading={ploneLoading}
+              onClick={onLogin}
+            >
+              <Icon className="circled" name={aheadSVG} size="30px" />
+            </Button>
+
+            <Button
+              basic
+              secondary
+              icon
+              floated="right"
+              id="login-form-cancel"
+              as={Link}
+              to="/"
+              aria-label={intl.formatMessage(messages.cancel)}
+              title={intl.formatMessage(messages.cancel)}
+            >
+              <Icon className="circled" name={clearSVG} size="30px" />
+            </Button>
+          </Segment>
+        </Segment.Group>
+
+        {/* External Login Providers - Outside the main form */}
+        {validProviders && validProviders.length > 0 && (
+          <div style={{ marginTop: '2rem', width: '100%' }}>
+            <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
+              <FormattedMessage
+                id="Or sign in with EEA Entra ID:"
+                defaultMessage="Or sign in with EEA Entra ID:"
+              />
+            </div>
+            <div style={{ width: '100%' }}>
+              {!loading && validProviders && (
+                <AuthProviders
+                  providers={validProviders}
+                  action="login"
+                  onSelectProvider={onSelectProvider}
+                />
+              )}
+              {(loading || validProviders.length === 0) && (
+                <div style={{ textAlign: 'center', padding: '1rem' }}>
+                  {intl.formatMessage(messages.loading)}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </Container>
+    </div>
+  );
+}
+
+export default injectIntl(Login);

package/src/components/CLMSLoginView/Login.less

@@ -0,0 +1,8 @@
+.ui.button.authenticationProvider {
+  display: inline-flex;
+  width: 100% !important;
+  align-items: center;
+  margin: 0.5rem auto;
+  border-radius: 3px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
+}

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -79,6 +79,7 @@ class Html extends Component {
     store: PropTypes.shape({
       getState: PropTypes.func,
     }).isRequired,
+    nonce: PropTypes.string,
   };
 
   /**
@@ -94,10 +95,12 @@ class Html extends Component {
       criticalCss,
       apiPath,
       publicURL,
+      nonce,
     } = this.props;
     const head = Helmet.rewind();
     const bodyClass = join(BodyClass.rewind(), ' ');
     const htmlAttributes = head.htmlAttributes.toComponent();
+    const helmetScripts = head.script.toComponent();
 
     return (
       <html lang={htmlAttributes.lang}>
@@ -107,9 +110,14 @@ class Html extends Component {
           {head.title.toComponent()}
           {head.meta.toComponent()}
           {head.link.toComponent()}
-          {head.script.toComponent()}
+          {React.Children.map(helmetScripts, (elem) =>
+            React.isValidElement(elem)
+              ? React.cloneElement(elem, { nonce })
+              : elem,
+          )}
 
           <script
+            nonce={nonce}
             dangerouslySetInnerHTML={{
               __html: `window.env = ${serialize({
                 ...runtimeConfig,
@@ -138,6 +146,7 @@ class Html extends Component {
           <meta name="mobile-web-app-capable" content="yes" />
           {process.env.NODE_ENV === 'production' && criticalCss && (
             <style
+              nonce={nonce}
               dangerouslySetInnerHTML={{ __html: this.props.criticalCss }}
             />
           )}
@@ -159,6 +168,7 @@ class Html extends Component {
             criticalCss ? (
               <>
                 <script
+                  nonce={nonce}
                   dangerouslySetInnerHTML={{
                     __html: CRITICAL_CSS_TEMPLATE,
                   }}
@@ -185,6 +195,7 @@ class Html extends Component {
           <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
           <div role="complementary" aria-label="Sidebar" id="sidebar" />
           <script
+            nonce={nonce}
             dangerouslySetInnerHTML={{
               __html: `window.__data=${serialize(
                 loadReducers(store.getState()),
@@ -196,6 +207,7 @@ class Html extends Component {
           {this.props.extractScripts !== false
             ? extractor.getScriptElements().map((elem) =>
                 React.cloneElement(elem, {
+                  nonce,
                   crossOrigin:
                     process.env.NODE_ENV === 'production' ? undefined : 'true',
                 }),

package/src/customizations/volto/helpers/Html/Readme.md

@@ -0,0 +1 @@
+Customized for CSP nonce support.

package/src/customizations/volto/server.jsx

@@ -0,0 +1,375 @@
+/* eslint no-console: 0 */
+import '@plone/volto/config'; // This is the bootstrap for the global config - server side
+import { existsSync, lstatSync, readFileSync } from 'fs';
+import React from 'react';
+import { StaticRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+import { createMemoryHistory } from 'history';
+import { parse as parseUrl } from 'url';
+import { keys } from 'lodash';
+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 crypto from 'crypto';
+
+import routes from '@root/routes';
+import config from '@plone/volto/registry';
+
+import {
+  flattenToAppURL,
+  Html,
+  Api,
+  persistAuthToken,
+  toBackendLang,
+  toGettextLang,
+  toReactIntlLang,
+} from '@plone/volto/helpers';
+import { changeLanguage } from '@plone/volto/actions';
+
+import userSession from '@plone/volto/reducers/userSession/userSession';
+
+import ErrorPage from '@plone/volto/error';
+
+import languages from '@plone/volto/constants/Languages';
+
+import configureStore from '@plone/volto/store';
+import {
+  ReduxAsyncConnect,
+  loadOnServer,
+} from '@plone/volto/helpers/AsyncConnect';
+
+let locales = {};
+const cspConfig = process.env.CSP_HEADER || config.settings.serverConfig?.csp;
+
+if (config.settings) {
+  config.settings.supportedLanguages.forEach((lang) => {
+    const langFileName = toGettextLang(lang);
+    import('@root/../locales/' + langFileName + '.json').then((locale) => {
+      locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
+    });
+  });
+}
+
+function reactIntlErrorHandler(error) {
+  debug('i18n')(error);
+}
+
+const supported = new locale.Locales(keys(languages), 'en');
+
+const server = express()
+  .disable('x-powered-by')
+  .head('/*', function (req, res) {
+    // Support for HEAD requests. Required by start-test utility in CI.
+    res.send('');
+  })
+  .use(cookiesMiddleware());
+
+const middleware = (config.settings.expressMiddleware || []).filter((m) => m);
+
+server.all('*', setupServer);
+if (middleware.length) server.use('/', middleware);
+
+// eslint-disable-next-line no-unused-vars
+server.use(function (err, req, res, next) {
+  if (err) {
+    const { store } = res.locals;
+    const errorPage = (
+      <Provider store={store} onError={reactIntlErrorHandler}>
+        <StaticRouter context={{}} location={req.url}>
+          <ErrorPage message={err.message} />
+        </StaticRouter>
+      </Provider>
+    );
+
+    res.set({
+      'Cache-Control': 'public, max-age=60, no-transform',
+    });
+
+    /* Displays error in console
+     * TODO:
+     * - get ignored codes from Plone error_log
+     */
+    const ignoredErrors = [301, 302, 401, 404];
+    if (!ignoredErrors.includes(err.status)) console.error(err);
+
+    res
+      .status(err.status || 500) // If error happens in Volto code itself error status is undefined
+      .send(`<!doctype html> ${renderToString(errorPage)}`);
+  }
+});
+
+function buildCSPHeader(opts, nonce) {
+  const nonceValue = `'nonce-${nonce}'`;
+
+  if (typeof opts === 'string') {
+    return opts.replaceAll('{nonce}', nonceValue);
+  }
+
+  return Object.keys(opts)
+    .sort()
+    .reduce((acc, key) => {
+      const value = Array.isArray(opts[key]) ? opts[key].join(' ') : opts[key];
+      return [...acc, `${key} ${value.replaceAll('{nonce}', nonceValue)}`];
+    }, [])
+    .join('; ');
+}
+
+function setupServer(req, res, next) {
+  if (cspConfig) {
+    res.locals.nonce = crypto.randomBytes(16).toString('base64');
+  }
+
+  const api = new Api(req);
+
+  const lang = toReactIntlLang(
+    new locale.Locales(
+      req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'],
+    )
+      .best(supported)
+      .toString(),
+  );
+
+  // Minimum initial state for the fake Redux store instance
+  const initialState = {
+    intl: {
+      defaultLocale: 'en',
+      locale: lang,
+      messages: locales[lang],
+    },
+  };
+
+  const history = createMemoryHistory({
+    initialEntries: [req.url],
+  });
+
+  // Create a fake Redux store instance for the `errorHandler` to render
+  // and for being used by the rest of the middlewares, if required
+  const store = configureStore(initialState, history, api);
+
+  function errorHandler(error) {
+    const errorPage = (
+      <Provider store={store} onError={reactIntlErrorHandler}>
+        <StaticRouter context={{}} location={req.url}>
+          <ErrorPage message={error.message} />
+        </StaticRouter>
+      </Provider>
+    );
+
+    res.set({
+      'Cache-Control': 'public, max-age=60, no-transform',
+    });
+
+    /* Displays error in console
+     * TODO:
+     * - get ignored codes from Plone error_log
+     */
+    const ignoredErrors = [301, 302, 401, 404];
+    if (!ignoredErrors.includes(error.status)) console.error(error);
+
+    res
+      .status(error.status || 500) // If error happens in Volto code itself error status is undefined
+      .send(`<!doctype html> ${renderToString(errorPage)}`);
+  }
+
+  if (!process.env.RAZZLE_API_PATH && req.headers.host) {
+    res.locals.detectedHost = `${
+      req.headers['x-forwarded-proto'] || req.protocol
+    }://${req.headers.host}`;
+    config.settings.apiPath = res.locals.detectedHost;
+    config.settings.publicURL = res.locals.detectedHost;
+  }
+
+  res.locals = {
+    ...res.locals,
+    store,
+    api,
+    errorHandler,
+  };
+
+  next();
+}
+
+server.get('/*', (req, res) => {
+  const { errorHandler, nonce } = res.locals;
+
+  if (cspConfig) {
+    res.setHeader('Content-Security-Policy', buildCSPHeader(cspConfig, nonce));
+  }
+
+  const api = new Api(req);
+
+  const browserdetect = detect(req.headers['user-agent']);
+
+  const lang = toReactIntlLang(
+    new locale.Locales(
+      req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'],
+    )
+      .best(supported)
+      .toString(),
+  );
+
+  const authToken = req.universalCookies.get('auth_token');
+  const initialState = {
+    userSession: { ...userSession(), token: authToken },
+    form: req.body,
+    intl: {
+      defaultLocale: 'en',
+      locale: lang,
+      messages: locales[lang],
+    },
+    browserdetect,
+  };
+
+  const history = createMemoryHistory({
+    initialEntries: [req.url],
+  });
+
+  // Create a new Redux store instance
+  const store = configureStore(initialState, history, api);
+
+  persistAuthToken(store, req);
+
+  // @loadable/server extractor
+  const buildDir = process.env.BUILD_DIR || 'build';
+  const extractor = new ChunkExtractor({
+    statsFile: path.resolve(path.join(buildDir, 'loadable-stats.json')),
+    entrypoints: ['client'],
+  });
+
+  const url = req.originalUrl || req.url;
+  const location = parseUrl(url);
+
+  loadOnServer({ store, location, routes, api })
+    .then(() => {
+      const initialLang =
+        req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'];
+
+      // The content info is in the store at this point thanks to the asynconnect
+      // features, then we can force the current language info into the store when
+      // coming from an SSR request
+
+      // TODO: there is a bug here with content that, for any reason, doesn't
+      // present the language token field, for some reason. In this case, we
+      // should follow the cookie rather then switching the language
+      const contentLang = store.getState().content.get?.error
+        ? initialLang
+        : store.getState().content.data?.language?.token ||
+          config.settings.defaultLanguage;
+
+      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
+        const newLang = toReactIntlLang(
+          new locale.Locales(contentLang).best(supported).toString(),
+        );
+        store.dispatch(changeLanguage(newLang, locales[newLang], req));
+      }
+
+      const context = {};
+      resetServerContext();
+      const markup = renderToString(
+        <ChunkExtractorManager extractor={extractor}>
+          <CookiesProvider cookies={req.universalCookies}>
+            <Provider store={store} onError={reactIntlErrorHandler}>
+              <StaticRouter context={context} location={req.url}>
+                <ReduxAsyncConnect routes={routes} helpers={api} />
+              </StaticRouter>
+            </Provider>
+          </CookiesProvider>
+        </ChunkExtractorManager>,
+      );
+
+      const readCriticalCss =
+        config.settings.serverConfig.readCriticalCss || defaultReadCriticalCss;
+
+      // If we are showing an "old browser" warning,
+      // make sure it doesn't get cached in a shared cache
+      const browserdetect = store.getState().browserdetect;
+      if (config.settings.notSupportedBrowsers.includes(browserdetect?.name)) {
+        res.set({
+          'Cache-Control': 'private',
+        });
+      }
+
+      if (context.url) {
+        res.redirect(flattenToAppURL(context.url));
+      } else if (context.error_code) {
+        res.set({
+          'Cache-Control': 'no-cache',
+        });
+
+        res.status(context.error_code).send(
+          `<!doctype html>
+              ${renderToString(
+                <Html
+                  extractor={extractor}
+                  nonce={nonce}
+                  markup={markup}
+                  store={store}
+                  extractScripts={
+                    config.settings.serverConfig.extractScripts?.errorPages ||
+                    process.env.NODE_ENV !== 'production'
+                  }
+                  criticalCss={readCriticalCss(req)}
+                  apiPath={res.locals.detectedHost || config.settings.apiPath}
+                  publicURL={
+                    res.locals.detectedHost || config.settings.publicURL
+                  }
+                />,
+              )}
+            `,
+        );
+      } else {
+        res.status(200).send(
+          `<!doctype html>
+              ${renderToString(
+                <Html
+                  extractor={extractor}
+                  nonce={nonce}
+                  markup={markup}
+                  store={store}
+                  criticalCss={readCriticalCss(req)}
+                  apiPath={res.locals.detectedHost || config.settings.apiPath}
+                  publicURL={
+                    res.locals.detectedHost || config.settings.publicURL
+                  }
+                />,
+              )}
+            `,
+        );
+      }
+    }, errorHandler)
+    .catch(errorHandler);
+});
+
+export const defaultReadCriticalCss = () => {
+  const { criticalCssPath } = config.settings.serverConfig;
+
+  const e = existsSync(criticalCssPath);
+  if (!e) return;
+
+  const f = lstatSync(criticalCssPath);
+  if (!f.isFile()) return;
+
+  return readFileSync(criticalCssPath, { encoding: 'utf-8' });
+};
+
+// Exposed for the console bootstrap info messages
+server.apiPath = config.settings.apiPath;
+server.devProxyToApiPath = config.settings.devProxyToApiPath;
+server.proxyRewriteTarget = config.settings.proxyRewriteTarget;
+server.publicURL = config.settings.publicURL;
+
+export { buildCSPHeader };
+export default server;

package/src/index.js

@@ -4,7 +4,7 @@ import customBlocks, {
 } from '@eeacms/volto-clms-theme/components/Blocks/customBlocks';
 
 // ROUTE VIEWS
-import { ContactForm, Search, Sitemap, Login } from '@plone/volto/components';
+import { ContactForm, Search, Sitemap } from '@plone/volto/components';
 
 // VIEWS
 import CLMSDatasetDetailView from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView/CLMSDatasetDetailView';
@@ -52,7 +52,7 @@ import { CheckboxHtmlWidget } from './components/Blocks/CustomTemplates/VoltoFor
 import reducers from './reducers';
 import CookieBanner from 'volto-cookie-banner/CookieBannerContainer';
 import CLMSLoginView from './components/CLMSLoginView/CLMSLogin';
-
+import AuthomaticLoginPlone from './components/CLMSLoginView/AuthomaticLoginPlone';
 //SLATE CONFIGURATION
 import installLinkEditor from '@plone/volto-slate/editor/plugins/AdvancedLink';
 
@@ -68,6 +68,20 @@ import ImageView from '@plone/volto/components/theme/View/ImageView';
 import userSessionResetMiddleware from './store/userSessionResetMiddleware';
 
 const applyConfig = (config) => {
+  if (__SERVER__) {
+    const devsource = __DEVELOPMENT__
+      ? ` http://localhost:${parseInt(process.env.PORT || '3000') + 1}`
+      : '';
+
+    config.settings.serverConfig = {
+      ...config.settings.serverConfig,
+      csp: {
+        'object-src': "'none'",
+        'script-src': `'self' {nonce}${devsource}`,
+      },
+    };
+  }
+
   config.views = {
     ...config.views,
     contentTypesViews: {
@@ -260,11 +274,11 @@ const applyConfig = (config) => {
     ...config.addonRoutes,
     {
       path: '/login-plone',
-      component: Login,
+      component: AuthomaticLoginPlone,
     },
     {
       path: '/**/login-plone',
-      component: Login,
+      component: AuthomaticLoginPlone,
     },
     {
       path: '/login',