DO NOT MERGE: Feat/cloud auth gates

src/composables/auth/useCurrentUser.ts

@@ -34,8 +34,19 @@ export const useCurrentUser = () => {
     return null
   })
 
+<<<<<<< HEAD
   const onUserResolved = (callback: (user: AuthUserInfo) => void) =>
     whenever(resolvedUserInfo, callback, { immediate: true })
+=======
+  const onUserResolved = (callback: (user: AuthUserInfo) => void) => {
+    if (resolvedUserInfo.value) {
+      callback(resolvedUserInfo.value)
+    }
+
+    const stop = whenever(resolvedUserInfo, callback)
+    return () => stop()
+  }
+>>>>>>> 775c856bf (port user ID expose hook from 6786d8e to cloud)
 
   const userDisplayName = computed(() => {
     if (isApiKeyLogin.value) {
@@ -132,7 +143,10 @@ export const useCurrentUser = () => {
     resolvedUserInfo,
     handleSignOut,
     handleSignIn,
+<<<<<<< HEAD
     handleDeleteAccount,
+=======
+>>>>>>> 775c856bf (port user ID expose hook from 6786d8e to cloud)
     onUserResolved
   }
 }

src/composables/auth/useFirebaseAuthActions.ts

@@ -1,6 +1,7 @@
 import { FirebaseError } from 'firebase/app'
 import { AuthErrorCodes } from 'firebase/auth'
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { ErrorRecoveryStrategy } from '@/composables/useErrorHandling'
@@ -18,6 +19,7 @@ import { usdToMicros } from '@/utils/formatUtil'
 export const useFirebaseAuthActions = () => {
   const authStore = useFirebaseAuthStore()
   const toastStore = useToastStore()
+  const router = useRouter()
   const { wrapWithErrorHandlingAsync, toastErrorHandler } = useErrorHandling()
 
   const accessError = ref(false)
@@ -54,6 +56,12 @@ export const useFirebaseAuthActions = () => {
       detail: t('auth.signOut.successDetail'),
       life: 5000
     })
+
+    // Redirect to login page if we're on cloud domain
+    const hostname = window.location.hostname
+    if (hostname.includes('cloud.comfy.org')) {
+      await router.push({ name: 'cloud-login' })
+    }
   }, reportError)
 
   const sendPasswordReset = wrapWithErrorHandlingAsync(

src/router.ts

@@ -4,11 +4,12 @@ import {
   createWebHistory
 } from 'vue-router'
 
+import { useDialogService } from '@/services/dialogService'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useUserStore } from '@/stores/userStore'
+import { isElectron } from '@/utils/envUtil'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
 
-import { useUserStore } from './stores/userStore'
-import { isElectron } from './utils/envUtil'
-
 const isFileProtocol = window.location.protocol === 'file:'
 const basePath = isElectron() ? '/' : window.location.pathname
 
@@ -56,4 +57,41 @@ const router = createRouter({
   }
 })
 
+// Global authentication guard
+router.beforeEach(async (_to, _from, next) => {
+  const authStore = useFirebaseAuthStore()
+
+  // Wait for Firebase auth to initialize
+  if (!authStore.isInitialized) {
+    await new Promise<void>((resolve) => {
+      const unwatch = authStore.$subscribe((_, state) => {
+        if (state.isInitialized) {
+          unwatch()
+          resolve()
+        }
+      })
+    })
+  }
+
+  // Check if user is authenticated (Firebase or API key)
+  const authHeader = await authStore.getAuthHeader()
+
+  if (!authHeader) {
+    // User is not authenticated, show sign-in dialog
+    const dialogService = useDialogService()
+    const loginSuccess = await dialogService.showSignInDialog()
+
+    if (loginSuccess) {
+      // After successful login, proceed to the intended route
+      next()
+    } else {
+      // User cancelled login, stay on current page or redirect to home
+      next(false)
+    }
+  } else {
+    // User is authenticated, proceed
+    next()
+  }
+})
+
 export default router

src/scripts/api.ts

@@ -43,6 +43,11 @@ import type {
 } from '@/schemas/apiSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
+<<<<<<< HEAD
+=======
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { WorkflowTemplates } from '@/types/workflowTemplateTypes'
+>>>>>>> 23e881e22 (Prevent access without login.)
 
 interface QueuePromptRequestBody {
   client_id: string
@@ -317,7 +322,27 @@ export class ComfyApi extends EventTarget {
     return this.api_base + route
   }
 
-  fetchApi(route: string, options?: RequestInit) {
+  /**
+   * Waits for Firebase auth to be initialized before proceeding
+   */
+  async #waitForAuthInitialization(): Promise<void> {
+    const authStore = useFirebaseAuthStore()
+
+    if (authStore.isInitialized) {
+      return
+    }
+
+    return new Promise<void>((resolve) => {
+      const unwatch = authStore.$subscribe((_, state) => {
+        if (state.isInitialized) {
+          unwatch()
+          resolve()
+        }
+      })
+    })
+  }
+
+  async fetchApi(route: string, options?: RequestInit) {
     if (!options) {
       options = {}
     }
@@ -328,6 +353,30 @@ export class ComfyApi extends EventTarget {
       options.cache = 'no-cache'
     }
 
+    // Wait for Firebase auth to be initialized before making any API request
+    await this.#waitForAuthInitialization()
+
+    // Add Firebase JWT token if user is logged in
+    try {
+      const authHeader = await useFirebaseAuthStore().getAuthHeader()
+      if (authHeader) {
+        if (Array.isArray(options.headers)) {
+          for (const [key, value] of Object.entries(authHeader)) {
+            options.headers.push([key, value])
+          }
+        } else if (options.headers instanceof Headers) {
+          for (const [key, value] of Object.entries(authHeader)) {
+            options.headers.set(key, value)
+          }
+        } else {
+          Object.assign(options.headers, authHeader)
+        }
+      }
+    } catch (error) {
+      // Silently ignore auth errors to avoid breaking API calls
+      console.warn('Failed to get auth header:', error)
+    }
+
     if (Array.isArray(options.headers)) {
       options.headers.push(['Comfy-User', this.user])
     } else if (options.headers instanceof Headers) {
@@ -402,19 +451,39 @@ export class ComfyApi extends EventTarget {
    * Creates and connects a WebSocket for realtime updates
    * @param {boolean} isReconnect If the socket is connection is a reconnect attempt
    */
-  #createSocket(isReconnect?: boolean) {
+  async #createSocket(isReconnect?: boolean) {
     if (this.socket) {
       return
     }
 
     let opened = false
     let existingSession = window.name
+
+    // Get auth token if available
+    let authToken: string | undefined
+    try {
+      authToken = await useFirebaseAuthStore().getIdToken()
+    } catch (error) {
+      // Continue without auth token if there's an error
+      console.warn('Could not get auth token for WebSocket connection:', error)
+    }
+
+    // Build WebSocket URL with query parameters
+    let wsUrl = `ws${window.location.protocol === 'https:' ? 's' : ''}://${this.api_host}${this.api_base}/ws`
+    const params = new URLSearchParams()
+
     if (existingSession) {
-      existingSession = '?clientId=' + existingSession
+      params.set('clientId', existingSession)
     }
-    this.socket = new WebSocket(
-      `ws${window.location.protocol === 'https:' ? 's' : ''}://${this.api_host}${this.api_base}/ws${existingSession}`
-    )
+    if (authToken) {
+      params.set('token', authToken)
+    }
+
+    if (params.toString()) {
+      wsUrl += '?' + params.toString()
+    }
+
+    this.socket = new WebSocket(wsUrl)
     this.socket.binaryType = 'arraybuffer'
 
     this.socket.addEventListener('open', () => {
@@ -441,9 +510,9 @@ export class ComfyApi extends EventTarget {
     })
 
     this.socket.addEventListener('close', () => {
-      setTimeout(() => {
+      setTimeout(async () => {
         this.socket = null
-        this.#createSocket(true)
+        await this.#createSocket(true)
       }, 300)
       if (opened) {
         this.dispatchCustomEvent('status', null)

src/types/comfy.ts

@@ -197,9 +197,14 @@ export interface ComfyExtension {
   ): Promise<void> | void
 
   /**
+<<<<<<< HEAD
    * Fired whenever authentication resolves, providing the anonymized user id..
    * Extensions can register at any time and will receive the latest value immediately.
    * This is an experimental API and may be changed or removed in the future.
+=======
+   * Fired whenever authentication resolves, providing the user id.
+   * Extensions can register at any time and will receive the latest value immediately.
+>>>>>>> 775c856bf (port user ID expose hook from 6786d8e to cloud)
    */
   onAuthUserResolved?(user: AuthUserInfo, app: ComfyApp): Promise<void> | void