Merge pull request #220 from kontent-ai/fix_cookies

Fix cookies to be able to use them in web spotlight

src/App.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import './App.css';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { projectConfigurationPath, selectedProjectCookieName } from './const';
 import SpinnerLayout from './Components/SpinnerLayout';
 import Metadata from './Components/Metadata';
 import qs from 'qs';
@@ -17,20 +16,30 @@ import Cafes from './Pages/Cafes';
 import Contact from './Pages/Contacts';
 import Coffee from './Pages/Coffee';
 import Brewer from './Pages/Brewer';
-import Cookies from 'universal-cookie';
 import { SetLanguageType } from './LocalizedApp';
 import { NotFound } from './Pages/NotFound';
+import { getProjectIdFromCookies, getProjectIdFromEnvironment } from './Client';
+import { projectConfigurationPath } from './const';
 
 interface AppProps {
   changeLanguage: SetLanguageType;
 }
 
 const App: React.FC<AppProps> = ({ changeLanguage }) => {
-  const cookies = new Cookies(document.cookie);
-  const cookie = cookies.get(selectedProjectCookieName);
   const { formatMessage } = useIntl();
 
-  if (!cookie) {
+  if (getProjectIdFromEnvironment() === null) {
+    return (
+      <div>
+        Your projectId given in your environment variables is not a valid GUID.
+      </div>
+    );
+  }
+
+  if (
+    getProjectIdFromEnvironment() === undefined &&
+    !getProjectIdFromCookies()
+  ) {
     return <Navigate to={projectConfigurationPath} />;
   }
 

src/Client.ts

@@ -5,22 +5,42 @@ import {
 } from '@kontent-ai/delivery-sdk';
 import packageInfo from '../package.json';
 import { selectedProjectCookieName } from './const';
-import { defaultProjectId } from './Utilities/SelectedProject';
+import validator from 'validator';
 
 const sourceTrackingHeaderName = 'X-KC-SOURCE';
 
-// environment variables
-const projectId = process.env.REACT_APP_PROJECT_ID || '';
 const previewApiKey = process.env.REACT_APP_PREVIEW_API_KEY || '';
 
 const cookies = new Cookies(document.cookie);
 
-let currentProjectId = projectId || cookies.get(selectedProjectCookieName);
-if (currentProjectId) {
-  cookies.set(selectedProjectCookieName, currentProjectId, { path: '/' });
-} else {
-  currentProjectId = defaultProjectId;
-}
+const getProjectIdFromEnvironment = (): string | null | undefined => {
+  const projectIdFromEnv = process.env.REACT_APP_PROJECT_ID;
+
+  if (projectIdFromEnv && !validator.isUUID(projectIdFromEnv)) {
+    console.error(
+      `Your projectId (${projectIdFromEnv}) given in your environment variables is not a valid GUID.`
+    );
+    return null;
+  }
+
+  return projectIdFromEnv;
+};
+
+const getProjectIdFromCookies = (): string | null => {
+  const projectIdFromCookie = cookies.get(selectedProjectCookieName);
+
+  if (projectIdFromCookie && !validator.isUUID(projectIdFromCookie)) {
+    console.error(
+      `Your projectId (${projectIdFromCookie}) from cookies is not a valid GUID.`
+    );
+    return null;
+  }
+
+  return projectIdFromCookie;
+};
+
+const currentProjectId =
+  getProjectIdFromEnvironment() ?? getProjectIdFromCookies() ?? '';
 
 const isPreview = (): boolean => previewApiKey !== '';
 
@@ -59,8 +79,17 @@ const resetClient = (newProjectId: string): void => {
     ],
     propertyNameResolver: camelCasePropertyNameResolver,
   });
-  const cookies = new Cookies(document.cookie);
-  cookies.set(selectedProjectCookieName, newProjectId, { path: '/' });
+
+  cookies.set(selectedProjectCookieName, newProjectId, {
+    path: '/',
+    sameSite: 'none',
+    secure: true,
+  });
 };
 
-export { Client, resetClient };
+export {
+  Client,
+  resetClient,
+  getProjectIdFromEnvironment,
+  getProjectIdFromCookies,
+};