fix: Updates "globus.embed" fields to prompt for authorization when no session is found (#255)

Author: jbottigliero

src/components/Fields/GlobusEmbedField.tsx

@@ -19,6 +19,7 @@ import { isAuthorizationRequirementsError } from "@globus/sdk/core/errors";
 import { useOAuthStore } from "@/store/oauth";
 import { usePathname, useSearchParams } from "next/navigation";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { useLogin } from "@/hooks/useOAuth";
 import { PlotlyRenderer } from "./Renderer/Plotly";
 import { ObjectRenderer } from "./Renderer/Object";
 import { useGCSAsset, useGCSAssetMetadata } from "@/hooks/useGlobusAPI";
@@ -178,6 +179,9 @@ export default function GlobusEmbedField({ field }: { field: ProcessedField }) {
 }
 
 function GlobusEmbed({ config, field }: GlobusEmbedProps) {
+  const auth = useGlobusAuth();
+  const login = useLogin();
+
   const metadata = useGCSAssetMetadata({
     collection: config.collection,
     url: config.asset,
@@ -198,6 +202,19 @@ function GlobusEmbed({ config, field }: GlobusEmbedProps) {
   return (
     <>
       <Box w={`calc(${width} + 2em)`} h={`calc(${height} + 2em)`}>
+        {!auth.isAuthenticated && (
+          <Alert status="warning">
+            <AlertIcon />
+            <AlertTitle>Authentication Required</AlertTitle>
+            <AlertDescription>
+              To view this asset, you must{" "}
+              <Button variant="link" onClick={login}>
+                Sign In
+              </Button>
+              .
+            </AlertDescription>
+          </Alert>
+        )}
         {metadata.isLoading && (
           <Center>
             <HStack>

src/hooks/useGlobusAPI.ts

@@ -93,10 +93,11 @@ export function useGCSAssetMetadata({
   url: string;
 }) {
   const auth = useGlobusAuth();
+
   const token =
     auth.authorization?.tokens.getByResourceServer(collection)?.access_token;
   return useQuery({
-    enabled: !!token,
+    enabled: !!auth.isAuthenticated,
     queryKey: ["gcs", url, "metadata"],
     queryFn: async () => {
       const response = await fetch(url, {
@@ -154,7 +155,7 @@ export function useGCSAsset({
     auth.authorization?.tokens.getByResourceServer(collection)?.access_token;
 
   return useQuery({
-    enabled: !!token && enabled !== false,
+    enabled: !!auth.isAuthenticated && enabled !== false,
     queryKey: ["gcs", url],
     queryFn: async (): Promise<GCSAssetResponse> => {
       let contentType = mimeTypeHint;
@@ -214,7 +215,7 @@ export function useGCSAsset({
       });
       contentType = response.headers.get("Content-Type");
       if (!response.ok) {
-        throw new Error(
+        return Promise.reject(
           /**
            * Errors might come from GridFTP, so we need to detect whether or
            * not the response is JSON or text before throwing an error.