@proveanything/smartlinks-auth-ui 0.3.1 → 0.3.3

package/dist/index.js

@@ -14331,6 +14331,291 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
                                         }, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] }));
 };
 
+/**
+ * Helper functions for SmartlinksFrame
+ * Separated to avoid circular dependencies
+ */
+/**
+ * Compute admin status from collection/proof roles.
+ */
+function isAdminFromRoles(user, collection, proof) {
+    if (!user?.uid)
+        return false;
+    const proofRole = proof?.roles?.[user.uid];
+    if (proofRole === 'admin' || proofRole === 'owner')
+        return true;
+    const collectionRole = collection?.roles?.[user.uid];
+    if (collectionRole === 'admin' || collectionRole === 'owner')
+        return true;
+    return false;
+}
+/**
+ * Build iframe src URL with query parameters.
+ */
+function buildIframeSrc(baseUrl, params) {
+    const url = new URL(baseUrl);
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined) {
+            url.searchParams.set(key, value);
+        }
+    });
+    return url.toString();
+}
+
+/**
+ * SmartlinksFrame - React wrapper for embedding SmartLinks microapps.
+ *
+ * This component handles iframe creation and message passing for SmartLinks apps.
+ * It requires only collectionId and appId - the SDK handles URL discovery and API proxying.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - SDK resolves app URL automatically
+ * <SmartlinksFrame
+ *   collectionId="my-collection"
+ *   appId="warranty-app"
+ * />
+ *
+ * // With optional product context
+ * <SmartlinksFrame
+ *   collectionId="my-collection"
+ *   appId="warranty-app"
+ *   productId="product-123"
+ * />
+ * ```
+ */
+const SmartlinksFrame = ({ collectionId, appId, productId, proofId, version = 'stable', collection, product: _product, // Destructured but currently unused - kept for cache optimization
+proof, initialPath, onRouteChange, autoResize = true, minHeight, maxHeight, onReady, onError, className, style, }) => {
+    const iframeRef = React.useRef(null);
+    const [src, setSrc] = React.useState(null);
+    const [height, setHeight] = React.useState(minHeight || 400);
+    const [error, setError] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(true);
+    // Get auth context if available (optional - works without AuthProvider)
+    const authContext = React.useContext(AuthContext);
+    const user = authContext?.user ?? null;
+    // Compute isAdmin from collection/proof roles
+    const isAdmin = isAdminFromRoles(user ? { uid: user.uid } : null, collection, proof);
+    // Handle messages from iframe
+    const handleMessage = React.useCallback((event) => {
+        const data = event.data;
+        if (!data || typeof data !== 'object')
+            return;
+        // Handle resize messages
+        if (data.type === 'smartlinks:resize' && autoResize) {
+            let newHeight = data.payload?.height || data.height;
+            if (typeof newHeight === 'number') {
+                if (minHeight)
+                    newHeight = Math.max(newHeight, minHeight);
+                if (maxHeight)
+                    newHeight = Math.min(newHeight, maxHeight);
+                setHeight(newHeight);
+            }
+        }
+        // Handle route change messages
+        if (data.type === 'smartlinks-route-change' && onRouteChange) {
+            onRouteChange(data.path || '/', data.state || {});
+        }
+        // Handle ready message
+        if (data.type === 'smartlinks:ready') {
+            setIsLoading(false);
+            onReady?.();
+        }
+    }, [autoResize, minHeight, maxHeight, onRouteChange, onReady]);
+    // Set up message listener
+    React.useEffect(() => {
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [handleMessage]);
+    // Resolve app URL and set iframe src
+    React.useEffect(() => {
+        setError(null);
+        setIsLoading(true);
+        setSrc(null);
+        // Try to get app URL from collection apps config
+        const resolveAppUrl = async () => {
+            try {
+                // Use SDK to get collection data which may include apps config
+                const collectionData = await smartlinks__namespace.collection.get(collectionId);
+                const collectionAsAny = collectionData;
+                const apps = collectionAsAny.apps ?? [];
+                const app = apps.find((a) => a.id === appId);
+                if (!app?.url) {
+                    throw new Error(`App "${appId}" not found in collection "${collectionId}"`);
+                }
+                // Get the appropriate URL based on version
+                let baseUrl = app.url;
+                if (version === 'development' && app.versions?.development) {
+                    baseUrl = app.versions.development;
+                }
+                else if (version === 'stable' && app.versions?.stable) {
+                    baseUrl = app.versions.stable;
+                }
+                // Build iframe URL with context params
+                const iframeSrc = buildIframeSrc(baseUrl, {
+                    collectionId,
+                    appId,
+                    productId,
+                    proofId,
+                    isAdmin: isAdmin ? '1' : '0',
+                    dark: document.documentElement.classList.contains('dark') ? '1' : '0',
+                });
+                // Add initial path if provided
+                const finalSrc = initialPath
+                    ? `${iframeSrc}#${initialPath}`
+                    : iframeSrc;
+                setSrc(finalSrc);
+                setIsLoading(false);
+            }
+            catch (err) {
+                const errorMsg = err instanceof Error ? err.message : 'Failed to resolve app URL';
+                console.error('[SmartlinksFrame] Error:', errorMsg);
+                setError(errorMsg);
+                setIsLoading(false);
+                onError?.(err instanceof Error ? err : new Error(errorMsg));
+            }
+        };
+        resolveAppUrl();
+    }, [collectionId, appId, productId, proofId, version, initialPath, isAdmin, onError]);
+    // Calculate container style
+    const containerStyle = {
+        position: 'relative',
+        height: autoResize ? `${height}px` : '100%',
+        width: '100%',
+        ...style,
+    };
+    return (jsxRuntime.jsxs("div", { className: className, style: containerStyle, children: [error && (jsxRuntime.jsxs("div", { style: {
+                    padding: '0.5rem 1rem',
+                    backgroundColor: '#fee2e2',
+                    color: '#dc2626',
+                    borderBottom: '1px solid #fecaca',
+                    fontSize: '0.875rem',
+                }, children: ["Error: ", error] })), isLoading && !error && (jsxRuntime.jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100%',
+                    minHeight: minHeight || 200,
+                    color: '#6b7280',
+                }, children: "Loading..." })), src && (jsxRuntime.jsx("iframe", { ref: iframeRef, src: src, frameBorder: 0, width: "100%", height: "100%", allow: "camera;microphone;fullscreen;geolocation;identity-credentials-get", style: {
+                    display: isLoading ? 'none' : 'block',
+                    width: '100%',
+                    height: autoResize ? `${height}px` : '100%',
+                    border: 'none',
+                } }))] }));
+};
+
+/**
+ * Hook to detect if the current user is an admin of the collection or proof.
+ *
+ * Admin status is determined by checking if the user's UID exists in the
+ * `roles` object of either the collection or proof.
+ *
+ * @param collection - Collection object with optional roles
+ * @param proof - Proof object with optional roles
+ * @param user - Current authenticated user
+ * @returns boolean indicating admin status
+ */
+function useAdminDetection(collection, proof, user) {
+    return React.useMemo(() => {
+        if (!user?.uid)
+            return false;
+        // Check collection roles
+        if (collection?.roles && collection.roles[user.uid]) {
+            return true;
+        }
+        // Check proof roles (for proof-level admin)
+        if (proof?.roles && proof.roles[user.uid]) {
+            return true;
+        }
+        return false;
+    }, [collection?.roles, proof?.roles, user?.uid]);
+}
+
+/**
+ * Hook to handle iframe height management.
+ *
+ * Supports two modes:
+ * 1. Viewport-based: Calculates height based on iframe position and viewport
+ * 2. Content-based: Listens for smartlinks:resize messages from the iframe
+ *
+ * @param iframeRef - Ref to the iframe element
+ * @param options - Resize configuration options
+ * @returns Current calculated height in pixels
+ */
+function useIframeResize(iframeRef, options = {}) {
+    const { autoResize = true, minHeight, maxHeight } = options;
+    const [height, setHeight] = React.useState(0);
+    // Calculate height based on viewport position
+    const calculateHeight = React.useCallback(() => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        const container = iframe.parentElement;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        let calculatedHeight = Math.max(0, viewportHeight - rect.top);
+        // Apply constraints
+        if (minHeight !== undefined) {
+            calculatedHeight = Math.max(calculatedHeight, minHeight);
+        }
+        if (maxHeight !== undefined) {
+            calculatedHeight = Math.min(calculatedHeight, maxHeight);
+        }
+        setHeight(calculatedHeight);
+    }, [minHeight, maxHeight, iframeRef]);
+    // Handle viewport resize events
+    React.useEffect(() => {
+        if (!autoResize)
+            return;
+        // Initial calculation with multiple retries for late layout
+        calculateHeight();
+        const t1 = setTimeout(calculateHeight, 10);
+        const t2 = setTimeout(calculateHeight, 100);
+        const t3 = setTimeout(calculateHeight, 500);
+        const handleResize = () => calculateHeight();
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+        return () => {
+            clearTimeout(t1);
+            clearTimeout(t2);
+            clearTimeout(t3);
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, [autoResize, calculateHeight]);
+    // Listen for content-based resize messages from iframe
+    React.useEffect(() => {
+        const handleMessage = (event) => {
+            // Validate source is our iframe
+            if (iframeRef.current && event.source !== iframeRef.current.contentWindow) {
+                return;
+            }
+            const data = event.data;
+            // Handle smartlinks:resize message
+            if (data?._smartlinksIframeMessage && data?.type === 'smartlinks:resize') {
+                const contentHeight = data.payload?.height;
+                if (typeof contentHeight === 'number' && contentHeight > 0) {
+                    let newHeight = contentHeight;
+                    // Apply constraints
+                    if (minHeight !== undefined) {
+                        newHeight = Math.max(newHeight, minHeight);
+                    }
+                    if (maxHeight !== undefined) {
+                        newHeight = Math.min(newHeight, maxHeight);
+                    }
+                    setHeight(newHeight);
+                }
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [iframeRef, minHeight, maxHeight]);
+    return height;
+}
+
 // Re-import the constant since we can't import from types
 const KNOWN_PARAMS = new Set([
     'collectionId',
@@ -14401,12 +14686,12 @@ function useIframeMessages(iframeRef, options) {
         // Filter out known iframe params, keep only app-specific state
         const filteredState = {};
         Object.entries(context).forEach(([key, value]) => {
-            if (value != null && !KNOWN_PARAMS.has(key)) {
+            if (value != null && !KNOWN_PARAMS.has(key) && typeof value === 'string') {
                 filteredState[key] = value;
             }
         });
         Object.entries(state).forEach(([key, value]) => {
-            if (value != null && !KNOWN_PARAMS.has(key)) {
+            if (value != null && !KNOWN_PARAMS.has(key) && typeof value === 'string') {
                 filteredState[key] = value;
             }
         });
@@ -14422,7 +14707,7 @@ function useIframeMessages(iframeRef, options) {
         if ('_smartlinksCustomProxyRequest' in data && data._smartlinksCustomProxyRequest) {
             if (data.request === 'REDIRECT') {
                 const url = data.params?.url;
-                if (url) {
+                if (typeof url === 'string') {
                     window.location.href = url;
                 }
                 response.data = { success: true };
@@ -14544,9 +14829,20 @@ function useIframeMessages(iframeRef, options) {
                 try {
                     // Validate token using SDK
                     console.log('[SmartlinksFrame] Validating auth token...');
-                    await smartlinks__namespace.auth.verifyToken(token);
+                    if (typeof token === 'string') {
+                        await smartlinks__namespace.auth.verifyToken(token);
+                    }
+                    // Cast user to expected shape
+                    const userPayload = iframeUser;
+                    // Validate user object has required properties
+                    const authUser = {
+                        uid: userPayload?.uid || '',
+                        email: userPayload?.email,
+                        displayName: userPayload?.displayName,
+                        accountData: accountData || userPayload?.accountData,
+                    };
                     // Use AuthProvider's login to persist session
-                    await loginRef.current(token, iframeUser, accountData);
+                    await loginRef.current(token, authUser, accountData);
                     // Send acknowledgment
                     sendResponse(event.source, event.origin, {
                         type: 'smartlinks:authkit:login-acknowledged',
@@ -14702,257 +14998,6 @@ function useIframeMessages(iframeRef, options) {
     }, [iframeRef, handleRouteChange, handleStandardMessage, handleUpload, handleProxyRequest]);
 }
 
-/**
- * Hook to handle iframe height management.
- *
- * Supports two modes:
- * 1. Viewport-based: Calculates height based on iframe position and viewport
- * 2. Content-based: Listens for smartlinks:resize messages from the iframe
- *
- * @param iframeRef - Ref to the iframe element
- * @param options - Resize configuration options
- * @returns Current calculated height in pixels
- */
-function useIframeResize(iframeRef, options = {}) {
-    const { autoResize = true, minHeight, maxHeight } = options;
-    const [height, setHeight] = React.useState(0);
-    // Calculate height based on viewport position
-    const calculateHeight = React.useCallback(() => {
-        const iframe = iframeRef.current;
-        if (!iframe)
-            return;
-        const container = iframe.parentElement;
-        if (!container)
-            return;
-        const rect = container.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        let calculatedHeight = Math.max(0, viewportHeight - rect.top);
-        // Apply constraints
-        if (minHeight !== undefined) {
-            calculatedHeight = Math.max(calculatedHeight, minHeight);
-        }
-        if (maxHeight !== undefined) {
-            calculatedHeight = Math.min(calculatedHeight, maxHeight);
-        }
-        setHeight(calculatedHeight);
-    }, [minHeight, maxHeight, iframeRef]);
-    // Handle viewport resize events
-    React.useEffect(() => {
-        if (!autoResize)
-            return;
-        // Initial calculation with multiple retries for late layout
-        calculateHeight();
-        const t1 = setTimeout(calculateHeight, 10);
-        const t2 = setTimeout(calculateHeight, 100);
-        const t3 = setTimeout(calculateHeight, 500);
-        const handleResize = () => calculateHeight();
-        window.addEventListener('resize', handleResize);
-        window.addEventListener('orientationchange', handleResize);
-        return () => {
-            clearTimeout(t1);
-            clearTimeout(t2);
-            clearTimeout(t3);
-            window.removeEventListener('resize', handleResize);
-            window.removeEventListener('orientationchange', handleResize);
-        };
-    }, [autoResize, calculateHeight]);
-    // Listen for content-based resize messages from iframe
-    React.useEffect(() => {
-        const handleMessage = (event) => {
-            // Validate source is our iframe
-            if (iframeRef.current && event.source !== iframeRef.current.contentWindow) {
-                return;
-            }
-            const data = event.data;
-            // Handle smartlinks:resize message
-            if (data?._smartlinksIframeMessage && data?.type === 'smartlinks:resize') {
-                const contentHeight = data.payload?.height;
-                if (typeof contentHeight === 'number' && contentHeight > 0) {
-                    let newHeight = contentHeight;
-                    // Apply constraints
-                    if (minHeight !== undefined) {
-                        newHeight = Math.max(newHeight, minHeight);
-                    }
-                    if (maxHeight !== undefined) {
-                        newHeight = Math.min(newHeight, maxHeight);
-                    }
-                    setHeight(newHeight);
-                }
-            }
-        };
-        window.addEventListener('message', handleMessage);
-        return () => window.removeEventListener('message', handleMessage);
-    }, [iframeRef, minHeight, maxHeight]);
-    return height;
-}
-
-/**
- * Hook to detect if the current user is an admin of the collection or proof.
- *
- * Admin status is determined by checking if the user's UID exists in the
- * `roles` object of either the collection or proof.
- *
- * @param collection - Collection object with optional roles
- * @param proof - Proof object with optional roles
- * @param user - Current authenticated user
- * @returns boolean indicating admin status
- */
-function useAdminDetection(collection, proof, user) {
-    return React.useMemo(() => {
-        if (!user?.uid)
-            return false;
-        // Check collection roles
-        if (collection?.roles && collection.roles[user.uid]) {
-            return true;
-        }
-        // Check proof roles (for proof-level admin)
-        if (proof?.roles && proof.roles[user.uid]) {
-            return true;
-        }
-        return false;
-    }, [collection?.roles, proof?.roles, user?.uid]);
-}
-
-/**
- * SmartlinksFrame - Parent-side iframe wrapper for embedding SmartLinks microapps.
- *
- * This component handles all bidirectional communication with the embedded iframe:
- * - API proxy requests (with optional caching)
- * - Authentication state synchronization (when inside AuthProvider)
- * - Deep linking / route changes
- * - Resize management
- * - File upload proxying
- *
- * Can be used with or without AuthProvider - authentication is optional.
- *
- * @example
- * ```tsx
- * // With authentication
- * <AuthProvider collectionId="my-collection">
- *   <SmartlinksFrame
- *     collectionId="my-collection"
- *     appId="warranty-app"
- *     appUrl="https://warranty.lovable.app"
- *     collection={collectionData}
- *   />
- * </AuthProvider>
- *
- * // Without authentication (public/anonymous access)
- * <SmartlinksFrame
- *   collectionId="my-collection"
- *   appId="info-app"
- *   appUrl="https://info-app.lovable.app"
- * />
- * ```
- */
-const SmartlinksFrame = ({ collectionId, appId, productId, proofId, appUrl, version = 'stable', collection, product, proof, initialPath, onRouteChange, autoResize = true, minHeight, maxHeight, onReady, onError, className, style, }) => {
-    const iframeRef = React.useRef(null);
-    // Get auth context if available (optional - SmartlinksFrame works without AuthProvider)
-    const authContext = React.useContext(AuthContext);
-    const user = authContext?.user ?? null;
-    const login = authContext?.login;
-    const logout = authContext?.logout;
-    // Compute isAdmin from collection/proof roles
-    const isAdmin = useAdminDetection(collection, proof, user);
-    // Handle resize
-    const height = useIframeResize(iframeRef, { autoResize, minHeight, maxHeight });
-    // Handle all iframe messages
-    useIframeMessages(iframeRef, {
-        collectionId,
-        productId,
-        proofId,
-        cachedData: { collection, product, proof, user },
-        login,
-        logout,
-        onRouteChange,
-        onError,
-    });
-    // Build iframe URL with all context params
-    const frameSrc = React.useMemo(() => {
-        const params = new URLSearchParams();
-        // Required context
-        params.set('collectionId', collectionId);
-        params.set('appId', appId);
-        // Optional context
-        if (productId)
-            params.set('productId', productId);
-        if (proofId)
-            params.set('proofId', proofId);
-        if (isAdmin)
-            params.set('isAdmin', 'true');
-        // Dark mode from collection
-        const isDark = collection?.dark ?? false;
-        params.set('dark', isDark ? '1' : '0');
-        // Include parent URL for downstream redirects/context
-        try {
-            params.set('parentUrl', window.location.href);
-        }
-        catch {
-            // Ignore if can't access location
-        }
-        // Encode theme from collection if available
-        if (collection) {
-            try {
-                const themeData = {
-                    p: collection.primaryColor,
-                    s: collection.secondaryColor,
-                    m: collection.dark ? 'd' : 'l',
-                };
-                // Only include if we have meaningful data
-                if (themeData.p || themeData.s) {
-                    params.set('theme', btoa(JSON.stringify(themeData)));
-                }
-            }
-            catch {
-                // Ignore encoding errors
-            }
-        }
-        // Determine base URL
-        let base = appUrl;
-        // If appUrl doesn't look like a full URL, construct from smartlinks.app
-        if (!appUrl.startsWith('http')) {
-            base = `https://smartlinks.app/apps/${appId}/${version}`;
-        }
-        // Clean up base URL
-        base = base.replace(/#\/?$/, ''); // Remove trailing hash
-        if (base.endsWith('/')) {
-            base = base.slice(0, -1);
-        }
-        // Build hash path
-        let hashPath = initialPath || '';
-        if (hashPath && !hashPath.startsWith('/')) {
-            hashPath = '/' + hashPath;
-        }
-        if (hashPath === '/') {
-            hashPath = '';
-        }
-        // Construct final URL: base#/path?params
-        return `${base}/#/${hashPath}?${params.toString()}`.replace('/#//', '/#/');
-    }, [
-        collectionId,
-        appId,
-        productId,
-        proofId,
-        appUrl,
-        version,
-        initialPath,
-        isAdmin,
-        collection,
-    ]);
-    // Calculate container style
-    const containerStyle = {
-        height: autoResize && height > 0 ? `${height}px` : '100%',
-        width: '100%',
-        ...style,
-    };
-    return (jsxRuntime.jsx("div", { className: className, style: containerStyle, children: jsxRuntime.jsx("iframe", { ref: iframeRef, src: frameSrc, frameBorder: 0, width: "100%", height: "100%", allow: "camera;microphone;fullscreen;geolocation;identity-credentials-get", onLoad: onReady, style: {
-                display: 'block',
-                width: '100%',
-                height: '100%',
-                border: 0,
-            } }) }));
-};
-
 const ProtectedRoute = ({ children, fallback, redirectTo, }) => {
     const { isAuthenticated, isLoading } = useAuth();
     // Show loading state
@@ -15031,12 +15076,14 @@ exports.ProtectedRoute = ProtectedRoute;
 exports.SchemaFieldRenderer = SchemaFieldRenderer;
 exports.SmartlinksAuthUI = SmartlinksAuthUI;
 exports.SmartlinksFrame = SmartlinksFrame;
+exports.buildIframeSrc = buildIframeSrc;
 exports.getDefaultAuthKitId = getDefaultAuthKitId;
 exports.getEditableFields = getEditableFields;
 exports.getErrorCode = getErrorCode;
 exports.getErrorStatusCode = getErrorStatusCode;
 exports.getFriendlyErrorMessage = getFriendlyErrorMessage;
 exports.getRegistrationFields = getRegistrationFields;
+exports.isAdminFromRoles = isAdminFromRoles;
 exports.isAuthError = isAuthError;
 exports.isConflictError = isConflictError;
 exports.isRateLimitError = isRateLimitError;