mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
add session cookie auth on cloud dist (#6295)
## Summary Implemented cookie-based session authentication for cloud distribution, replacing service worker approach with extension-based lifecycle hooks. ## Changes - **What**: Added session cookie management via [extension hooks](https://docs.comfy.org/comfyui/extensions) for login, token refresh, and logout events - **Architecture**: DDD-compliant structure with platform layer (`src/platform/auth/session/`) and cloud-gated extension - **New Extension Hooks**: `onAuthTokenRefreshed()` and `onAuthUserLogout()` in [ComfyExtension interface](src/types/comfy.ts:220-232) ```mermaid sequenceDiagram participant User participant Firebase participant Extension participant Backend User->>Firebase: Login Firebase->>Extension: onAuthUserResolved Extension->>Backend: POST /auth/session (with JWT) Backend-->>Extension: Set-Cookie Firebase->>Firebase: Token Refresh Firebase->>Extension: onAuthTokenRefreshed Extension->>Backend: POST /auth/session (with new JWT) Backend-->>Extension: Update Cookie User->>Firebase: Logout Firebase->>Extension: onAuthUserLogout (user null) Extension->>Backend: DELETE /auth/session Backend-->>Extension: Clear Cookie ``` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6295-add-session-cookie-auth-on-cloud-dist-2986d73d365081868c56e5be1ad0d0d4) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { whenever } from '@vueuse/core'
|
||||
import { computed } from 'vue'
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
|
||||
import { t } from '@/i18n'
|
||||
@@ -37,6 +37,15 @@ export const useCurrentUser = () => {
|
||||
const onUserResolved = (callback: (user: AuthUserInfo) => void) =>
|
||||
whenever(resolvedUserInfo, callback, { immediate: true })
|
||||
|
||||
const onTokenRefreshed = (callback: () => void) =>
|
||||
whenever(() => authStore.tokenRefreshTrigger, callback)
|
||||
|
||||
const onUserLogout = (callback: () => void) => {
|
||||
watch(resolvedUserInfo, (user) => {
|
||||
if (!user) callback()
|
||||
})
|
||||
}
|
||||
|
||||
const userDisplayName = computed(() => {
|
||||
if (isApiKeyLogin.value) {
|
||||
return apiKeyStore.currentUser?.name
|
||||
@@ -133,6 +142,8 @@ export const useCurrentUser = () => {
|
||||
handleSignOut,
|
||||
handleSignIn,
|
||||
handleDeleteAccount,
|
||||
onUserResolved
|
||||
onUserResolved,
|
||||
onTokenRefreshed,
|
||||
onUserLogout
|
||||
}
|
||||
}
|
||||
|
||||
25
src/extensions/core/cloudSessionCookie.ts
Normal file
25
src/extensions/core/cloudSessionCookie.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useSessionCookie } from '@/platform/auth/session/useSessionCookie'
|
||||
import { useExtensionService } from '@/services/extensionService'
|
||||
|
||||
/**
|
||||
* Cloud-only extension that manages session cookies for authentication.
|
||||
* Creates session cookie on login, refreshes it when token refreshes, and deletes on logout.
|
||||
*/
|
||||
useExtensionService().registerExtension({
|
||||
name: 'Comfy.Cloud.SessionCookie',
|
||||
|
||||
onAuthUserResolved: async () => {
|
||||
const { createSession } = useSessionCookie()
|
||||
await createSession()
|
||||
},
|
||||
|
||||
onAuthTokenRefreshed: async () => {
|
||||
const { createSession } = useSessionCookie()
|
||||
await createSession()
|
||||
},
|
||||
|
||||
onAuthUserLogout: async () => {
|
||||
const { deleteSession } = useSessionCookie()
|
||||
await deleteSession()
|
||||
}
|
||||
})
|
||||
@@ -28,6 +28,7 @@ import './widgetInputs'
|
||||
if (isCloud) {
|
||||
await import('./cloudRemoteConfig')
|
||||
await import('./cloudBadges')
|
||||
await import('./cloudSessionCookie')
|
||||
|
||||
if (window.__CONFIG__?.subscription_required) {
|
||||
await import('./cloudSubscription')
|
||||
|
||||
65
src/platform/auth/session/useSessionCookie.ts
Normal file
65
src/platform/auth/session/useSessionCookie.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { api } from '@/scripts/api'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
|
||||
|
||||
/**
|
||||
* Session cookie management for cloud authentication.
|
||||
* Creates and deletes session cookies on the ComfyUI server.
|
||||
*/
|
||||
export const useSessionCookie = () => {
|
||||
/**
|
||||
* Creates or refreshes the session cookie.
|
||||
* Called after login and on token refresh.
|
||||
*/
|
||||
const createSession = async (): Promise<void> => {
|
||||
if (!isCloud) return
|
||||
|
||||
const authStore = useFirebaseAuthStore()
|
||||
const authHeader = await authStore.getAuthHeader()
|
||||
|
||||
if (!authHeader) {
|
||||
throw new Error('No auth header available for session creation')
|
||||
}
|
||||
|
||||
const response = await fetch(api.apiURL('/auth/session'), {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
...authHeader,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}))
|
||||
throw new Error(
|
||||
`Failed to create session: ${errorData.message || response.statusText}`
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes the session cookie.
|
||||
* Called on logout.
|
||||
*/
|
||||
const deleteSession = async (): Promise<void> => {
|
||||
if (!isCloud) return
|
||||
|
||||
const response = await fetch(api.apiURL('/auth/session'), {
|
||||
method: 'DELETE',
|
||||
credentials: 'include'
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}))
|
||||
throw new Error(
|
||||
`Failed to delete session: ${errorData.message || response.statusText}`
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
createSession,
|
||||
deleteSession
|
||||
}
|
||||
}
|
||||
@@ -80,6 +80,20 @@ export const useExtensionService = () => {
|
||||
void extension.onAuthUserResolved?.(user, app)
|
||||
})
|
||||
}
|
||||
|
||||
if (extension.onAuthTokenRefreshed) {
|
||||
const { onTokenRefreshed } = useCurrentUser()
|
||||
onTokenRefreshed(() => {
|
||||
void extension.onAuthTokenRefreshed?.()
|
||||
})
|
||||
}
|
||||
|
||||
if (extension.onAuthUserLogout) {
|
||||
const { onUserLogout } = useCurrentUser()
|
||||
onUserLogout(() => {
|
||||
void extension.onAuthUserLogout?.()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
deleteUser,
|
||||
getAdditionalUserInfo,
|
||||
onAuthStateChanged,
|
||||
onIdTokenChanged,
|
||||
sendPasswordResetEmail,
|
||||
setPersistence,
|
||||
signInWithEmailAndPassword,
|
||||
@@ -61,6 +62,9 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
|
||||
const balance = ref<GetCustomerBalanceResponse | null>(null)
|
||||
const lastBalanceUpdateTime = ref<Date | null>(null)
|
||||
|
||||
// Token refresh trigger - increments when token is refreshed
|
||||
const tokenRefreshTrigger = ref(0)
|
||||
|
||||
// Providers
|
||||
const googleProvider = new GoogleAuthProvider()
|
||||
googleProvider.addScope('email')
|
||||
@@ -95,6 +99,13 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
|
||||
lastBalanceUpdateTime.value = null
|
||||
})
|
||||
|
||||
// Listen for token refresh events
|
||||
onIdTokenChanged(auth, (user) => {
|
||||
if (user && isCloud) {
|
||||
tokenRefreshTrigger.value++
|
||||
}
|
||||
})
|
||||
|
||||
const getIdToken = async (): Promise<string | undefined> => {
|
||||
if (!currentUser.value) return
|
||||
try {
|
||||
@@ -421,6 +432,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
|
||||
balance,
|
||||
lastBalanceUpdateTime,
|
||||
isFetchingBalance,
|
||||
tokenRefreshTrigger,
|
||||
|
||||
// Getters
|
||||
isAuthenticated,
|
||||
|
||||
@@ -219,5 +219,17 @@ export interface ComfyExtension {
|
||||
*/
|
||||
onAuthUserResolved?(user: AuthUserInfo, app: ComfyApp): Promise<void> | void
|
||||
|
||||
/**
|
||||
* Fired whenever the auth token is refreshed.
|
||||
* This is an experimental API and may be changed or removed in the future.
|
||||
*/
|
||||
onAuthTokenRefreshed?(): Promise<void> | void
|
||||
|
||||
/**
|
||||
* Fired when user logs out.
|
||||
* This is an experimental API and may be changed or removed in the future.
|
||||
*/
|
||||
onAuthUserLogout?(): Promise<void> | void
|
||||
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
@@ -56,6 +56,7 @@ vi.mock('firebase/auth', async (importOriginal) => {
|
||||
createUserWithEmailAndPassword: vi.fn(),
|
||||
signOut: vi.fn(),
|
||||
onAuthStateChanged: vi.fn(),
|
||||
onIdTokenChanged: vi.fn(),
|
||||
signInWithPopup: vi.fn(),
|
||||
GoogleAuthProvider: class {
|
||||
addScope = vi.fn()
|
||||
|
||||
Reference in New Issue
Block a user