Auth 2 - initial flow

package.json

@@ -54,16 +54,20 @@
     "test": "vitest"
   },
   "license": "MIT",
+  "resolutions": {
+    "react-reconciler": "^0.28"
+  },
   "dependencies": {
-    "@atlas-viewer/atlas": ">=2.0.6",
+    "@atlas-viewer/atlas": ">=2.1.0",
     "@atlas-viewer/iiif-image-api": ">=2.1.1",
     "@iiif/helpers": ">=1.0.6",
     "@iiif/parser": ">=2.0.2",
     "@iiif/presentation-2": ">=1.*",
-    "@iiif/presentation-3": ">=2.1.3",
+    "@iiif/presentation-3": ">=2.2.0",
     "@iiif/presentation-3-normalized": ">=0.9.7",
     "react": "^16.10.2 || ^17.0.2 || ^18.2.0",
     "react-dom": "^16.10.2 || ^17.0.2 || ^18.2.0",
+    "react-reconciler": "^0.28",
     "react-error-boundary": "^4.0.12",
     "react-lazy-load-image-component": "^1.6.0"
   },
@@ -93,7 +97,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.2",
     "vitest": "^1.2.2",
-    "zustand": "^4.5.0"
+    "zustand": "4.5.2"
   },
   "publishConfig": {
     "access": "public"

src/canvas-panel/render/Image.tsx

@@ -3,6 +3,7 @@ import React, { Fragment, ReactNode, useMemo } from 'react';
 import { TileSet } from '@atlas-viewer/atlas';
 import { ImageWithOptionalService } from '../../features/rendering-strategy/resource-types';
 import { BoxSelector } from '@iiif/helpers';
+import { RenderImageService } from './ImageService';
 
 export function RenderImage({
   id,
@@ -65,21 +66,7 @@ export function RenderImage({
         </Fragment>
       ) : (
         <Fragment key="service">
-          <TileSet
-            tiles={{
-              id: image.service.id || image.service['@id'] || 'unknown',
-              height: image.height as number,
-              width: image.width as number,
-              imageService: image.service as any,
-              thumbnail: thumbnail && thumbnail.type === 'fixed' ? thumbnail : undefined,
-            }}
-            enableSizes={enableSizes}
-            x={0}
-            y={0}
-            width={image.target?.spatial.width}
-            height={image.target?.spatial.height}
-            crop={crop}
-          />
+          <RenderImageService image={image as any} thumbnail={thumbnail} crop={crop} enableSizes={enableSizes} />
           {children}
         </Fragment>
       )}

src/canvas-panel/render/ImageService.tsx

@@ -0,0 +1,91 @@
+import { ImageCandidate } from '@atlas-viewer/iiif-image-api';
+import { ImageWithOptionalService } from '../../features/rendering-strategy/resource-types';
+import { ImageService, InternationalString } from '@iiif/presentation-3';
+import { HTMLPortal, TileSet } from '@atlas-viewer/atlas';
+import { useAuthResource } from '../../hooks/useAuthResource';
+import { useState } from 'react';
+import { LocaleString } from '../../utility/i18n-utils';
+import { Auth } from '../../context/AuthContext';
+
+interface ImageServiceProps {
+  image: ImageWithOptionalService & { service: ImageService };
+  enableSizes?: boolean;
+  crop?: { x: number; y: number; width: number; height: number };
+  thumbnail?: ImageCandidate;
+}
+
+function NotAuthorised({
+  resource: service,
+  heading,
+  note,
+  extra: image,
+}: {
+  resource: ImageService;
+  heading?: InternationalString | null;
+  note?: InternationalString | null;
+  extra: ImageServiceProps['image'] | undefined;
+}) {
+  if (!image) {
+    return null;
+  }
+
+  return (
+    <HTMLPortal
+      target={{
+        x: 0,
+        y: 0,
+        width: image.target?.spatial.width,
+        height: image.target?.spatial.height,
+      }}
+      backgroundColor="#333"
+      relative
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignContent: 'center',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          width: '100%',
+          background: '#444',
+          color: '#BBB',
+        }}
+      >
+        <div>
+          <LocaleString>{heading || 'Not authorised'}</LocaleString>
+          {note && (
+            <p>
+              <LocaleString>{note}</LocaleString>
+            </p>
+          )}
+          <p>{service.id || (service as any)['@id'] || 'unknown'}</p>
+        </div>
+      </div>
+    </HTMLPortal>
+  );
+}
+
+export function RenderImageService({ image, thumbnail, crop, enableSizes }: ImageServiceProps) {
+  return (
+    <Auth key={image.id} resource={image.service} errorComponent={NotAuthorised} extra={image}>
+      {(service) => (
+        <TileSet
+          tiles={{
+            id: service.id || (service as any)['@id'] || 'unknown',
+            height: image.height as number,
+            width: image.width as number,
+            imageService: service as any,
+            thumbnail: thumbnail && thumbnail.type === 'fixed' ? thumbnail : undefined,
+          }}
+          enableSizes={enableSizes}
+          x={0}
+          y={0}
+          width={image.target?.spatial.width}
+          height={image.target?.spatial.height}
+          crop={crop}
+        />
+      )}
+    </Auth>
+  );
+}

src/components/Authenticate.tsx

@@ -0,0 +1,28 @@
+import { useCurrentAuth } from '../context/AuthContext';
+import { LocaleString } from '../utility/i18n-utils';
+
+export function Authenticate() {
+  const { authItems, currentAuth, login } = useCurrentAuth();
+
+  if (currentAuth === -1) {
+    return null;
+  }
+
+  const current = authItems[currentAuth];
+  if (!current || !current.service || current.isLoggedIn) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div>
+        <h2>Current Auth</h2>
+        <p>{current.id}</p>
+        <h3>
+          <LocaleString>{current.service.label}</LocaleString>
+        </h3>
+        <button onClick={() => login()}>Login</button>
+      </div>
+    </div>
+  );
+}