#108 authentication and error refactor

Author: joepio

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 This changelog covers all three packages, as they are (for now) updated as a whole
 
+## v0.29.0
+
+- Add authentication: sign requests, so the server knows who sent it. This allows for better authorization. #108
+- Refactor Error type, improve Error page / views
+- Automatically retry unauthorized resources (but I want a prettier solution, see #110)
+
 ## v0.28.2
 
 - Added server-side full text search #106

data-browser/src/App.tsx

@@ -13,7 +13,7 @@ import { isDev } from './config';
 import { handleError, initBugsnag } from './helpers/handlers';
 import HotKeysWrapper from './components/HotKeyWrapper';
 import { AppSettingsContextProvider } from './helpers/AppSettings';
-import ErrorPage from './views/ErrorPage';
+import CrashPage from './views/CrashPage';
 import toast from 'react-hot-toast';
 
 /** Initialize the store */
@@ -51,7 +51,7 @@ function App(): JSX.Element {
           <QueryParamProvider ReactRouterRoute={Route}>
             <HotKeysWrapper>
               <ThemeWrapper>
-                <ErrorBoundary FallbackComponent={ErrorPage}>
+                <ErrorBoundary FallbackComponent={CrashPage}>
                   <GlobalStyle />
                   <Toaster />
                   <MetaSetter />

data-browser/src/components/SideBar.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import * as React from 'react';
-import { useArray, useResource, useTitle } from '@tomic/react';
+import { useArray, useCurrentAgent, useResource, useTitle } from '@tomic/react';
 import { properties } from '@tomic/lib';
 import { useHover } from '../helpers/useHover';
 import { useSettings } from '../helpers/AppSettings';
@@ -22,6 +22,7 @@ import {
 import { paths } from '../routes/paths';
 import { ErrorLook } from '../views/ResourceInline';
 import { openURL } from '../helpers/navigation';
+import { isUnauthorized } from '@tomic/lib/src/error';
 
 /** Amount of pixels where the sidebar automatically shows */
 export const SIDEBAR_TOGGLE_WIDTH = 600;
@@ -177,6 +178,7 @@ const SideBarDrive = React.memo(function SBD({
   handleClickItem,
 }: SideBarDriveProps): JSX.Element {
   const { baseURL } = useSettings();
+  const [agent] = useCurrentAgent();
   const [drive] = useResource(baseURL);
   const [children] = useArray(drive, properties.children);
   const title = useTitle(drive);
@@ -218,7 +220,13 @@ const SideBarDrive = React.memo(function SBD({
         })
       ) : drive.loading ? null : (
         <SideBarErr>
-          {drive.getError()?.message || 'Could not load this baseURL'}
+          {drive.error
+            ? isUnauthorized(drive.error)
+              ? agent
+                ? 'unauthorized'
+                : 'Sign in to get access'
+              : drive.error.message
+            : 'this should not happen'}
         </SideBarErr>
       )}
     </>

data-browser/src/views/CrashPage.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Resource } from '@tomic/lib';
+
+import { ContainerNarrow } from '../components/Containers';
+import { ErrorLook } from './ResourceInline';
+import { Button } from '../components/Button';
+
+type ErrorPageProps = {
+  resource?: Resource;
+  children?: React.ReactNode;
+  error: Error;
+  info: React.ErrorInfo;
+  clearError: () => void;
+};
+
+/** If the entire app crashes, show this page */
+function CrashPage({
+  resource,
+  children,
+  error,
+  clearError,
+}: ErrorPageProps): JSX.Element {
+  return (
+    <ContainerNarrow resource={resource?.getSubject()}>
+      <ErrorLook>
+        {children ? children : JSON.stringify(error?.message)}
+      </ErrorLook>
+      <div>
+        <Button onClick={clearError}>Clear error</Button>
+        <Button
+          onClick={() =>
+            window.setTimeout(window.location.reload.bind(window.location), 200)
+          }
+        >
+          Reload page
+        </Button>
+      </div>
+    </ContainerNarrow>
+  );
+}
+
+export default CrashPage;

data-browser/src/views/DocumentPage.tsx

@@ -15,13 +15,12 @@ import { ErrorLook } from './ResourceInline';
 import { ElementEdit, ElementEditPropsBase, ElementShow } from './Element';
 import { Button } from '../components/Button';
 
-type DrivePageProps = {
+type DocumentPageProps = {
   resource: Resource;
-  setEditMode: (arg: boolean) => void;
 };
 
 /** A full page, editable document, consisting of Elements */
-function DocumentPage({ resource }: DrivePageProps): JSX.Element {
+function DocumentPage({ resource }: DocumentPageProps): JSX.Element {
   const [canWrite, canWriteMessage] = useCanWrite(resource);
   const [editMode, setEditMode] = useState(canWrite);
 
@@ -40,10 +39,15 @@ function DocumentPage({ resource }: DrivePageProps): JSX.Element {
   );
 }
 
+type DocumentSubPageProps = {
+  resource: Resource;
+  setEditMode: (arg: boolean) => void;
+};
+
 function DocumentPageEdit({
   resource,
   setEditMode,
-}: DrivePageProps): JSX.Element {
+}: DocumentSubPageProps): JSX.Element {
   const [elements, setElements] = useArray(
     resource,
     properties.document.elements,
@@ -279,7 +283,7 @@ function DocumentPageEdit({
 function DocumentPageShow({
   resource,
   setEditMode,
-}: DrivePageProps): JSX.Element {
+}: DocumentSubPageProps): JSX.Element {
   const [elements] = useArray(resource, properties.document.elements);
   const [title] = useString(resource, properties.name);
   return (

data-browser/src/views/ErrorPage.tsx

@@ -1,39 +1,46 @@
 import * as React from 'react';
+import { useCurrentAgent, useStore } from '@tomic/react';
 import { Resource } from '@tomic/lib';
-
 import { ContainerNarrow } from '../components/Containers';
 import { ErrorLook } from './ResourceInline';
 import { Button } from '../components/Button';
+import { isUnauthorized } from '@tomic/lib/src/error';
 
 type ErrorPageProps = {
-  resource?: Resource;
-  children?: React.ReactNode;
-  error: Error;
-  info: React.ErrorInfo;
-  clearError: () => void;
+  resource: Resource;
 };
 
-function ErrorPage({
-  resource,
-  children,
-  error,
-  clearError,
-}: ErrorPageProps): JSX.Element {
+/**
+ * A View for Resource Errors. Not to be confused with the CrashPage, which is
+ * for App wide errors.
+ */
+function ErrorPage({ resource }: ErrorPageProps): JSX.Element {
+  const [agent] = useCurrentAgent();
+  const store = useStore();
+  const subject = resource.getSubject();
+
+  if (isUnauthorized(resource.error)) {
+    return (
+      <ContainerNarrow>
+        <h1>Unauthorized</h1>
+        {agent ? null : <p>Try signing in</p>}
+        <p>{resource.error.message}</p>
+        <Button onClick={() => store.fetchResource(subject)}>Retry</Button>
+      </ContainerNarrow>
+    );
+  }
   return (
-    <ContainerNarrow resource={resource?.getSubject()}>
-      <ErrorLook>
-        {children ? children : JSON.stringify(error?.message)}
-      </ErrorLook>
-      <div>
-        <Button onClick={clearError}>Clear error</Button>
-        <Button
-          onClick={() =>
-            window.setTimeout(window.location.reload.bind(window.location), 200)
-          }
-        >
-          Reload page
-        </Button>
-      </div>
+    <ContainerNarrow>
+      <h1>⚠️ Error opening {resource.getSubject()}</h1>
+      <ErrorLook>{resource.getError().message}</ErrorLook>
+      <br />
+      <Button onClick={() => store.fetchResource(subject)}>Retry</Button>
+      <Button
+        onClick={() => store.fetchResource(subject, { fromProxy: true })}
+        title={`Fetches the URL from your current Atomic-Server (${store.getBaseUrl()}), instead of from the actual URL itself. Can be useful if the URL is down, but the resource is cached in your server.`}
+      >
+        Use proxy
+      </Button>
     </ContainerNarrow>
   );
 }

data-browser/src/views/ResourcePage.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
-import { useString, useResource, useTitle, useStore } from '@tomic/react';
+import { useString, useResource, useTitle } from '@tomic/react';
 import { properties, urls } from '@tomic/lib';
 import AllProps from '../components/AllProps';
 import { ContainerNarrow } from '../components/Containers';
 import Collection from '../views/CollectionPage';
 import ClassDetail from '../components/ClassDetail';
 import NewInstanceButton from '../components/NewInstanceButton';
-import { Button } from '../components/Button';
-import { ErrorLook } from './ResourceInline';
 import EndpointPage from './EndpointPage';
 import { ValueForm } from '../components/forms/ValueForm';
 import Parent from '../components/Parent';
 import DrivePage from './DrivePage';
 import RedirectPage from './RedirectPage';
 import InvitePage from './InvitePage';
 import DocumentPage from './DocumentPage';
+import ErrorPage from './ErrorPage';
 
 type Props = {
   subject: string;
@@ -40,26 +39,12 @@ function ResourcePage({ subject }: Props): JSX.Element {
   const [resource] = useResource(subject);
   const title = useTitle(resource);
   const [klass] = useString(resource, properties.isA);
-  const store = useStore();
 
   if (resource.loading) {
     return <ContainerNarrow>Loading...</ContainerNarrow>;
   }
   if (resource.error) {
-    return (
-      <ContainerNarrow>
-        <h1>⚠️ {title}</h1>
-        <ErrorLook>{resource.getError().message}</ErrorLook>
-        <br />
-        <Button onClick={() => store.fetchResource(subject)}>Retry</Button>
-        <Button
-          onClick={() => store.fetchResource(subject, { fromProxy: true })}
-          title={`Fetches the URL from your current Atomic-Server (${store.getBaseUrl()}), instead of from the actual URL itself. Can be useful if the URL is down, but the resource is cached in your server.`}
-        >
-          Use proxy
-        </Button>
-      </ContainerNarrow>
-    );
+    return <ErrorPage resource={resource} />;
   }
 
   // TODO: Make these registerable, so users can easily extend these

lib/src/client.ts

@@ -3,6 +3,7 @@ import { Commit, serializeDeterministically, signToBase64 } from './commit';
 import { parseJsonADResource } from './parse';
 import { Resource } from './resource';
 import { Agent } from '@tomic/lib';
+import { AtomicError, ErrorType } from './error';
 
 /**
  * Fetches and Parses a Resource. Can fetch through another atomic server if you
@@ -38,7 +39,7 @@ export async function fetchResource(
       url = newURL.href;
     }
     if (window.fetch == undefined) {
-      throw new Error(
+      throw new AtomicError(
         `No window object available this lib currently requires the DOM for fetching`,
       );
     }
@@ -51,12 +52,17 @@ export async function fetchResource(
         const json = JSON.parse(body);
         resource = parseJsonADResource(json, resource, store);
       } catch (e) {
-        throw new Error(
+        throw new AtomicError(
           `Could not parse JSON from fetching ${subject}. Is it an Atomic Data resource? Error message: ${e.message}`,
         );
       }
+    } 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,
+      );
     } else {
-      const error = new Error(`${response.status} error: ${body}`);
+      const error = new AtomicError(`${response.status} error: ${body}`);
       resource.setError(error);
     }
   } catch (e) {

lib/src/error.ts

@@ -0,0 +1,31 @@
+export enum ErrorType {
+  Unauthorized = 'Unauthorized',
+  NotFound = 'NotFound',
+  Server = 'Server',
+  Client = 'Client',
+}
+
+/** Pass any error. If the error is an AtomicError and it's Unauthorized, return true */
+export function isUnauthorized(error: Error): boolean {
+  if (error instanceof AtomicError) {
+    if ((error.type = ErrorType.Unauthorized)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Atomic Data Errors have an additional Type, which tells the client what kind
+ * of error to render.
+ */
+export class AtomicError extends Error {
+  type: ErrorType;
+
+  constructor(message, type = ErrorType.Client) {
+    super(message);
+    // https://stackoverflow.com/questions/31626231/custom-error-class-in-typescript
+    Object.setPrototypeOf(this, AtomicError.prototype);
+    this.type = type;
+  }
+}

lib/src/urls.ts

@@ -95,8 +95,13 @@ export const datatypes = {
   timestamp: 'https://atomicdata.dev/datatypes/timestamp',
 };
 
+export const instances = {
+  publicAgent: 'https://atomicdata.dev/agents/publicAgent',
+};
+
 export const urls = {
   properties,
   classes,
   datatypes,
+  instances,
 };