Resolves authenticated image URLs for native shell environments (Capacitor, Tauri) where bearer token auth cannot be carried by native `
` requests. Acts as a pass-through on cookie-authenticated web clients.
## Key Components
### `useAuthedImageSrc(src?)` _(hook)_
Primary hook that returns a resolved image source string. Returns `undefined` while a fetch is in-flight or after failure (allowing callers to render a placeholder/fallback), and returns the original `src` unchanged on cookie-auth web clients.
### `clearAuthedImageCache()` _(export)_
Clears all cached blob object-URLs and revokes them via `URL.revokeObjectURL`. Should be called at session end (logout/forced re-login) to prevent blob reuse across different identities. A generation counter fences any in-flight fetches at the time of the clear.
### `fetchAsBlobUrl(src)` _(internal)_
Deduplicates concurrent fetches for the same URL using a module-level `inFlight` map, then stores the resolved blob object-URL in `resolvedCache`. Fetch is delegated to `embedAuthedFetch` (bearer auth + 401-refresh-retry + cross-origin guard).
### Module-level Cache
- `resolvedCache`: `Map` — session-lifetime blob URL cache keyed by full image URL
- `inFlight`: `Map>` — deduplicates concurrent fetches for the same URL
- `cacheGeneration`: integer counter incremented on `clearAuthedImageCache` to fence stale fetch results
## Usage Example
```typescript
import { useAuthedImageSrc, clearAuthedImageCache } from './use-authed-image-src'
// In a component — renders placeholder while fetching or on error
function Avatar({ imageUrl }: { imageUrl: string }) {
const src = useAuthedImageSrc(imageUrl)
if (!src) return
return
}
// At logout
function handleLogout() {
clearAuthedImageCache()
// ...rest of logout logic
}
```