feat: cookie authentication

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

@@ -59,7 +59,10 @@ const ErrBoundary = window.bugsnagApiKey
 
 /** Initialize the agent from localstorage */
 const agent = initAgentFromLocalStorage();
-agent && store.setAgent(agent);
+
+if (agent) {
+  store.setAgent(agent);
+}
 
 /** Fetch all the Properties and Classes - this helps speed up the app. */
 store.fetchResource(urls.properties.getAll);

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({ maxDiffPixelRatio: 0.1 });
   });
 
   test('chatroom', async ({ page, browser }) => {

data-browser/tests/test-config.ts

@@ -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',

lib/src/authentication.ts

@@ -1,4 +1,4 @@
-import { Agent, getTimestampNow, HeadersObject, signToBase64 } from '.';
+import { Agent, getTimestampNow, HeadersObject, signToBase64, Store } from '.';
 
 /** Returns a JSON-AD resource of an Authentication */
 export async function createAuthentication(subject: string, agent: Agent) {
@@ -68,3 +68,40 @@ export async function signRequest(
 
   return headers as HeadersObject;
 }
+
+const ONE_DAY = 24 * 60 * 60 * 1000;
+
+const setCookieExpires = (
+  name: string,
+  value: string,
+  store: Store,
+  expires_in_ms = ONE_DAY,
+) => {
+  const expiry = new Date(Date.now() + expires_in_ms).toUTCString();
+  const encodedValue = encodeURIComponent(value);
+
+  const domain = new URL(store.getServerUrl()).hostname;
+
+  const cookieString = `${name}=${encodedValue};Expires=${expiry};Domain=${domain};SameSite=Lax;path=/`;
+  document.cookie = cookieString;
+};
+
+/** Sets a cookie for the current Agent, signing the Authentication. It expires after some default time. */
+export const setCookieAuthentication = (store: Store, agent: Agent) => {
+  createAuthentication(store.getServerUrl(), agent).then(auth => {
+    setCookieExpires('atomic_session', btoa(JSON.stringify(auth)), store);
+  });
+};
+
+/** Returns false if the auth cookie is not set / expired */
+export const checkAuthenticationCookie = (): boolean => {
+  const matches = document.cookie.match(
+    /^(.*;)?\s*atomic_session\s*=\s*[^;]+(.*)?$/,
+  );
+
+  if (!matches) {
+    return false;
+  }
+
+  return matches.length > 0;
+};

lib/src/client.ts

@@ -3,19 +3,21 @@
 
 import {
   AtomicError,
+  checkAuthenticationCookie,
   Commit,
   ErrorType,
   parseCommit,
   parseJsonADArray,
   parseJsonADResource,
   Resource,
   serializeDeterministically,
+  setCookieAuthentication,
+  signRequest,
   Store,
 } from './index';
 
 /** Works both in node and the browser */
 import fetch from 'cross-fetch';
-import { signRequest } from './authentication';
 
 /**
  * One key-value pair per HTTP Header. Since we need to support both browsers
@@ -55,8 +57,16 @@ export async function fetchResource(
     // Sign the request if there is an agent present
     const agent = store?.getAgent();
 
-    if (agent) {
-      await signRequest(subject, agent, requestHeaders);
+    if (agent && store) {
+      // Cookies only work for same-origin requests right now
+      // https://github.com/atomicdata-dev/atomic-data-browser/issues/253
+      if (subject.startsWith(window.location.origin)) {
+        if (!checkAuthenticationCookie()) {
+          setCookieAuthentication(store, agent);
+        }
+      } else {
+        await signRequest(subject, agent, requestHeaders);
+      }
     }
 
     let url = subject;
@@ -88,10 +98,7 @@ export async function fetchResource(
         );
       }
     } else if (response.status === 401) {
-      throw new AtomicError(
-        `You don't have the rights to do view ${subject}. Are you signed in with the right Agent? More detailed error from server: ${body}`,
-        ErrorType.Unauthorized,
-      );
+      throw new AtomicError(body, ErrorType.Unauthorized);
     } else if (response.status === 500) {
       throw new AtomicError(body, ErrorType.Server);
     } else if (response.status === 404) {
@@ -194,12 +201,9 @@ export async function uploadFiles(
     throw new AtomicError(`No agent present. Can't sign the upload request.`);
   }
 
-  const signedHeaders = await signRequest(uploadURL.toString(), agent, {});
-
   const options = {
     method: 'POST',
     body: formData,
-    headers: signedHeaders,
   };
 
   const resp = await fetch(uploadURL.toString(), options);

lib/src/error.ts

@@ -28,6 +28,7 @@ export function isUnauthorized(error?: Error): boolean {
 export class AtomicError extends Error {
   public type: ErrorType;
 
+  /** Creates an AtomicError. The message can be either a plain string, or a JSON-AD Error Resource */
   public constructor(message: string, type = ErrorType.Client) {
     super(message);
     // https://stackoverflow.com/questions/31626231/custom-error-class-in-typescript

lib/src/store.ts

@@ -1,3 +1,4 @@
+import { setCookieAuthentication } from './authentication';
 import { EventManager } from './EventManager';
 import {
   Agent,
@@ -166,6 +167,9 @@ export class Store {
     // Use WebSocket if available, else use HTTP(S)
     const ws = this.getWebSocketForSubject(subject);
 
+    // TEMP!!
+    opts.noWebSocket = true;
+
     if (!opts.noWebSocket && ws?.readyState === WebSocket.OPEN) {
       fetchWebSocket(ws, subject);
     } else {
@@ -403,6 +407,7 @@ export class Store {
     this.agent = agent;
 
     if (agent) {
+      setCookieAuthentication(this, agent);
       this.webSockets.forEach(ws => {
         authenticate(ws, this);
       });

package.json

@@ -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",