mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 10:59:53 +00:00
26f587c956
## 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)
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { definePreset } from '@primevue/themes'
|
|
import Aura from '@primevue/themes/aura'
|
|
import * as Sentry from '@sentry/vue'
|
|
import { initializeApp } from 'firebase/app'
|
|
import { createPinia } from 'pinia'
|
|
import 'primeicons/primeicons.css'
|
|
import PrimeVue from 'primevue/config'
|
|
import ConfirmationService from 'primevue/confirmationservice'
|
|
import ToastService from 'primevue/toastservice'
|
|
import Tooltip from 'primevue/tooltip'
|
|
import { createApp } from 'vue'
|
|
import { VueFire, VueFireAuth } from 'vuefire'
|
|
|
|
import { FIREBASE_CONFIG } from '@/config/firebase'
|
|
import '@/lib/litegraph/public/css/litegraph.css'
|
|
import '@/platform/auth/serviceWorker'
|
|
import router from '@/router'
|
|
|
|
import App from './App.vue'
|
|
// Intentionally relative import to ensure the CSS is loaded in the right order (after litegraph.css)
|
|
import './assets/css/style.css'
|
|
import { i18n } from './i18n'
|
|
|
|
const ComfyUIPreset = definePreset(Aura, {
|
|
semantic: {
|
|
// @ts-expect-error fixme ts strict error
|
|
primary: Aura['primitive'].blue
|
|
}
|
|
})
|
|
|
|
const firebaseApp = initializeApp(FIREBASE_CONFIG)
|
|
|
|
const app = createApp(App)
|
|
const pinia = createPinia()
|
|
Sentry.init({
|
|
app,
|
|
dsn: __SENTRY_DSN__,
|
|
enabled: __SENTRY_ENABLED__,
|
|
release: __COMFYUI_FRONTEND_VERSION__,
|
|
integrations: [],
|
|
autoSessionTracking: false,
|
|
defaultIntegrations: false,
|
|
normalizeDepth: 8,
|
|
tracesSampleRate: 0
|
|
})
|
|
app.directive('tooltip', Tooltip)
|
|
app
|
|
.use(router)
|
|
.use(PrimeVue, {
|
|
theme: {
|
|
preset: ComfyUIPreset,
|
|
options: {
|
|
prefix: 'p',
|
|
cssLayer: {
|
|
name: 'primevue',
|
|
order: 'theme, base, primevue'
|
|
},
|
|
// This is a workaround for the issue with the dark mode selector
|
|
// https://github.com/primefaces/primevue/issues/5515
|
|
darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
|
|
}
|
|
}
|
|
})
|
|
.use(ConfirmationService)
|
|
.use(ToastService)
|
|
.use(pinia)
|
|
.use(i18n)
|
|
.use(VueFire, {
|
|
firebaseApp,
|
|
modules: [VueFireAuth()]
|
|
})
|
|
.mount('#vue-app')
|