<!-- source-hash: 299ce364c9d743edb29fb9fe752f626b -->
A React hook for fetching authenticated images with built-in caching, deduplication, and automatic cleanup of blob URLs.

## Key Components

- **`useAuthenticatedImage`** - Main hook that fetches images with authentication and returns blob URL, loading state, and error
- **`configureAuthenticatedImage`** - Global configuration function for tenant URLs and authentication settings
- **`AuthenticatedImageConfig`** - Configuration interface for tenant host URL, dev mode, and access token settings
- **Global image cache** - Shared cache with reference counting and automatic cleanup of expired entries
- **Request deduplication** - Prevents multiple simultaneous requests for the same image URL

## Usage Example

```typescript
// Configure globally in app initialization
configureAuthenticatedImage({
  tenantHostUrl: process.env.NEXT_PUBLIC_TENANT_HOST_URL || '',
  enableDevMode: process.env.NEXT_PUBLIC_ENABLE_DEV_MODE === 'true'
})

// In a component
function OrganizationLogo({ organization }) {
  const { imageUrl, isLoading, error } = useAuthenticatedImage(
    organization?.logoUrl,
    organization?.logoVersion // Optional refresh key
  )

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Failed to load image</div>
  if (!imageUrl) return null

  return <img src={imageUrl} alt="Organization Logo" />
}

// Multiple components using same URL share cached result
function AnotherComponent({ organization }) {
  const { imageUrl } = useAuthenticatedImage(organization?.logoUrl)
  return imageUrl ? <img src={imageUrl} /> : null
}
```

The hook handles cookie-based authentication, optional Bearer tokens in dev mode, automatic blob URL cleanup, and provides a 30-minute cache with 5-minute cleanup intervals.