[auth] add service worker on cloud distribution to attach auth header to browser native /view requests (#6139)

## Summary

Added Service Worker to inject Firebase auth headers into browser-native
`/api/view` requests (img, video, audio tags) for cloud distribution.

## Changes

- **What**: Implemented [Service
Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
to intercept and authenticate media requests that cannot natively send
custom headers
- **Dependencies**: None (uses native Service Worker API)

## Implementation Details

**Tree-shaking**: Uses compile-time `isCloud` constant - completely
removed from localhost/desktop builds (verified via bundle analysis).
Verify yourself by building the app and `grep -r
"registerAuthServiceWorker\|setupAuth" dist/`
**Caching**: 50-minute auth header cache with automatic invalidation on
login/logout to prevent redundant token fetches.

**Message Flow**:
```mermaid
sequenceDiagram
    participant IMG as Browser
    participant SW as Service Worker
    participant MT as Main Thread
    participant FB as Firebase Auth

    IMG->>SW: GET /api/view/image.png
    SW->>SW: Check cache (50min TTL)
    alt Cache miss
        SW->>MT: REQUEST_AUTH_HEADER
        MT->>FB: getAuthHeader()
        FB-->>MT: Bearer token
        MT-->>SW: AUTH_HEADER_RESPONSE
        SW->>SW: Cache token
    end
    SW->>IMG: Fetch with Authorization header

    Note over SW,MT: On login/logout: INVALIDATE_AUTH_HEADER
```

## Review Focus

- **Same-origin mode**: Service Worker uses `mode: 'same-origin'` to
allow custom headers (browser-native requests default to `no-cors` which
strips headers)
- **Request deduplication**: Prevents concurrent auth header requests
from timing out
- **Build verification**: Confirm `register-*.js` absent in localhost
builds, present (~3.2KB) in cloud builds

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6139-auth-add-service-worker-on-cloud-distribution-to-attach-auth-header-to-browser-native--2916d73d3650812698dccd07d943ab3c)
by [Unito](https://www.unito.io)
This commit is contained in:
Christian Byrne
2025-10-19 22:51:37 -07:00
committed by GitHub
parent 7ad1112535
commit 26f587c956
6 changed files with 218 additions and 1 deletions

View File

@@ -0,0 +1,9 @@
import { isCloud } from '@/platform/distribution/types'
/**
* Auth service worker registration (cloud-only).
* Tree-shaken for desktop/localhost builds via compile-time constant.
*/
if (isCloud) {
void import('./register')
}

View File

@@ -0,0 +1,57 @@
import { watch } from 'vue'
import { useCurrentUser } from '@/composables/auth/useCurrentUser'
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
/**
* Registers the authentication service worker for cloud distribution.
* Intercepts /api/view requests to add auth headers for browser-native requests.
*/
async function registerAuthServiceWorker(): Promise<void> {
if (!('serviceWorker' in navigator)) {
return
}
try {
await navigator.serviceWorker.register('/auth-sw.js')
setupAuthHeaderProvider()
setupCacheInvalidation()
} catch (error) {
console.error('[Auth SW] Registration failed:', error)
}
}
/**
* Listens for auth header requests from the service worker
*/
function setupAuthHeaderProvider(): void {
navigator.serviceWorker.addEventListener('message', async (event) => {
if (event.data.type === 'REQUEST_AUTH_HEADER') {
const firebaseAuthStore = useFirebaseAuthStore()
const authHeader = await firebaseAuthStore.getAuthHeader()
event.ports[0].postMessage({
type: 'AUTH_HEADER_RESPONSE',
authHeader
})
}
})
}
/**
* Invalidates cached auth header when user logs in/out
*/
function setupCacheInvalidation(): void {
const { isLoggedIn } = useCurrentUser()
watch(isLoggedIn, (newValue, oldValue) => {
if (newValue !== oldValue) {
navigator.serviceWorker.controller?.postMessage({
type: 'INVALIDATE_AUTH_HEADER'
})
}
})
}
void registerAuthServiceWorker()