@proveanything/smartlinks-auth-ui 0.3.0 → 0.3.1

package/dist/index.js

@@ -11447,6 +11447,7 @@ const tokenStorage = {
     },
 };
 
+// Export context for optional usage (e.g., SmartlinksFrame can work without AuthProvider)
 const AuthContext = React.createContext(undefined);
 const AuthProvider = ({ children, proxyMode = false, accountCacheTTL = 5 * 60 * 1000, preloadAccountInfo = false, 
 // Token refresh settings
@@ -14330,6 +14331,628 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
                                         }, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] }));
 };
 
+// Re-import the constant since we can't import from types
+const KNOWN_PARAMS = new Set([
+    'collectionId',
+    'appId',
+    'productId',
+    'proofId',
+    'isAdmin',
+    'dark',
+    'parentUrl',
+    'theme',
+    'lang',
+]);
+/**
+ * Hook to handle all iframe postMessage communication.
+ *
+ * Handles:
+ * - Route changes (deep linking)
+ * - API proxy requests
+ * - Auth messages (login/logout)
+ * - File uploads (chunked)
+ * - Redirects
+ *
+ * @param iframeRef - Ref to the iframe element
+ * @param options - Configuration and callbacks
+ */
+function useIframeMessages(iframeRef, options) {
+    const { collectionId, productId, proofId, cachedData, login, logout, onRouteChange, onError } = options;
+    // Track uploads in progress
+    const uploadsRef = React.useRef(new Map());
+    // Track initial load to skip first route change
+    const isInitialLoadRef = React.useRef(true);
+    // Stable refs to avoid dependency issues
+    const cachedDataRef = React.useRef(cachedData);
+    const onRouteChangeRef = React.useRef(onRouteChange);
+    const onErrorRef = React.useRef(onError);
+    const loginRef = React.useRef(login);
+    const logoutRef = React.useRef(logout);
+    // Keep refs in sync
+    React.useEffect(() => {
+        cachedDataRef.current = cachedData;
+    }, [cachedData]);
+    React.useEffect(() => {
+        onRouteChangeRef.current = onRouteChange;
+    }, [onRouteChange]);
+    React.useEffect(() => {
+        onErrorRef.current = onError;
+    }, [onError]);
+    React.useEffect(() => {
+        loginRef.current = login;
+    }, [login]);
+    React.useEffect(() => {
+        logoutRef.current = logout;
+    }, [logout]);
+    // Send response back to iframe
+    const sendResponse = React.useCallback((source, origin, message) => {
+        if (source && 'postMessage' in source) {
+            source.postMessage(message, origin);
+        }
+    }, []);
+    // Handle route change messages (deep linking)
+    const handleRouteChange = React.useCallback((data) => {
+        // Skip initial load to prevent duplicating path
+        if (isInitialLoadRef.current) {
+            isInitialLoadRef.current = false;
+            return;
+        }
+        const { context = {}, state = {}, path = '' } = data;
+        // 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)) {
+                filteredState[key] = value;
+            }
+        });
+        Object.entries(state).forEach(([key, value]) => {
+            if (value != null && !KNOWN_PARAMS.has(key)) {
+                filteredState[key] = value;
+            }
+        });
+        onRouteChangeRef.current?.(path, filteredState);
+    }, []);
+    // Handle API proxy requests
+    const handleProxyRequest = React.useCallback(async (data, event) => {
+        const response = {
+            _smartlinksProxyResponse: true,
+            id: data.id,
+        };
+        // Handle custom proxy requests (redirects, etc.)
+        if ('_smartlinksCustomProxyRequest' in data && data._smartlinksCustomProxyRequest) {
+            if (data.request === 'REDIRECT') {
+                const url = data.params?.url;
+                if (url) {
+                    window.location.href = url;
+                }
+                response.data = { success: true };
+                sendResponse(event.source, event.origin, response);
+                return;
+            }
+        }
+        // Regular proxy request - narrow the type
+        const proxyData = data;
+        try {
+            console.log('[SmartlinksFrame] Proxy request:', proxyData.method, proxyData.path);
+            const path = proxyData.path.startsWith('/') ? proxyData.path.slice(1) : proxyData.path;
+            const cached = cachedDataRef.current;
+            // Check for cached data matches on GET requests
+            if (proxyData.method === 'GET') {
+                // Collection request
+                if (path.includes('/collection/') && cached.collection) {
+                    const collectionIdMatch = path.match(/collection\/([^/]+)/);
+                    if (collectionIdMatch && collectionIdMatch[1] === collectionId) {
+                        response.data = JSON.parse(JSON.stringify(cached.collection));
+                        sendResponse(event.source, event.origin, response);
+                        return;
+                    }
+                }
+                // Product request
+                if (path.includes('/product/') && cached.product && productId) {
+                    const productIdMatch = path.match(/product\/([^/]+)/);
+                    if (productIdMatch && productIdMatch[1] === productId) {
+                        response.data = JSON.parse(JSON.stringify(cached.product));
+                        sendResponse(event.source, event.origin, response);
+                        return;
+                    }
+                }
+                // Proof request
+                if (path.includes('/proof/') && cached.proof && proofId) {
+                    const proofIdMatch = path.match(/proof\/([^/]+)/);
+                    if (proofIdMatch && proofIdMatch[1] === proofId) {
+                        response.data = JSON.parse(JSON.stringify(cached.proof));
+                        sendResponse(event.source, event.origin, response);
+                        return;
+                    }
+                }
+                // Account request
+                if (path.includes('/account') && cached.user) {
+                    response.data = JSON.parse(JSON.stringify({
+                        ...cached.user.accountData,
+                        uid: cached.user.uid,
+                        email: cached.user.email,
+                        displayName: cached.user.displayName,
+                    }));
+                    sendResponse(event.source, event.origin, response);
+                    return;
+                }
+            }
+            // Forward to actual API using SDK's internal request method
+            // Note: The SDK should handle this via proxy mode, but we're explicitly forwarding
+            const apiMethod = proxyData.method.toLowerCase();
+            // Use the SDK's http utilities
+            let result;
+            switch (apiMethod) {
+                case 'get':
+                    result = await smartlinks__namespace.http?.get?.(path) ??
+                        await fetch(`/api/v1/${path}`).then(r => r.json());
+                    break;
+                case 'post':
+                    result = await smartlinks__namespace.http?.post?.(path, proxyData.body) ??
+                        await fetch(`/api/v1/${path}`, { method: 'POST', body: JSON.stringify(proxyData.body) }).then(r => r.json());
+                    break;
+                case 'put':
+                    result = await smartlinks__namespace.http?.put?.(path, proxyData.body) ??
+                        await fetch(`/api/v1/${path}`, { method: 'PUT', body: JSON.stringify(proxyData.body) }).then(r => r.json());
+                    break;
+                case 'patch':
+                    result = await smartlinks__namespace.http?.patch?.(path, proxyData.body) ??
+                        await fetch(`/api/v1/${path}`, { method: 'PATCH', body: JSON.stringify(proxyData.body) }).then(r => r.json());
+                    break;
+                case 'delete':
+                    result = await smartlinks__namespace.http?.delete?.(path) ??
+                        await fetch(`/api/v1/${path}`, { method: 'DELETE' }).then(r => r.json());
+                    break;
+            }
+            response.data = result;
+        }
+        catch (err) {
+            console.error('[SmartlinksFrame] Proxy error:', err);
+            response.error = err?.message || 'Unknown error';
+            onErrorRef.current?.(err);
+        }
+        sendResponse(event.source, event.origin, response);
+    }, [collectionId, productId, proofId, sendResponse]);
+    // Handle standardized iframe messages (auth, resize, redirect)
+    const handleStandardMessage = React.useCallback(async (data, event) => {
+        console.log('[SmartlinksFrame] Iframe message:', data.type);
+        switch (data.type) {
+            case 'smartlinks:resize': {
+                // Handled by useIframeResize hook
+                break;
+            }
+            case 'smartlinks:redirect': {
+                const url = data.payload?.url;
+                if (url && typeof url === 'string') {
+                    window.location.href = url;
+                }
+                break;
+            }
+            case 'smartlinks:authkit:login': {
+                const { token, user: iframeUser, accountData, messageId } = data.payload || {};
+                // If no login function available (no AuthProvider), just acknowledge
+                if (!loginRef.current) {
+                    console.log('[SmartlinksFrame] No AuthProvider - ignoring auth login');
+                    sendResponse(event.source, event.origin, {
+                        type: 'smartlinks:authkit:login-acknowledged',
+                        messageId,
+                        success: false,
+                        error: 'No AuthProvider available',
+                    });
+                    break;
+                }
+                try {
+                    // Validate token using SDK
+                    console.log('[SmartlinksFrame] Validating auth token...');
+                    await smartlinks__namespace.auth.verifyToken(token);
+                    // Use AuthProvider's login to persist session
+                    await loginRef.current(token, iframeUser, accountData);
+                    // Send acknowledgment
+                    sendResponse(event.source, event.origin, {
+                        type: 'smartlinks:authkit:login-acknowledged',
+                        messageId,
+                        success: true,
+                    });
+                    console.log('[SmartlinksFrame] Auth login acknowledged');
+                }
+                catch (err) {
+                    console.error('[SmartlinksFrame] Auth login failed:', err);
+                    sendResponse(event.source, event.origin, {
+                        type: 'smartlinks:authkit:login-acknowledged',
+                        messageId,
+                        success: false,
+                        error: err?.message || 'Token validation failed',
+                    });
+                    onErrorRef.current?.(err);
+                }
+                break;
+            }
+            case 'smartlinks:authkit:logout': {
+                console.log('[SmartlinksFrame] Processing logout from iframe');
+                if (logoutRef.current) {
+                    await logoutRef.current();
+                }
+                else {
+                    console.log('[SmartlinksFrame] No AuthProvider - ignoring logout');
+                }
+                break;
+            }
+            case 'smartlinks:authkit:redirect': {
+                const url = data.payload?.url;
+                if (url && typeof url === 'string') {
+                    window.location.href = url;
+                }
+                break;
+            }
+        }
+    }, [sendResponse]);
+    // Handle chunked file uploads
+    const handleUpload = React.useCallback(async (data, event) => {
+        const uploads = uploadsRef.current;
+        switch (data.phase) {
+            case 'start': {
+                const startData = data;
+                uploads.set(startData.id, {
+                    chunks: [],
+                    fields: startData.fields,
+                    fileInfo: startData.fileInfo,
+                    path: startData.path,
+                });
+                break;
+            }
+            case 'chunk': {
+                const chunkData = data;
+                const upload = uploads.get(chunkData.id);
+                if (upload) {
+                    // Convert ArrayBuffer to Uint8Array and store as regular array buffer
+                    const uint8Array = new Uint8Array(chunkData.chunk);
+                    upload.chunks.push(uint8Array);
+                    sendResponse(event.source, event.origin, {
+                        _smartlinksProxyUpload: true,
+                        phase: 'ack',
+                        id: chunkData.id,
+                        seq: chunkData.seq,
+                    });
+                }
+                break;
+            }
+            case 'end': {
+                const endData = data;
+                const upload = uploads.get(endData.id);
+                if (!upload)
+                    break;
+                try {
+                    // Reconstruct file from chunks - convert to regular arrays for Blob
+                    const blobParts = upload.chunks.map(chunk => chunk.buffer.slice(0));
+                    const blob = new Blob(blobParts, {
+                        type: upload.fileInfo.type || 'application/octet-stream'
+                    });
+                    const formData = new FormData();
+                    upload.fields.forEach(([key, value]) => formData.append(key, value));
+                    formData.append(upload.fileInfo.key || 'file', blob, upload.fileInfo.name || 'upload.bin');
+                    // Upload via SDK or direct fetch
+                    const path = upload.path.startsWith('/') ? upload.path.slice(1) : upload.path;
+                    const baseUrl = smartlinks__namespace.getBaseUrl?.() || '/api/v1';
+                    const response = await fetch(`${baseUrl}/${path}`, {
+                        method: 'POST',
+                        body: formData,
+                        // Let browser set Content-Type with boundary
+                    });
+                    if (!response.ok) {
+                        throw new Error(`Upload failed: ${response.status}`);
+                    }
+                    const result = await response.json();
+                    sendResponse(event.source, event.origin, {
+                        _smartlinksProxyUpload: true,
+                        phase: 'done',
+                        id: endData.id,
+                        ok: true,
+                        data: result,
+                    });
+                }
+                catch (err) {
+                    console.error('[SmartlinksFrame] Upload failed:', err);
+                    sendResponse(event.source, event.origin, {
+                        _smartlinksProxyUpload: true,
+                        phase: 'done',
+                        id: endData.id,
+                        ok: false,
+                        error: err?.message || 'Upload failed',
+                    });
+                    onErrorRef.current?.(err);
+                }
+                uploads.delete(endData.id);
+                break;
+            }
+        }
+    }, [sendResponse]);
+    // Main message handler
+    React.useEffect(() => {
+        const handleMessage = async (event) => {
+            // Validate source is our iframe
+            if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
+                return;
+            }
+            const data = event.data;
+            if (!data || typeof data !== 'object')
+                return;
+            // Route changes (deep linking)
+            if (data.type === 'smartlinks-route-change') {
+                handleRouteChange(data);
+                return;
+            }
+            // Standardized iframe messages
+            if (data._smartlinksIframeMessage) {
+                await handleStandardMessage(data, event);
+                return;
+            }
+            // File upload proxy
+            if (data._smartlinksProxyUpload) {
+                await handleUpload(data, event);
+                return;
+            }
+            // API proxy requests
+            if (data._smartlinksProxyRequest) {
+                await handleProxyRequest(data, event);
+                return;
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [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
@@ -14407,6 +15030,7 @@ exports.FirebaseAuthUI = SmartlinksAuthUI;
 exports.ProtectedRoute = ProtectedRoute;
 exports.SchemaFieldRenderer = SchemaFieldRenderer;
 exports.SmartlinksAuthUI = SmartlinksAuthUI;
+exports.SmartlinksFrame = SmartlinksFrame;
 exports.getDefaultAuthKitId = getDefaultAuthKitId;
 exports.getEditableFields = getEditableFields;
 exports.getErrorCode = getErrorCode;
@@ -14420,5 +15044,8 @@ exports.isServerError = isServerError;
 exports.setDefaultAuthKitId = setDefaultAuthKitId;
 exports.sortFieldsByPlacement = sortFieldsByPlacement;
 exports.tokenStorage = tokenStorage;
+exports.useAdminDetection = useAdminDetection;
 exports.useAuth = useAuth;
+exports.useIframeMessages = useIframeMessages;
+exports.useIframeResize = useIframeResize;
 //# sourceMappingURL=index.js.map