Function AuthorizedImage

packages/front-end/components/AuthorizedImage.tsx:22–156

({
  imageCache = {},
  onErrorMsg,
  src = "",
  isPublic = false,
  shareUid,
  shareType = "experiment",
  ...props
})

 * It caches signed and local URLs to avoid repeated API calls.
 * */
const AuthorizedImage: FC<AuthorizedImageProps> = ({
  imageCache = {},
  onErrorMsg,
  src = "",
  isPublic = false,
  shareUid,
  shareType = "experiment",
  ...props
}) => {
  const [imageSrc, setImageSrc] = useState<string | null>(null);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  const { apiCall } = useAuth();

  useEffect(() => {
    const fetchData = async (src) => {
      try {
        const imageData: Blob = await apiCall(new URL(src).pathname);
        const imageUrl = URL.createObjectURL(imageData);
        imageCache[src] = { url: imageUrl, expiresAt: "never" }; // Local files never expire
        setImageSrc(imageUrl);
      } catch (e) {
        setErrorMsg(e.message);
      }
    };

    const fetchSignedUrl = async (originalSrc: string, path: string) => {
      try {
        let endpoint = isPublic
          ? `/upload/public-signed-url/${path}`
          : `/upload/signed-url/${path}`;

        // Add shareUid and shareType as query parameters for public endpoints
        if (isPublic && shareUid) {
          endpoint += `?shareUid=${encodeURIComponent(shareUid)}&shareType=${encodeURIComponent(shareType)}`;
        }

        let response: SignedImageUrlResponse;

        if (isPublic) {
          // For public endpoints, use fetch without credentials to avoid CORS issues
          const res = await fetch(getApiHost() + endpoint);
          if (!res.ok) {
            const errorData = await res
              .json()
              .catch(() => ({ message: res.statusText }));
            throw new Error(
              errorData.message ||
                `Failed to fetch signed URL: ${res.statusText}`,
            );
          }
          response = await res.json();
        } else {
          // For authenticated endpoints, use apiCall which includes credentials
          response = await apiCall<SignedImageUrlResponse>(endpoint);
        }

        const { signedUrl, expiresAt } = response;