@vertesia/ui 0.24.0-dev.202601221707

package/src/session/auth/useAuthState.ts

@@ -0,0 +1,57 @@
+
+/**
+ * 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
+        }
+
+        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/auth/useCurrentTenant.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import { useUserSession } from "@vertesia/ui/session";
+
+interface TenantConfig {
+    tenantKey: string;
+    name: string;
+    domain: string[];
+    firebaseTenantId: string;
+    provider?: string;
+    logo?: string;
+}
+
+export function useCurrentTenant() {
+    const { user } = useUserSession();
+    const [currentTenant, setCurrentTenant] = useState<TenantConfig | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const loadCurrentTenant = async () => {
+            if (!user?.email) {
+                setCurrentTenant(null);
+                setIsLoading(false);
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/resolve-tenant', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        tenantEmail: user.email
+                    })
+                });
+
+                if (response.ok) {
+                    const tenantData = await response.json();
+                    if (tenantData) {
+                        // Convert the resolved tenant data to our TenantConfig format
+                        setCurrentTenant({
+                            tenantKey: tenantData.name || 'unknown',
+                            name: tenantData.label || tenantData.name || 'Unknown',
+                            domain: tenantData.domain || [],
+                            firebaseTenantId: tenantData.firebaseTenantId,
+                            provider: tenantData.provider,
+                            logo: tenantData.logo
+                        });
+                    } else {
+                        setCurrentTenant(null);
+                    }
+                } else {
+                    setCurrentTenant(null);
+                }
+            } catch (error) {
+                console.error('Error loading current tenant:', error);
+                setError('Failed to load tenant configuration');
+                setCurrentTenant(null);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadCurrentTenant();
+    }, [user?.email]);
+
+    return {
+        currentTenant,
+        isLoading,
+        error
+    };
+}

package/src/session/constants.ts

@@ -0,0 +1,2 @@
+export const LastSelectedAccountId_KEY = 'composableai.lastSelectedAccountId';
+export const LastSelectedProjectId_KEY = 'composableai.lastSelectedProjectId';

package/src/session/index.ts

@@ -0,0 +1,8 @@
+export * from "./auth/composable";
+export * from "./auth/useCurrentTenant";
+export * from "./auth/useAuthState";
+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
+    }
+
+}

package/src/shell/SplashScreen.tsx

@@ -0,0 +1,74 @@
+import { Transition } from "@headlessui/react";
+import { Fragment, ReactNode, useEffect, useState } from "react";
+import { useUserSession } from "@vertesia/ui/session";
+
+
+interface SplashScreenProps {
+    icon?: ReactNode;
+}
+export function SplashScreen({ icon: Icon }: SplashScreenProps) {
+    const { isLoading } = useUserSession();
+    const [show, setShow] = useState(true);
+
+    useEffect(() => {
+        if (!isLoading) {
+            setShow(false)
+        }
+        // setTimeout(() => {
+        //     setShow(false)
+        // }, 2000)
+    }, [isLoading])
+
+    // 300 500 700 1000
+    return (
+        <Transition
+            appear={true}
+            show={show}
+            as={Fragment}
+            unmount
+            leave="transition ease-in duration-500"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+        >
+            <div style={{ zIndex: 999999 }} className='fixed inset-x-0 inset-y-0'>
+                <div className="flex w-full h-full items-center justify-center">
+                    <div className="animate-[spin_4s_linear_infinite]">
+                        <div className='animate-pulse rounded-full bg-transparent'>
+                            {Icon || <LoadingIcon />}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    )
+}
+
+function LoadingIcon() {
+    const stopColor1 = "currentColor";
+    const stopColor2 = "currentColor";
+    // const stopColor1 = "#4F46E5";
+    // const stopColor2 = "#4F46E5";
+    return (
+        <svg
+            className="w-8 h-8 text-indigo-600"
+            viewBox="0 0 50 50"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <defs>
+                <linearGradient id="spinner-gradient" x1="1" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor={stopColor1} stopOpacity="1" />
+                    <stop offset="100%" stopColor={stopColor2} stopOpacity="0" />
+                </linearGradient>
+            </defs>
+            <circle
+                cx="25"
+                cy="25"
+                r="20"
+                stroke="url(#spinner-gradient)"
+                strokeWidth="5"
+                fill="none"
+                strokeLinecap="round"
+            />
+        </svg>
+    )
+}

package/src/shell/VertesiaShell.tsx

@@ -0,0 +1,29 @@
+import { ThemeProvider, ToastProvider } from "@vertesia/ui/core";
+import { UserPermissionProvider } from "@vertesia/ui/features";
+import { UserSessionProvider } from "@vertesia/ui/session";
+import { SplashScreen } from "./SplashScreen";
+import { SigninScreen } from "./login/SigninScreen";
+import { ReactNode } from "react";
+
+
+interface VertesiaShellProps {
+    children: React.ReactNode;
+    lightLogo?: string;
+    darkLogo?: string;
+    loadingIcon?: ReactNode;
+}
+export function VertesiaShell({ children, lightLogo, darkLogo, loadingIcon }: VertesiaShellProps) {
+    return (
+        <ToastProvider>
+            <UserSessionProvider>
+                <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+                    <SplashScreen icon={loadingIcon} />
+                    <SigninScreen allowedPrefix="/shared/" lightLogo={lightLogo} darkLogo={darkLogo} />
+                    <UserPermissionProvider>
+                        {children}
+                    </UserPermissionProvider>
+                </ThemeProvider>
+            </UserSessionProvider>
+        </ToastProvider>
+    )
+}

package/src/shell/apps/AppInstallationProvider.tsx

@@ -0,0 +1,22 @@
+import { AppInstallationWithManifest } from "@vertesia/common";
+import { createContext, ReactNode, useContext } from "react";
+
+
+export const AppInstallationContext = createContext<AppInstallationWithManifest | null>(null);
+
+export function AppInstallationProvider({ installation, children }: { installation: AppInstallationWithManifest, children: ReactNode }) {
+    return (
+        <AppInstallationContext.Provider value={installation}>
+            {children}
+        </AppInstallationContext.Provider>
+    )
+}
+
+/**
+ * Get the current app installation obejct when called in an app context otheriwse returns null
+ */
+export function useAppInstallation() {
+    return useContext(AppInstallationContext);
+}
+
+

package/src/shell/apps/AppProjectSelector.tsx

@@ -0,0 +1,58 @@
+import { ProjectRef, RequireAtLeastOne } from "@vertesia/common";
+import { VSelectBox, useFetch } from "@vertesia/ui/core";
+import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
+import { useState } from "react";
+
+interface AppProjectSelectorProps {
+    app: RequireAtLeastOne<{ id?: string, name?: string }, 'id' | 'name'>;
+    onChange?: (value: ProjectRef) => void | boolean;
+    placeholder?: string;
+}
+export function AppProjectSelector({ app, onChange, placeholder }: AppProjectSelectorProps) {
+    const { client, project } = useUserSession();
+    const { data: projects, error } = useFetch(() => {
+        return client.apps.getAppInstallationProjects(app);
+    }, [app.id, app.name])
+
+    const _onChange = (project: ProjectRef) => {
+        if (onChange) {
+            if (!onChange(project)) {
+                // if onChange returns true then the defualt on change is called
+                return;
+            }
+        }
+        // default on change
+        localStorage.setItem(LastSelectedAccountId_KEY, project.account);
+        localStorage.setItem(LastSelectedProjectId_KEY + '-' + project.account, project.id);
+        window.location.reload();
+    }
+
+    if (error) {
+        return <span className='text-red-600'>Error: failed to fetch projects: {error.message}</span>
+    }
+    return <SelectProject placeholder={placeholder} initialValue={project?.id} projects={projects || []} onChange={_onChange} />
+}
+
+interface SelectProjectProps {
+    initialValue?: string
+    projects: ProjectRef[]
+    onChange: (value: ProjectRef) => void
+    placeholder?: string;
+}
+function SelectProject({ initialValue, projects, onChange, placeholder = "Select Project" }: Readonly<SelectProjectProps>) {
+    const [value, setValue] = useState<ProjectRef | undefined>();
+    const _onChange = (value: ProjectRef) => {
+        setValue(value)
+        onChange(value)
+    }
+    let actualValue = !value && initialValue ? projects.find(p => p.id === initialValue) : value;
+    return (
+        <VSelectBox
+            by="id"
+            value={actualValue}
+            options={projects}
+            optionLabel={(option) => option.name}
+            placeholder={placeholder}
+            onChange={_onChange} />
+    )
+}

package/src/shell/apps/StandaloneApp.tsx

@@ -0,0 +1,174 @@
+import { AppInstallationWithManifest, ProjectRef } from "@vertesia/common";
+import { Center, useFetch, VSelectBox } from "@vertesia/ui/core";
+import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
+import { LockIcon } from "lucide-react";
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from "react";
+import { AppInstallationProvider } from "./AppInstallationProvider";
+
+
+interface StandaloneAppProps {
+    /**
+     * The app name. 
+     * The name must be the name used to register the app in Vertesia. It will be used to check if thre user has access to the app.
+     * 
+     * Also, this component is providing an AppInfo context that can be retrieved using the useAppInfo() hook.
+     */
+    name: string;
+
+    /**
+     * A react element to display if the access is denied to the app.
+     * If not specified a simple message will be displayed
+     */
+    AccessDenied?: ComponentType<AccessDeniedMessageProps>;
+
+    children: ReactNode;
+}
+export function StandaloneApp({ name, AccessDenied = AccessDeniedMessage, children }: StandaloneAppProps) {
+    return name ? (
+        <StandaloneAppImpl name={name} AccessDenied={AccessDenied}>{children}</StandaloneAppImpl>
+    ) : (
+        <UnknownAppName />
+    )
+}
+export function StandaloneAppImpl({ name, AccessDenied = AccessDeniedMessage, children }: StandaloneAppProps) {
+    const { authToken, client } = useUserSession();
+    const [installation, setInstallation] = useState<AppInstallationWithManifest | null>(null)
+    const [state, setState] = useState<"loading" | "error" | "loaded">("loading");
+
+    useEffect(() => {
+        if (!authToken) {
+            setState("loading");
+        } else {
+            const isAppVisible = authToken.apps.includes(name);
+            if (isAppVisible) {
+                client.apps.getAppInstallationByName(name).then(inst => {
+                    if (!inst) {
+                        console.log(`App ${name} not found!`);
+                        setState("error");
+                    } else {
+                        setState("loaded");
+                        setInstallation(inst);
+                    }
+                });
+            } else {
+                setState("error");
+            }
+        }
+    }, [name, authToken]);
+
+    if (state === "loading") {
+        return null;
+    } else if (state === "error") {
+        return <AccessDenied name={name} />
+    } else if (installation) {
+        return <AppInstallationProvider installation={installation}>
+            {children}
+        </AppInstallationProvider>
+    }
+}
+
+interface AccessDeniedMessageProps {
+    name: string;
+}
+
+function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
+    const { project, accounts, client } = useUserSession();
+    const [selectedAccountId, setSelectedAccountId] = useState<string | undefined>();
+
+    // Fetch all projects where the app is installed across all organizations
+    const { data: allProjects } = useFetch(() => {
+        return client.apps.getAppInstallationProjects({ name });
+    }, [name]);
+
+    // Group projects by organization
+    const { projectsByOrg, orgOptions } = useMemo(() => {
+        if (!allProjects || !accounts) return { projectsByOrg: {}, orgOptions: [] };
+
+        const grouped: Record<string, ProjectRef[]> = {};
+        for (const p of allProjects) {
+            if (!grouped[p.account]) {
+                grouped[p.account] = [];
+            }
+            grouped[p.account].push(p);
+        }
+
+        // Only show orgs that have projects with the app installed
+        const orgsWithProjects = accounts.filter(a => grouped[a.id]?.length > 0);
+
+        return { projectsByOrg: grouped, orgOptions: orgsWithProjects };
+    }, [allProjects, accounts]);
+
+    // Auto-select first org if not selected
+    useEffect(() => {
+        if (!selectedAccountId && orgOptions.length > 0) {
+            setSelectedAccountId(orgOptions[0].id);
+        }
+    }, [orgOptions, selectedAccountId]);
+
+    const onProjectChange = (selected: ProjectRef) => {
+        localStorage.setItem(LastSelectedAccountId_KEY, selected.account);
+        localStorage.setItem(LastSelectedProjectId_KEY + '-' + selected.account, selected.id);
+        window.location.reload();
+    };
+
+    const filteredProjects = selectedAccountId ? (projectsByOrg[selectedAccountId] || []) : [];
+    const selectedOrg = orgOptions.find(a => a.id === selectedAccountId);
+
+    return (
+        <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
+            <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
+            <div className="text-xl font-semibold">Access Denied</div>
+            <div className="mt-2 text-sm text-gray-500">
+                You don&apos;t have permission to view the <span className="font-semibold">{name}</span> app in project: <span className="font-semibold">&laquo;{project?.name}&raquo;</span>.
+            </div>
+            {orgOptions.length === 0 && allProjects !== undefined && (
+                <div className="mt-4 text-sm text-gray-500">
+                    This app is not installed in any project you have access to.
+                </div>
+            )}
+            {orgOptions.length > 0 && (
+                <div className="mt-4 flex flex-row gap-4 items-end">
+                    {orgOptions.length > 1 && (
+                        <div>
+                            <div className="text-sm text-gray-500 mb-2">Organization</div>
+                            <VSelectBox
+                                by="id"
+                                value={selectedOrg}
+                                options={orgOptions}
+                                optionLabel={(option) => option.name}
+                                placeholder="Select Organization"
+                                onChange={(org) => setSelectedAccountId(org.id)}
+                            />
+                        </div>
+                    )}
+                    <div>
+                        {orgOptions.length > 1 && <div className="text-sm text-gray-500 mb-2">Project</div>}
+                        <VSelectBox
+                            by="id"
+                            value={undefined}
+                            options={filteredProjects}
+                            optionLabel={(option) => option.name}
+                            placeholder="Select Project"
+                            onChange={onProjectChange}
+                        />
+                    </div>
+                </div>
+            )}
+        </Center>
+    )
+}
+
+function UnknownAppName() {
+    return (
+        <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
+            <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
+            <div className="text-xl font-semibold">Application not registered</div>
+            <div className="mt-2 text-sm text-gray-500">
+                Before starting to code a Vertesia application you must register an application manifest
+                in Vertesia Studio then install it in one or more projects.
+                <p />
+                Then use the created app name as a parameter to <code>&lt;StandaloneApp name=&quot;your-app-name&quot;&gt;</code> in the <code>src/main.tsx</code> file.
+            </div>
+        </Center>
+    )
+}

package/src/shell/apps/index.ts

@@ -0,0 +1,3 @@
+export * from "./AppInstallationProvider";
+export * from "./AppProjectSelector";
+export * from "./StandaloneApp";

package/src/shell/index.tsx

@@ -0,0 +1,7 @@
+export * from './login/InviteAcceptModal';
+export * from "./login/SigninScreen";
+export * from "./login/TerminalLogin";
+export * from "./login/UserSessionMenu";
+export * from "./utils";
+export * from './VertesiaShell';
+export * from "./apps/index";

package/src/shell/login/EnterpriseSigninButton.tsx

@@ -0,0 +1,109 @@
+import { Button, Input, Spinner, useToast } from "@vertesia/ui/core";
+import { Env } from "@vertesia/ui/env";
+import { getFirebaseAuth, setFirebaseTenant, useUXTracking } from "@vertesia/ui/session";
+import { GoogleAuthProvider, OAuthProvider, signInWithRedirect } from "firebase/auth";
+import { useState } from "react";
+
+
+function getProvider(redirectTo?: string) {
+    if (!Env.firebase) {
+        throw new Error("Firebase configuration is not available in the environment");
+    }
+    const providerType = Env.firebase.providerType;
+    switch (providerType) {
+        case "oidc":
+            return new OAuthProvider("oidc.main");
+        case "google": {
+            let redirectPath = redirectTo || window.location.pathname || '/';
+            if (redirectPath[0] !== '/') {
+                redirectPath = '/' + redirectPath;
+            }
+            const provider = new GoogleAuthProvider();
+            provider.addScope('profile');
+            provider.addScope('email');
+            provider.setCustomParameters({
+                prompt: 'select_account',
+                redirect_uri: window.location.origin + redirectPath
+            });
+            return provider;
+        }
+        case "microsoft":
+            return new OAuthProvider("microsoft.com");
+        case "github":
+            return new OAuthProvider("github.com");
+        default:
+            return new OAuthProvider("oidc.main");
+    }
+}
+
+interface EnterpriseSigninButtonProps {
+    redirectTo?: string;
+}
+export default function EnterpriseSigninButton({ redirectTo }: EnterpriseSigninButtonProps) {
+    const [isLoading, setIsLoading] = useState(false);
+    const { trackEvent } = useUXTracking();
+
+    const [email, setEmail] = useState<string | undefined>("");
+    const toast = useToast();
+
+    const signIn = async () => {
+        if (!email) return;
+
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            toast({
+                title: "Invalid email address",
+                status: "error",
+                duration: 5000,
+            });
+            return;
+        }
+        // Env.firebase.tenantEmail = email;
+        setIsLoading(true);
+        setFirebaseTenant(email).then((data) => {
+            if (!data) {
+                toast({
+                    title: "Tenant not found",
+                    status: "error",
+                    duration: 5000,
+                });
+                setIsLoading(false);
+                return;
+            }
+            localStorage.setItem("tenantName", data.name ?? "");
+            const provider = getProvider(redirectTo);
+            trackEvent("enterprise_signin", {
+                firebaseTenantName: data.name,
+            });
+            Env.logger.info('Enterprise single sign-in', {
+                vertesia: {
+                    email: email,
+                    firebaseTenantName: data.name,
+                    firebaseTenantId: data.firebaseTenantId,
+                },
+            });
+
+            signInWithRedirect(getFirebaseAuth(), provider);
+            setIsLoading(false);
+        });
+    };
+
+    return (
+        <>
+            <Input value={email} onChange={setEmail} placeholder="Enter your enterprise email" type="email" />
+            {
+                isLoading ? (
+                    <div className="w-full flex justify-center">
+                        <Spinner />
+                    </div>
+                ) : (
+                    <Button variant={"outline"}
+                        onClick={signIn}
+                        className="w-full mt-2 py-4 flex rounded-lg hover:shadow-sm transition duration-150 text-center">
+                        <span className="text-sm font-semibold">Continue with Enterprise SSO</span>
+                    </Button>
+                )
+            }
+        </>
+    );
+}