@vertesia/ui 0.56.0 → 0.58.0

package/src/session/UserSessionProvider.tsx

@@ -0,0 +1,170 @@
+import { onAuthStateChanged } from "firebase/auth";
+import { ReactNode, useEffect, useState } from "react";
+import { UserNotFoundError, getComposableToken } from "./auth/composable";
+import { getFirebaseAuth } from "./auth/firebase";
+import { useAuthState } from "./auth/useAuthState";
+import { Env } from "@vertesia/ui/env";
+import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, UserSession, UserSessionContext } from "./UserSession";
+
+const devDomains = [".composable.sh", ".vertesia.dev", "vertesia.app"];
+const CENTRAL_AUTH_REDIRECT = "https://internal-auth.vertesia.app/";
+
+function shouldRedirectToCentralAuth() {
+    // Authentication is not supported in Docker environment.
+    // See https://github.com/vertesia/studio/wiki/Composable-UI-Hosting-Options
+    if (Env.isDocker) {
+        return true;
+    }
+    return devDomains.some((domain) => window.location.hostname.endsWith(domain));
+}
+
+interface UserSessionProviderProps {
+    children: ReactNode | ReactNode[];
+}
+export function UserSessionProvider({ children }: UserSessionProviderProps) {
+    const hashParams = new URLSearchParams(location.hash.substring(1));
+    const token = hashParams.get("token");
+    const state = hashParams.get("state");
+    const [session, setSession] = useState<UserSession>(new UserSession());
+    const { generateState, verifyState } = useAuthState();
+
+    const redirectToCentralAuth = (projectId?: string, accountId?: string) => {
+        const url = new URL(CENTRAL_AUTH_REDIRECT);
+        const currentUrl = new URL(window.location.href);
+        currentUrl.hash = "";
+        if (projectId) currentUrl.searchParams.set("p", projectId);
+        if (accountId) currentUrl.searchParams.set("a", accountId);
+        url.searchParams.set("redirect_uri", currentUrl.toString());
+        url.searchParams.set("state", generateState());
+        location.replace(url.toString());
+    };
+
+    useEffect(() => {
+        console.log("Auth: starting auth flow");
+        Env.logger.info("Starting auth flow");
+        const currentUrl = new URL(window.location.href);
+        const selectedAccount =
+            currentUrl.searchParams.get("a") ?? localStorage.getItem(LastSelectedAccountId_KEY) ?? undefined;
+        const selectedProject =
+            currentUrl.searchParams.get("p") ??
+            localStorage.getItem(LastSelectedProjectId_KEY + "-" + selectedAccount) ??
+            undefined;
+        console.log("Auth: selected account", selectedAccount);
+        console.log("Auth: selected project", selectedProject);
+        Env.logger.info("Selected account and project", {
+            vertesia: {
+                account_id: selectedAccount,
+                project_id: selectedProject,
+            },
+        });
+
+        if (token && state) {
+            const validationError = verifyState(state);
+            if (validationError) {
+                console.error(`Auth: invalid state: ${validationError}`);
+                Env.logger.error(`Invalid state: ${validationError}`, {
+                    vertesia: {
+                        state: state,
+                    },
+                });
+                redirectToCentralAuth();
+            }
+            getComposableToken(selectedAccount, selectedProject, token)
+                .then((res) => {
+                    session.login(res.rawToken).then(() => {
+                        setSession(session.clone());
+                        //cleanup the hash
+                        window.location.hash = "";
+                    });
+                })
+                .catch((err) => {
+                    console.error("Failed to fetch user token from studio, redirecting to central auth", err);
+                    Env.logger.error("Failed to fetch user token from studio, redirecting to central auth", {
+                        vertesia: {
+                            error: err,
+                        },
+                    });
+                    redirectToCentralAuth();
+                });
+            return;
+        } else {
+            //if on a dev domain and not logged in, redirect to central auth
+            if (!session.isLoggedIn()) {
+                console.log("Auth: not logged in & no token/state");
+                Env.logger.info("Not logged in & no token/state", {
+                    vertesia: {
+                        account_id: selectedAccount,
+                        project_id: selectedProject,
+                    },
+                });
+                if (shouldRedirectToCentralAuth()) {
+                    console.log(
+                        "Auth: on dev domain, redirecting to central auth with selection",
+                        selectedAccount,
+                        selectedProject,
+                    );
+                    Env.logger.info("Redirecting to central auth with selection", {
+                        vertesia: {
+                            account_id: selectedAccount,
+                            project_id: selectedProject,
+                        },
+                    });
+                    redirectToCentralAuth();
+                } else {
+                    console.log("Auth: not on dev domain");
+                    Env.logger.info("Not on dev domain", {
+                        vertesia: {
+                            account_id: selectedAccount,
+                            project_id: selectedProject,
+                        },
+                    });
+                }
+            }
+        }
+
+        return onAuthStateChanged(getFirebaseAuth(), async (firebaseUser) => {
+            if (firebaseUser) {
+                console.log("Auth: successful login with firebase");
+                Env.logger.info("Successful login with firebase", {
+                    vertesia: {
+                        account_id: selectedAccount,
+                        project_id: selectedProject,
+                    },
+                });
+                session.setSession = setSession;
+                await getComposableToken(selectedAccount, selectedProject)
+                    .then((res) => {
+                        session.login(res.rawToken).then(() => setSession(session.clone()));
+                    })
+                    .catch((err) => {
+                        console.error("Failed to fetch user token from studio", err);
+                        Env.logger.error("Failed to fetch user token from studio", {
+                            vertesia: {
+                                account_id: selectedAccount,
+                                project_id: selectedProject,
+                                error: err,
+                            },
+                        });
+                        if (!(err instanceof UserNotFoundError)) session.logout();
+                        session.isLoading = false;
+                        session.authError = err;
+                        setSession(session.clone());
+                    });
+            } else {
+                // anonymous user
+                console.log("Auth: using anonymous user");
+                Env.logger.info("Using anonymous user", {
+                    vertesia: {
+                        account_id: selectedAccount,
+                        project_id: selectedProject,
+                    },
+                });
+                session.client.withAuthCallback(undefined);
+                session.logout();
+                setSession(session.clone());
+            }
+        });
+    }, []);
+
+    return <UserSessionContext.Provider value={session}>{children}</UserSessionContext.Provider>;
+}

package/src/session/auth/composable.ts

@@ -0,0 +1,190 @@
+/**
+ * Handle client caching and refresh of auth token
+ */
+import { AuthTokenPayload } from "@vertesia/common";
+import { jwtDecode } from "jwt-decode";
+import { Env } from '@vertesia/ui/env';
+import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from '../UserSession';
+import { getFirebaseAuth, getFirebaseAuthToken } from './firebase';
+
+let AUTH_TOKEN_RAW: string | undefined;
+let AUTH_TOKEN: AuthTokenPayload | undefined;
+
+interface ComposableTokenResponse {
+    rawToken: string;
+    token: AuthTokenPayload;
+    error: boolean;
+    message?: string;
+}
+
+export async function fetchComposableToken(getIdToken: () => Promise<string | null | undefined>, accountId?: string, projectId?: string, ttl?: number): Promise<string> {
+    console.log(`Getting/refreshing composable token for account ${accountId} and project ${projectId} `);
+    Env.logger.info('Getting/refreshing composable token', {
+        vertesia: {
+            account_id: accountId,
+            project_id: projectId,
+        },
+    });
+
+    const idToken = await getIdToken(); //get from firebase
+    if (!idToken) {
+        console.log('No id token found - using cookie auth');
+        throw new Error('No id token found');
+    }
+
+    console.log('Fetching composable token from ' + Env.endpoints.studio);
+    Env.logger.info('Fetching composable token from' + Env.endpoints.studio, {
+        vertesia: {
+            account_id: accountId,
+            project_id: projectId,
+        },
+    });
+
+    const url = new URL(Env.endpoints.studio + '/auth/token');
+    if (accountId) url.searchParams.set('accountId', accountId);
+    if (projectId) url.searchParams.set('projectId', projectId);
+    if (ttl) url.searchParams.set('ttl', String(ttl));
+
+    console.log(`Getting composable token for account ${accountId} and project ${projectId}`);
+    Env.logger.info('Getting composable token', {
+        vertesia: {
+            account_id: accountId,
+            project_id: projectId,
+        },
+    });
+
+    const res = await fetch(url, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${idToken}`
+        }
+    }).catch(err => {
+        localStorage.removeItem(LastSelectedAccountId_KEY);
+        localStorage.removeItem(LastSelectedProjectId_KEY);
+        console.error('Failed to get composable token', err);
+        Env.logger.error('Failed to get composable token', {
+            vertesia: {
+                account_id: accountId,
+                project_id: projectId,
+                error: err,
+            },
+        });
+        throw new Error('Failed to get composable token');
+    });
+
+    if (idToken && res?.status === 412) {
+        console.log("412: auth succeeded but user doesn't exist - signup required", res?.status);
+        Env.logger.error("412: auth succeeded but user doesn't exist - signup required", {
+            vertesia: {
+                account_id: accountId,
+                project_id: projectId,
+                status: res?.status
+            },
+        });
+        const idTokenDecoded = jwtDecode(idToken) as any;
+        if (!idTokenDecoded?.email) {
+            Env.logger.error('No email found in id token');
+            throw new Error('No email found in id token');
+        }
+        Env.logger.error('User not found', {
+            vertesia: {
+                account_id: accountId,
+                project_id: projectId,
+                email: idTokenDecoded.email
+            }
+        });
+        throw new UserNotFoundError('User not found', idTokenDecoded.email);
+    }
+
+    if (!res || !res.ok) {
+        console.error('Failed to get composable token', res);
+        Env.logger.error('Failed to get composable token', {
+            vertesia: {
+                account_id: accountId,
+                project_id: projectId,
+                status: res?.status,
+            },
+        });
+        throw new Error('Failed to get composable token');
+    }
+
+    const { token } = await res.json().catch(err => {
+        Env.logger.error('Failed to parse composable token', {
+            vertesia: {
+                account_id: accountId,
+                project_id: projectId,
+                error: err,
+            },
+        });
+        console.error('Failed to parse composable token', err);
+    });
+
+    return token;
+}
+
+/**
+ *
+ * @param accountId
+ * @param projectId
+ * @param ttl time to live for the token in seconds
+ * @returns
+ */
+export async function fetchComposableTokenFromFirebaseToken(accountId?: string, projectId?: string, ttl?: number) {
+    return fetchComposableToken(getFirebaseAuthToken, accountId, projectId, ttl);
+}
+
+export async function getComposableToken(accountId?: string, projectId?: string, initToken?: string, forceRefresh = false): Promise<ComposableTokenResponse> {
+
+    const selectedAccount = accountId ?? localStorage.getItem(LastSelectedAccountId_KEY) ?? undefined
+    const selectedProject = projectId ?? localStorage.getItem(LastSelectedProjectId_KEY + '-' + selectedAccount) ?? undefined
+
+    //token is still valid for more than 5 minutes
+    if (!forceRefresh && AUTH_TOKEN_RAW && AUTH_TOKEN && AUTH_TOKEN.exp > (Date.now() / 1000 + 300)) {
+        return { rawToken: AUTH_TOKEN_RAW, token: AUTH_TOKEN, error: false };
+    }
+
+    //token is close to expire, refresh it
+    if (getFirebaseAuth().currentUser) {
+        //we have a firebase user, get the token from there
+        AUTH_TOKEN_RAW = await fetchComposableTokenFromFirebaseToken(selectedAccount, selectedProject);
+    } else if (initToken || AUTH_TOKEN_RAW) {
+        //we have a token already and no firebase user, refresh it
+        AUTH_TOKEN_RAW = await fetchComposableToken(() => Promise.resolve(initToken ?? AUTH_TOKEN_RAW), selectedAccount, selectedProject);
+    }
+
+    if (!AUTH_TOKEN_RAW) {
+        Env.logger.error('Cannot acquire a composable token', {
+            vertesia: {
+                account_id: selectedAccount,
+                project_id: selectedProject,
+            },
+        });
+        throw new Error('Cannot acquire a composable token');
+    }
+
+    AUTH_TOKEN = jwtDecode(AUTH_TOKEN_RAW) as AuthTokenPayload;
+
+    if (!AUTH_TOKEN || !AUTH_TOKEN.exp || !AUTH_TOKEN_RAW) {
+        console.error('Invalid composable token', AUTH_TOKEN);
+        Env.logger.error('Invalid composable token', {
+            vertesia: {
+                account_id: selectedAccount,
+                project_id: selectedProject,
+            },
+        });
+        throw new Error('Invalid composable token');
+    }
+
+    return { rawToken: AUTH_TOKEN_RAW, token: AUTH_TOKEN, error: false };
+
+}
+
+export class UserNotFoundError extends Error {
+    email: string;
+    constructor(message: string, email: string) {
+        super(message);
+        this.name = 'UserNotFoundError';
+        this.email = email;
+    }
+}

package/src/session/auth/firebase.ts

@@ -0,0 +1,160 @@
+import { UIResolvedTenant } from "@vertesia/common";
+import { Env } from "@vertesia/ui/env";
+import { Analytics, getAnalytics } from "firebase/analytics";
+import { FirebaseApp, initializeApp } from "firebase/app";
+import { Auth, getAuth } from "firebase/auth";
+
+// Use lazy initialization to avoid accessing Env before it's initialized
+let _firebaseApp: FirebaseApp | null = null;
+let _analytics: Analytics | null = null;
+let _firebaseAuth: Auth | null = null;
+
+// Getters that lazily initialize Firebase components when first accessed
+export function getFirebaseApp(): FirebaseApp {
+    if (!_firebaseApp) {
+        try {
+            _firebaseApp = initializeApp(Env.firebase);
+        } catch (error) {
+            console.error("Failed to initialize Firebase app:", error);
+            throw new Error("Firebase initialization failed - environment may not be properly initialized");
+        }
+    }
+    return _firebaseApp;
+}
+
+export function getFirebaseAnalytics(): Analytics {
+    if (!_analytics) {
+        _analytics = getAnalytics(getFirebaseApp());
+    }
+    return _analytics;
+}
+
+export function getFirebaseAuth(): Auth {
+    if (!_firebaseAuth) {
+        _firebaseAuth = getAuth(getFirebaseApp());
+    }
+    return _firebaseAuth;
+}
+
+
+export async function setFirebaseTenant(tenantEmail?: string) {
+    if (!tenantEmail) {
+        console.log("No tenant name or email specified, skipping tenant setup");
+        return;
+    }
+
+    try {
+        if (tenantEmail) console.log(`Resolving tenant ID from email: ${tenantEmail}`);
+
+        // Add retry logic with exponential backoff
+        let retries = 3;
+        let retryDelay = 250; // Start with 250ms delay
+
+        while (retries > 0) {
+            try {
+                // Call the API endpoint to resolve the tenant ID
+                const response = await fetch("/api/resolve-tenant", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        tenantEmail: tenantEmail,
+                    }),
+                    // Add timeout to prevent hanging requests
+                    signal: AbortSignal.timeout(5000),
+                });
+
+                // Check for network errors
+                if (!response) {
+                    throw new Error("No response received from tenant API");
+                }
+
+                // Handle HTTP error responses
+                if (!response.ok) {
+                    // Try to parse the error response
+                    try {
+                        const errorData = await response.json();
+                        console.error("Failed to resolve tenant ID:", errorData.error);
+                    } catch (parseError) {
+                        console.error(`Failed to resolve tenant ID: HTTP ${response.status}`);
+                    }
+
+                    // If the error is 404 Not Found, no need to retry
+                    if (response.status === 404) {
+                        console.warn(`Tenant not found for ${tenantEmail}`);
+                        return;
+                    }
+
+                    throw new Error(`HTTP error ${response.status}`);
+                }
+
+                // Successfully got a response, parse it
+                const data = (await response.json()) as UIResolvedTenant;
+
+                if (data && data.firebaseTenantId) {
+                    const auth = getFirebaseAuth();
+                    auth.tenantId = data.firebaseTenantId;
+                    Env.firebase.providerType = data.provider ?? "oidc";
+                    console.log(`Tenant ID set to ${auth.tenantId}`);
+                    return data;
+                } else {
+                    console.error(`Invalid response format, missing tenantId for ${tenantEmail}`);
+                    return; // No need to retry for invalid response format
+                }
+            } catch (fetchError) {
+                // Only retry for network-related errors
+                if (retries > 1) {
+                    console.warn(`Tenant resolution failed, retrying in ${retryDelay}ms...`, fetchError);
+                    await new Promise((resolve) => setTimeout(resolve, retryDelay));
+                    retryDelay *= 2; // Exponential backoff
+                    retries--;
+                } else {
+                    throw fetchError; // Last retry failed, propagate error
+                }
+            }
+        }
+    } catch (error) {
+        // Final error handler
+        console.error("Error setting Firebase tenant:", error instanceof Error ? error.message : "Unknown error");
+
+        // Continue without tenant ID - authentication will work without multi-tenancy
+        // but the user will access the default tenant
+    }
+}
+
+export async function getFirebaseAuthToken(refresh?: boolean) {
+    const auth = getFirebaseAuth();
+    const user = auth.currentUser;
+    if (user) {
+        return user
+            .getIdToken(refresh)
+            .then((token) => {
+                Env.logger.info("Got Firebase token", {
+                    vertesia: {
+                        user_email: user.email,
+                        user_name: user.displayName,
+                        user_id: user.uid,
+                        refresh: refresh,
+                    },
+                });
+                return token;
+            })
+            .catch((err) => {
+                Env.logger.error("Failed to get Firebase token", {
+                    vertesia: {
+                        user_email: user.email,
+                        user_name: user.displayName,
+                        user_id: user.uid,
+                        refresh: refresh,
+                        error: err,
+                    },
+                });
+                console.error("Failed to get access token", err);
+                return null;
+            });
+    } else {
+        Env.logger.warn("No user found");
+        return Promise.resolve(null);
+    }
+}

package/src/session/auth/useAuthState.ts

@@ -0,0 +1,61 @@
+
+/**
+ * This hook is used to generate and verify state for OAuth2 authorization requests.
+ * @returns 
+ */
+
+import { useCallback } from "react";
+
+
+const AUTH_STATE_KEY = 'auth_state';
+const STATE_EXPIRY_KEY = 'auth_state_expiry';
+const STATE_TTL = 5 * 60 * 1000; // 5 min
+
+
+export function useAuthState() {
+    // Generate new state
+    const generateState = useCallback(() => {
+        const state = crypto.randomUUID();
+        const expiryTime = Date.now() + STATE_TTL;
+        
+        // Store state and expiry
+        sessionStorage.setItem(AUTH_STATE_KEY, state);
+        sessionStorage.setItem(STATE_EXPIRY_KEY, expiryTime.toString());
+        
+        return state;
+    }, []);
+
+    // Verify returned state
+    const verifyState = useCallback((returnedState: string | null): string | undefined => {
+        if (!returnedState) {
+            return 'Missing state';
+        }
+
+        const savedState = sessionStorage.getItem(AUTH_STATE_KEY);
+        const expiryTime = parseInt(sessionStorage.getItem(STATE_EXPIRY_KEY) || '0');
+        let reason: string | undefined;
+
+        // Verify state matches and hasn't expired
+        if (savedState !== returnedState) {
+            reason = `State mismatched (${savedState} !== ${returnedState})`;
+        } else if (Date.now() > expiryTime) {
+            reason = 'State expired';
+        } else {
+            reason = undefined; // No errors
+        }
+
+        // Clear stored state regardless of outcome
+        sessionStorage.removeItem(AUTH_STATE_KEY);
+        sessionStorage.removeItem(STATE_EXPIRY_KEY);
+
+        return reason;
+    }, []);
+
+    // Clear state (useful for cleanup)
+    const clearState = useCallback(() => {
+        sessionStorage.removeItem(AUTH_STATE_KEY);
+        sessionStorage.removeItem(STATE_EXPIRY_KEY);
+    }, []);
+
+    return { generateState, verifyState, clearState };
+}

package/src/session/index.ts

@@ -1 +1,6 @@
-// session impl
+export * from "./auth/composable";
+export * from "./auth/firebase";
+export * from "./TypeRegistry";
+export * from "./UserSession";
+export * from "./UserSessionProvider";
+export * from "./useUXTracking";

package/src/session/useUXTracking.tsx

@@ -0,0 +1,38 @@
+import { Env } from '@vertesia/ui/env';
+import { AuthTokenPayload } from '@vertesia/common';
+import { logEvent } from "firebase/analytics";
+import { getFirebaseAnalytics } from "./auth/firebase";
+
+export function useUXTracking() {
+
+    //identify user in monitoring and UX systems
+    const tagUserSession = async (user?: AuthTokenPayload) => {
+        const signupData = window.localStorage.getItem("composableSignupData");
+        if (!user) {
+            console.error('No user found -- skipping tagging');
+            return;
+        }
+
+        if (signupData) {
+            window.localStorage.removeItem("composableSignupData");
+        }
+    }
+
+    //send event to analytics and UX systems
+    const trackEvent = (eventName: string, eventProperties?: any) => {
+
+        if (!Env.isProd) {
+            console.debug('track event', eventName, eventProperties);
+        }
+
+        //GA via firebase
+        logEvent(getFirebaseAnalytics(), eventName, { ...eventProperties, debug_mode: !Env.isProd });
+
+    }
+
+    return {
+        tagUserSession,
+        trackEvent
+    }
+
+}