#241 feat: cookie authentication

Author: Thom

CHANGELOG.md

@@ -7,6 +7,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - Add folders with list & grid views, allow drag & drop uploads #228
 - Show icons in sidebar
 - Add scoped search, funded by NGI NLnet Discovery #245
+- Add cookie based authentication #241
 
 ## v0.32.1
 

data-browser/src/App.tsx

@@ -8,6 +8,7 @@ import {
   urls,
 } from '@tomic/react';
 
+import { setCookieAuthentication } from './helpers/cookieAuthentication';
 import { GlobalStyle, ThemeWrapper } from './styling';
 import { AppRoutes } from './routes/Routes';
 import { NavWrapper } from './components/Navigation';
@@ -59,7 +60,11 @@ const ErrBoundary = window.bugsnagApiKey
 
 /** Initialize the agent from localstorage */
 const agent = initAgentFromLocalStorage();
-agent && store.setAgent(agent);
+
+if (agent) {
+  store.setAgent(agent);
+  setCookieAuthentication(store, agent);
+}
 
 /** Fetch all the Properties and Classes - this helps speed up the app. */
 store.fetchResource(urls.properties.getAll);

data-browser/src/helpers/cookieAuthentication.ts

@@ -0,0 +1,16 @@
+import { createAuthentication, Agent, Store } from '@tomic/react';
+
+const ONE_HOUR = 60 * 60 * 1000;
+
+export const setCookie = (name: string, value: string) => {
+  const expiry = new Date(Date.now() + ONE_HOUR).toISOString();
+  const encodedValue = encodeURIComponent(value);
+
+  document.cookie = `${name}=${encodedValue};expires=${expiry}; path=/`;
+};
+
+export const setCookieAuthentication = (store: Store, agent: Agent) => {
+  createAuthentication(store.getServerUrl(), agent).then(auth => {
+    setCookie('atomic_session', btoa(JSON.stringify(auth)));
+  });
+};

data-browser/src/routes/SettingsAgent.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Agent } from '@tomic/react';
+import { Agent, useStore } from '@tomic/react';
 import { FaCog, FaEye, FaEyeSlash, FaUser } from 'react-icons/fa';
 
 import { useSettings } from '../helpers/AppSettings';
@@ -12,6 +12,7 @@ import {
 import { ButtonInput, Button } from '../components/Button';
 import { Margin } from '../components/Card';
 import Field from '../components/forms/Field';
+import { setCookieAuthentication } from '../helpers/cookieAuthentication';
 import { ResourceInline } from '../views/ResourceInline';
 import { ContainerNarrow } from '../components/Containers';
 import { AtomicLink } from '../components/AtomicLink';
@@ -28,6 +29,7 @@ const SettingsAgent: React.FunctionComponent = () => {
   const [advanced, setAdvanced] = useState(false);
   const [secret, setSecret] = useState<string | undefined>(undefined);
   const navigate = useNavigate();
+  const store = useStore();
 
   // When there is an agent, set the advanced values
   // Otherwise, reset the secret value
@@ -81,6 +83,7 @@ const SettingsAgent: React.FunctionComponent = () => {
   function setAgentIfChanged(oldAgent: Agent | undefined, newAgent: Agent) {
     if (JSON.stringify(oldAgent) !== JSON.stringify(newAgent)) {
       setAgent(newAgent);
+      setCookieAuthentication(store, newAgent);
     }
   }
 

data-browser/tests/e2e.spec.ts

@@ -330,9 +330,9 @@ test.describe('data-browser', async () => {
     ]);
     await fileChooser.setFiles(demoFile);
     await page.click(`[data-test]:has-text("${demoFileName}")`);
-    await expect(
-      await page.locator('[data-test="image-viewer"]'),
-    ).toBeVisible();
+    const image = await page.locator('[data-test="image-viewer"]');
+    await expect(image).toBeVisible();
+    await expect(image).toHaveScreenshot();
   });
 
   test('chatroom', async ({ page, browser }) => {

data-browser/tests/e2e.spec.ts-snapshots/data-browser-upload-download-1-darwin.png

@@ -1,9 +1,9 @@
 import { TestConfig } from './e2e.spec';
-const demoFileName = 'logo.svg';
+const demoFileName = 'testimage.svg';
 
 export const testConfig: TestConfig = {
   demoFileName,
-  demoFile: `./${demoFileName}`,
+  demoFile: `./tests/${demoFileName}`,
   demoInviteName: 'document demo',
   serverUrl: process.env.SERVER_URL || 'http://localhost:9883',
   frontEndUrl: 'http://localhost:5173',

data-browser/tests/e2e.spec.ts-snapshots/data-browser-upload-download-1-linux.png

@@ -37,7 +37,7 @@
     "lint": "pnpm run -r lint",
     "lint-fix": "pnpm run -r lint-fix",
     "build": "pnpm run -r build",
-    "build-server": "pnpm run build && cp -r data-browser/dist/assets/ ../atomic-data-rust/server/app_assets/dist/ && cp data-browser/tests/e2e.spec.ts ../atomic-data-rust/server/e2e_tests/e2e-generated.spec.ts",
+    "build-server": "pnpm run build && cp -r data-browser/dist/assets/ ../atomic-data-rust/server/app_assets/dist/ && cp data-browser/tests/e2e.spec.ts ../atomic-data-rust/server/e2e_tests/e2e-generated.spec.ts && cp data-browser/tests/testimage.svg ../atomic-data-rust/server/e2e_tests/testimage.svg && cp -r data-browser/tests/e2e.spec.ts-snapshots/ ../atomic-data-rust/server/e2e_tests/e2e-generated.spec.ts-snapshots/",
     "test": "pnpm run -r test",
     "test-query": "pnpm run --filter @tomic/data-browser test-query",
     "start": "pnpm run -r --parallel start",