#241 refactor cookie authentication, fix expiration

Author: joepio

data-browser/src/App.tsx

@@ -8,7 +8,6 @@ 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';
@@ -63,7 +62,6 @@ const agent = initAgentFromLocalStorage();
 
 if (agent) {
   store.setAgent(agent);
-  setCookieAuthentication(store, agent);
 }
 
 /** Fetch all the Properties and Classes - this helps speed up the app. */

data-browser/src/helpers/cookieAuthentication.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Agent, useStore } from '@tomic/react';
+import { Agent } from '@tomic/react';
 import { FaCog, FaEye, FaEyeSlash, FaUser } from 'react-icons/fa';
 
 import { useSettings } from '../helpers/AppSettings';
@@ -12,7 +12,6 @@ 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';
@@ -29,7 +28,6 @@ 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
@@ -83,7 +81,6 @@ 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/src/routes/SettingsAgent.tsx

@@ -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/authentication.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/client.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/error.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);
       });