+ 
+
+
diff --git a/src/platform/cloud/onboarding/components/CloudSignInForm.vue b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
new file mode 100644
index 000000000..a7c85971d
--- /dev/null
+++ b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
@@ -0,0 +1,128 @@
+
+
+
+
+
+
diff --git a/src/platform/cloud/onboarding/components/CloudTemplate.vue b/src/platform/cloud/onboarding/components/CloudTemplate.vue
new file mode 100644
index 000000000..9185725f0
--- /dev/null
+++ b/src/platform/cloud/onboarding/components/CloudTemplate.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/platform/cloud/onboarding/components/CloudTemplateFooter.vue b/src/platform/cloud/onboarding/components/CloudTemplateFooter.vue
new file mode 100644
index 000000000..38c3b7722
--- /dev/null
+++ b/src/platform/cloud/onboarding/components/CloudTemplateFooter.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
diff --git a/src/platform/cloud/onboarding/onboardingCloudRoutes.ts b/src/platform/cloud/onboarding/onboardingCloudRoutes.ts
new file mode 100644
index 000000000..83fed65e8
--- /dev/null
+++ b/src/platform/cloud/onboarding/onboardingCloudRoutes.ts
@@ -0,0 +1,72 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export const cloudOnboardingRoutes: RouteRecordRaw[] = [
+ {
+ path: '/cloud',
+ component: () =>
+ import('@/platform/cloud/onboarding/components/CloudLayoutView.vue'),
+ children: [
+ {
+ path: 'login',
+ name: 'cloud-login',
+ component: () =>
+ import('@/platform/cloud/onboarding/CloudLoginView.vue'),
+ beforeEnter: async (to, _from, next) => {
+ // Only redirect if not explicitly switching accounts
+ if (!to.query.switchAccount) {
+ const { useCurrentUser } = await import(
+ '@/composables/auth/useCurrentUser'
+ )
+ const { isLoggedIn } = useCurrentUser()
+
+ if (isLoggedIn.value) {
+ // User is already logged in, redirect to user-check
+ // user-check will handle survey, or main page routing
+ return next({ name: 'cloud-user-check' })
+ }
+ }
+ next()
+ }
+ },
+ {
+ path: 'signup',
+ name: 'cloud-signup',
+ component: () =>
+ import('@/platform/cloud/onboarding/CloudSignupView.vue')
+ },
+ {
+ path: 'forgot-password',
+ name: 'cloud-forgot-password',
+ component: () =>
+ import('@/platform/cloud/onboarding/CloudForgotPasswordView.vue')
+ },
+ {
+ path: 'survey',
+ name: 'cloud-survey',
+ component: () =>
+ import('@/platform/cloud/onboarding/CloudSurveyView.vue'),
+ meta: { requiresAuth: true }
+ },
+ {
+ path: 'user-check',
+ name: 'cloud-user-check',
+ component: () =>
+ import('@/platform/cloud/onboarding/UserCheckView.vue'),
+ meta: { requiresAuth: true }
+ },
+ {
+ path: 'sorry-contact-support',
+ name: 'cloud-sorry-contact-support',
+ component: () =>
+ import('@/platform/cloud/onboarding/CloudSorryContactSupportView.vue')
+ },
+ {
+ path: 'auth-timeout',
+ name: 'cloud-auth-timeout',
+ component: () =>
+ import('@/platform/cloud/onboarding/CloudAuthTimeoutView.vue'),
+ props: true
+ }
+ ]
+ }
+]
diff --git a/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue b/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue
new file mode 100644
index 000000000..9727cb6bb
--- /dev/null
+++ b/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
diff --git a/src/platform/cloud/onboarding/skeletons/CloudSurveyViewSkeleton.vue b/src/platform/cloud/onboarding/skeletons/CloudSurveyViewSkeleton.vue
new file mode 100644
index 000000000..1632ecfbc
--- /dev/null
+++ b/src/platform/cloud/onboarding/skeletons/CloudSurveyViewSkeleton.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/platform/remoteConfig/types.ts b/src/platform/remoteConfig/types.ts
index 010c00ad2..939c6bbf1 100644
--- a/src/platform/remoteConfig/types.ts
+++ b/src/platform/remoteConfig/types.ts
@@ -14,7 +14,6 @@ type ServerHealthAlert = {
*/
export type RemoteConfig = {
mixpanel_token?: string
- require_whitelist?: boolean
subscription_required?: boolean
server_health_alert?: ServerHealthAlert
}
diff --git a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
index 419ab6329..d11c88454 100644
--- a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
@@ -146,6 +146,10 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
}
}
+ trackSignupOpened(): void {
+ this.trackEvent(TelemetryEvents.USER_SIGN_UP_OPENED)
+ }
+
trackAuth(metadata: AuthMetadata): void {
this.trackEvent(TelemetryEvents.USER_AUTH_COMPLETED, metadata)
}
diff --git a/src/platform/telemetry/types.ts b/src/platform/telemetry/types.ts
index f16304e7c..d089c886a 100644
--- a/src/platform/telemetry/types.ts
+++ b/src/platform/telemetry/types.ts
@@ -258,6 +258,7 @@ export interface WorkflowCreatedMetadata {
*/
export interface TelemetryProvider {
// Authentication flow events
+ trackSignupOpened(): void
trackAuth(metadata: AuthMetadata): void
trackUserLoggedIn(): void
@@ -334,6 +335,7 @@ export interface TelemetryProvider {
*/
export const TelemetryEvents = {
// Authentication Flow
+ USER_SIGN_UP_OPENED: 'app:user_sign_up_opened',
USER_AUTH_COMPLETED: 'app:user_auth_completed',
USER_LOGGED_IN: 'app:user_logged_in',
diff --git a/src/router.ts b/src/router.ts
index e468b02f3..9959975d6 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -5,6 +5,7 @@ import {
createWebHashHistory,
createWebHistory
} from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router'
import { isCloud } from '@/platform/distribution/types'
import { useDialogService } from '@/services/dialogService'
@@ -13,8 +14,20 @@ import { useUserStore } from '@/stores/userStore'
import { isElectron } from '@/utils/envUtil'
import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
+import { cloudOnboardingRoutes } from './platform/cloud/onboarding/onboardingCloudRoutes'
+
const isFileProtocol = window.location.protocol === 'file:'
-const basePath = isElectron() ? '/' : window.location.pathname
+
+// Determine base path for the router
+// - Electron: always root
+// - Web: rely on Vite's BASE_URL (configured via vite.config `base`)
+function getBasePath(): string {
+ if (isElectron()) return '/'
+ // Vite injects BASE_URL at build/dev time; default to '/'
+ return import.meta.env?.BASE_URL || '/'
+}
+
+const basePath = getBasePath()
const router = createRouter({
history: isFileProtocol
@@ -24,6 +37,7 @@ const router = createRouter({
// we need this base path or assets will incorrectly resolve from 'http://localhost:7801/'
createWebHistory(basePath),
routes: [
+ ...(isCloud ? cloudOnboardingRoutes : []),
{
path: '/',
component: LayoutDefault,
@@ -33,6 +47,7 @@ const router = createRouter({
name: 'GraphView',
component: () => import('@/views/GraphView.vue'),
beforeEnter: async (_to, _from, next) => {
+ // Then check user store
const userStore = useUserStore()
await userStore.initialize()
if (userStore.needsLogin) {
@@ -61,8 +76,27 @@ const router = createRouter({
})
if (isCloud) {
+ const PUBLIC_ROUTE_NAMES = new Set([
+ 'cloud-login',
+ 'cloud-signup',
+ 'cloud-forgot-password',
+ 'cloud-sorry-contact-support'
+ ])
+ const PUBLIC_ROUTE_PATHS = new Set([
+ '/cloud/login',
+ '/cloud/signup',
+ '/cloud/forgot-password',
+ '/cloud/sorry-contact-support'
+ ])
+
+ function isPublicRoute(to: RouteLocationNormalized) {
+ const name = String(to.name)
+ if (PUBLIC_ROUTE_NAMES.has(name)) return true
+ const path = to.path
+ return PUBLIC_ROUTE_PATHS.has(path)
+ }
// Global authentication guard
- router.beforeEach(async (_to, _from, next) => {
+ router.beforeEach(async (to, _from, next) => {
const authStore = useFirebaseAuthStore()
// Wait for Firebase auth to initialize
@@ -79,16 +113,69 @@ if (isCloud) {
// Pass authenticated users
const authHeader = await authStore.getAuthHeader()
- if (authHeader) {
+ const isLoggedIn = !!authHeader
+
+ // Allow public routes
+ if (isPublicRoute(to)) {
return next()
}
- // Show sign-in for unauthenticated users
- const dialogService = useDialogService()
- const loginSuccess = await dialogService.showSignInDialog()
+ // Special handling for user-check
+ // These routes need auth but handle their own routing logic
+ if (to.name === 'cloud-user-check') {
+ if (to.meta.requiresAuth && !isLoggedIn) {
+ return next({ name: 'cloud-login' })
+ }
+ return next()
+ }
- if (loginSuccess) return next()
- return next(false)
+ // Prevent redirect loop when coming from user-check
+ if (_from.name === 'cloud-user-check' && to.path === '/') {
+ return next()
+ }
+
+ // Check if route requires authentication
+ if (to.meta.requiresAuth && !isLoggedIn) {
+ return next({ name: 'cloud-login' })
+ }
+
+ // Handle other protected routes
+ if (!isLoggedIn) {
+ // For Electron, use dialog
+ if (isElectron()) {
+ const dialogService = useDialogService()
+ const loginSuccess = await dialogService.showSignInDialog()
+ return loginSuccess ? next() : next(false)
+ }
+
+ // For web, redirect to login
+ return next({ name: 'cloud-login' })
+ }
+
+ // User is logged in - check if they need onboarding
+ // For root path, check actual user status to handle waitlisted users
+ if (!isElectron() && isLoggedIn && to.path === '/') {
+ // Import auth functions dynamically to avoid circular dependency
+ const { getSurveyCompletedStatus } = await import(
+ '@/platform/cloud/onboarding/auth'
+ )
+ try {
+ // Check user's actual status
+ const surveyCompleted = await getSurveyCompletedStatus()
+
+ // Survey is required for all users regardless of whitelist status
+ if (!surveyCompleted) {
+ return next({ name: 'cloud-survey' })
+ }
+ } catch (error) {
+ console.error('Failed to check user status:', error)
+ // On error, redirect to user-check as fallback
+ return next({ name: 'cloud-user-check' })
+ }
+ }
+
+ // User is logged in and accessing protected route
+ return next()
})
}
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index efe60c614..40cc0ac16 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -326,14 +326,9 @@ export class ComfyApi extends EventTarget {
super()
this.user = ''
this.api_host = location.host
- const pathname = location.pathname
- const isCloudSpaRoute = isCloud && pathname.startsWith('/cloud/')
- if (isCloudSpaRoute) {
- this.api_base = ''
- } else {
- this.api_base = pathname.split('/').slice(0, -1).join('/')
- }
- console.log('Running on', this.api_host)
+ this.api_base = isCloud
+ ? ''
+ : location.pathname.split('/').slice(0, -1).join('/')
this.initialClientId = sessionStorage.getItem('clientId')
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+