feat: cookie authentication

Author: Thom

CHANGELOG.md

@@ -6,6 +6,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 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

@@ -274,9 +274,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 }) => {