always use V2 version of iiif auth services for the external service

content/webapp/pages/works/[workId]/items.tsx

@@ -52,6 +52,7 @@ import { Auth, TransformedManifest } from '@weco/content/types/manifest';
 import { fetchJson } from '@weco/content/utils/http';
 import {
   checkModalRequired,
+  getAuthServices,
   getCollectionManifests,
   hasItemType,
   hasOriginalPdf,
@@ -99,21 +100,6 @@ function getIframeAuthSrc({ workId, origin, auth, authV2 }) {
   }
 }
 
-// If more than one access service is available, the client should interact with them in the order external, kiosk, active. - https://iiif.io/api/auth/2.0/#33-interaction-patterns
-// For non logged in users/logged in non staff we clickThrough (i.e. active) first because we want users to be able to see the non restricted things
-function getAuthService({ auth, authV2 }) {
-  if (auth && authV2) {
-    return (
-      auth.v2.activeAccessService ||
-      auth.v1.activeAccessService ||
-      auth.v2.externalAccessService ||
-      auth.v1.externalAccessService
-    );
-  } else if (auth) {
-    return auth.v1.activeAccessService || auth.v1.externalAccessService;
-  }
-}
-
 export function getTokenService({ auth, authV2 }) {
   const service = authV2
     ? auth?.v2.tokenService || auth?.v1.tokenService
@@ -180,7 +166,7 @@ const ItemPage: NextPage<Props> = ({
   });
   const [accessToken, setAccessToken] = useState();
   const [searchResults, setSearchResults] = useState(serverSearchResults);
-  const authService = getAuthService({ auth, authV2 });
+  const authServices = getAuthServices({ auth, authV2 });
   const currentCanvas = canvases?.[queryParamToArrayIndex(canvas)];
 
   const displayTitle =
@@ -200,6 +186,12 @@ const ItemPage: NextPage<Props> = ({
     setShowViewer(false);
   }, []);
 
+  // We have iiif manifests that contain both active and external (restricted login) services
+  // If this happens we want to show the active service (clickthrough) message and link rather than the external one.
+  // This will enable most users to view the images with an active service (those with a restricted service won't display)
+  // For staff with a role of 'StaffWithRestricted' they will be able to see both types of image.
+  const modalContent = authServices?.active || authServices?.external;
+
   useEffect(() => {
     setOrigin(`${window.origin}`);
   }, []);
@@ -289,13 +281,13 @@ const ItemPage: NextPage<Props> = ({
         openButtonRef={{ current: null }}
       >
         <div className={font('intr', 5)}>
-          {authService?.label && (
-            <h2 className={font('intb', 4)}>{authService?.label}</h2>
+          {modalContent?.label && (
+            <h2 className={font('intb', 4)}>{modalContent?.label}</h2>
           )}
-          {authService?.description && (
+          {modalContent?.description && (
             <div
               dangerouslySetInnerHTML={{
-                __html: authService?.description,
+                __html: modalContent?.description,
               }}
             />
           )}
@@ -311,7 +303,7 @@ const ItemPage: NextPage<Props> = ({
                 text="Show the content"
                 clickHandler={() => {
                   const authServiceWindow = window.open(
-                    `${authService?.id || ''}?origin=${origin}`
+                    `${modalContent?.id || ''}?origin=${origin}`
                   );
                   authServiceWindow &&
                     authServiceWindow.addEventListener('unload', function () {

content/webapp/utils/iiif/v3/index.ts

@@ -339,6 +339,31 @@ export function getTokenService(
       )
     : clickThroughService?.service;
 }
+type AuthServices = {
+  active?: TransformedAuthService;
+  external?: TransformedAuthService;
+};
+
+export function getAuthServices({
+  auth,
+  authV2,
+}: {
+  auth?: Auth;
+  authV2?: boolean;
+}): AuthServices | undefined {
+  if (auth && authV2) {
+    return {
+      active: auth.v2.activeAccessService,
+      external: auth.v2.externalAccessService,
+    };
+  } else if (auth) {
+    return {
+      active: auth.v1.activeAccessService,
+      // Only the v2 external service works (v1 responds with a 404), we therefore try returning the v2 service, so we can use it if it is available. We still need to fallback to the v1 service as the presence of the service helps us determine whether to show the viewer or not.
+      external: auth.v2.externalAccessService || auth.v1.externalAccessService,
+    };
+  }
+}
 
 type checkModalParams = {
   role?: string;
@@ -349,16 +374,11 @@ type checkModalParams = {
 
 export function checkModalRequired(params: checkModalParams): boolean {
   const { role, auth, isAnyImageOpen, authV2 } = params;
-  // If authV2 is true, We try to use the iiif auth V2 services and fallback to V1 in case the manifest doesn't contain V2
-  const externalAccessService = authV2
-    ? auth?.v2.externalAccessService || auth?.v1.externalAccessService
-    : auth?.v1.externalAccessService;
-  const activeAccessService = authV2
-    ? auth?.v2.activeAccessService || auth?.v1.activeAccessService
-    : auth?.v1.activeAccessService;
-  if (activeAccessService) {
+  const authServices = getAuthServices({ auth, authV2 });
+  if (authServices?.active) {
     return true;
-  } else if (externalAccessService) {
+  } else if (authServices?.external) {
+    // TODO if we've got a v1 service then display a message to say the manifest needs regenerating
     if (isAnyImageOpen || role === 'StaffWithRestricted') {
       return false;
     } else {
@@ -492,8 +512,7 @@ export function groupRanges(
       );
 
       if (
-        getDisplayLabel(acc.previousLabel) ===
-          getDisplayLabel(range.label) &&
+        getDisplayLabel(acc.previousLabel) === getDisplayLabel(range.label) &&
         acc.previousLastCanvasIndex &&
         firstCanvasIndex === acc.previousLastCanvasIndex + 1
       ) {