Merge pull request #245 from n8io/feature/remove-internet-connectivity

🐛 Fix `SameSite` cookie issues

.gitignore

@@ -23,5 +23,5 @@ release.json
 **/.eslintcache
 
 # env
-.env
+.env*
 !.env.example

package.json

@@ -37,7 +37,7 @@
     "dclf": "yarn run -s dc logs -f",
     "dcu": "yarn run -s dc up --force-recreate",
     "dcud": "yarn run -s dcu -d",
-    "dev": "yarn run -s dcud ui service && yarn run -s run-all logs:*",
+    "dev": "yarn run -s dcud service && yarn run -s run-all logs:*",
     "down": "yarn run -s clean",
     "down:ui": "yarn run -s dcd ui",
     "e2e:run": "cypress run --config-file ./cypress/cypress.json",

packages/service/src/app/middleware/cors.js

@@ -1,21 +1,25 @@
+import { Utils } from '@boilerplate-monorepo/common';
 import { config } from 'config';
 import cors from 'cors';
-import { defaultTo, isNil, pipe, reject, split } from 'ramda';
+import { defaultTo, pipe, reject, split } from 'ramda';
 
 const { UI_HOST_URI } = config;
+const toUnique = (array) => [...new Set(array)].filter(Boolean);
 
-const toUnique = (array) => [...new Set(array)].filter((x) => x);
+const toAllowHosts = pipe(
+  defaultTo(''),
+  split(','),
+  reject(Utils.isNullOrEmpty)
+);
 
-const toAllowHosts = pipe(defaultTo(''), split(','), reject(isNil));
+const origin = toUnique([
+  ...toAllowHosts(UI_HOST_URI),
+  'https://local.host:3000',
+]);
 
 const corsOptions = {
   credentials: true, // <-- REQUIRED backend setting
-  origin: toUnique([
-    ...toAllowHosts(UI_HOST_URI),
-    'http://localhost:3000',
-    'http://127.0.0.1:3000',
-    'https://local.host:3000',
-  ]),
+  origin,
 };
 
 const middleware = cors(corsOptions);

packages/service/src/types/auth/selectors.js

@@ -22,7 +22,6 @@ const isPast = (date) => isAfter(new Date(), unless(isDate, parseISO)(date));
 const {
   ACCESS_TOKEN_EXPIRY,
   ACCESS_TOKEN_SECRET,
-  NODE_ENV,
   REFRESH_TOKEN_EXPIRY,
   REFRESH_TOKEN_SECRET,
 } = config;
@@ -121,12 +120,17 @@ const writeRefreshToken = (res, user) => {
     httpOnly: true,
     maxAge,
     path: Route.REFRESH_TOKEN,
-    secure: NODE_ENV === 'production',
+    sameSite: 'none',
+    secure: true,
   };
 
   if (!user) {
-    debugLog('🔥 Removing refresh token cookie value');
-    res.cookie(Enumeration.JWT_REFRESH_TOKEN_COOKIE_NAME, '', options);
+    debugLog('🔥 Removing refresh token cookie value...');
+
+    res.cookie(Enumeration.JWT_REFRESH_TOKEN_COOKIE_NAME, '', {
+      ...options,
+      maxAge: 0, // Expire immediately
+    });
 
     return res;
   }

packages/service/src/types/auth/selectors.spec.js

@@ -17,7 +17,6 @@ import { Enumeration } from './typedef';
 const {
   ACCESS_TOKEN_EXPIRY,
   ACCESS_TOKEN_SECRET,
-  NODE_ENV,
   REFRESH_TOKEN_EXPIRY,
   REFRESH_TOKEN_SECRET,
 } = config;
@@ -255,7 +254,8 @@ describe('auth selectors', () => {
             httpOnly: true,
             maxAge: ms(REFRESH_TOKEN_EXPIRY),
             path: Route.REFRESH_TOKEN,
-            secure: NODE_ENV === 'production',
+            sameSite: 'none',
+            secure: true,
           },
         ];
 
@@ -272,9 +272,10 @@ describe('auth selectors', () => {
           '',
           {
             httpOnly: true,
-            maxAge: ms(REFRESH_TOKEN_EXPIRY),
+            maxAge: 0,
             path: Route.REFRESH_TOKEN,
-            secure: NODE_ENV === 'production',
+            sameSite: 'none',
+            secure: true,
           },
         ];
 

packages/ui/src/modules/app/components/App/Layout/Main/index.js

@@ -1,12 +1,9 @@
 import { FeatureFlag } from '@boilerplate-monorepo/common';
 import { A11y } from '@boilerplate-monorepo/ui-common';
-import React, { useState, useEffect } from 'react';
-import { ErrorNotification } from 'shared/ErrorNotification';
+import React from 'react';
 import { Feature } from 'shared/Feature';
 import { InfoNotification } from 'shared/InfoNotification';
 import { NotificationManager } from 'shared/NotificationContainer';
-import { useIsInternetConnected } from 'shared/useIsInternetConnected';
-import { useTranslate } from 'shared/useTranslate';
 import styled from 'styled-components/macro';
 import { GridTemplateArea } from 'types/gridTemplateArea';
 import { Router } from '../../Router';
@@ -20,33 +17,14 @@ const Container = styled.main`
   height: 100%;
 `;
 
-const Main = () => {
-  const isInternetConnected = useIsInternetConnected();
-  const [lastIsConnected, setLastIsConnected] = useState(isInternetConnected);
-
-  const t = useTranslate();
-
-  const error = isInternetConnected ? null : new Error();
-
-  useEffect(() => {
-    if (lastIsConnected === isInternetConnected) return;
-
-    setLastIsConnected(isInternetConnected);
-  }, [isInternetConnected]);
-
-  return (
-    <Container role={Role.MAIN}>
-      <NotificationManager />
-      <Feature flag={FeatureFlag.WEB_BETA_USER}>
-        <InfoNotification message={"You're a beta user 🎉"} />
-      </Feature>
-      <ErrorNotification error={error} messageKey="offlineDetected" />
-      {lastIsConnected === false && isInternetConnected && (
-        <InfoNotification message={t('onlineDetected')} />
-      )}
-      <Router />
-    </Container>
-  );
-};
+const Main = () => (
+  <Container role={Role.MAIN}>
+    <NotificationManager />
+    <Feature flag={FeatureFlag.WEB_BETA_USER}>
+      <InfoNotification message={"You're a beta user 🎉"} />
+    </Feature>
+    <Router />
+  </Container>
+);
 
 export { Main };

packages/ui/src/modules/app/components/App/Providers/index.js

@@ -9,7 +9,6 @@ import { Features } from './Features';
 import { FontLoader } from './FontLoader';
 import { GlobalStyle } from './GlobalStyles';
 import { GraphQL } from './GraphQL';
-import { InternetConnectivity } from './InternetConnectivity';
 import { Logging } from './Logging';
 import { Modality } from './Modality';
 import { Theme } from './Theme';
@@ -21,19 +20,17 @@ const Providers = ({ children }) => (
   <Suspense>
     <Logging />
     <Theme>
-      <InternetConnectivity>
-        <GraphQL>
-          <FontLoader />
-          <GlobalStyle />
-          <Modality />
-          <TranslationSync />
-          <Router basename={basename} history={history}>
-            <Features>
-              <Auth>{children}</Auth>
-            </Features>
-          </Router>
-        </GraphQL>
-      </InternetConnectivity>
+      <GraphQL>
+        <FontLoader />
+        <GlobalStyle />
+        <Modality />
+        <TranslationSync />
+        <Router basename={basename} history={history}>
+          <Features>
+            <Auth>{children}</Auth>
+          </Features>
+        </Router>
+      </GraphQL>
     </Theme>
   </Suspense>
 );