@forge/react 11.9.0 → 11.9.1-experimental-60ea29e

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @forge/react
 
+## 11.9.1-experimental-60ea29e
+
+### Minor Changes
+
+- f058dd8: Expose Permissions API in @forge/bridge for Custom UI apps
+
+### Patch Changes
+
+- Updated dependencies [f058dd8]
+  - @forge/bridge@5.10.2-experimental-60ea29e
+
+## 11.9.1
+
+### Patch Changes
+
+- f57dd69: Bug fix for usePermissions hook
+- Updated dependencies [4205052]
+  - @forge/bridge@5.10.2
+
+## 11.9.1-next.1
+
+### Patch Changes
+
+- Updated dependencies [4205052]
+  - @forge/bridge@5.10.2-next.0
+
+## 11.9.1-next.0
+
+### Patch Changes
+
+- f57dd69: Bug fix for usePermissions hook
+
 ## 11.9.0
 
 ### Minor Changes

package/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2025 Atlassian
+Copyright (c) 2026 Atlassian
 Permission is hereby granted to use this software in accordance with the terms 
 and conditions outlined in the Atlassian Developer Terms, which can be found 
 at the following URL:

package/out/hooks/__test__/usePermissions.test.js

@@ -4,11 +4,25 @@ const react_hooks_1 = require("@testing-library/react-hooks");
 const usePermissions_1 = require("../usePermissions");
 const testUtils_1 = require("../../__test__/testUtils");
 // Mock @forge/bridge
-jest.mock('@forge/bridge', () => ({
-    view: {
-        getContext: jest.fn()
+jest.mock('@forge/bridge', () => {
+    // Set up window before requiring actual bridge to avoid initialization issues
+    if (typeof window === 'undefined') {
+        // @ts-ignore
+        global.window = global;
+        // @ts-ignore
+        global.window.__bridge = {
+            callBridge: jest.fn()
+        };
     }
-}));
+    const actualBridge = jest.requireActual('@forge/bridge');
+    return {
+        ...actualBridge,
+        view: {
+            ...actualBridge.view,
+            getContext: jest.fn()
+        }
+    };
+});
 const mockGetContext = jest.fn();
 describe('usePermissions', () => {
     beforeEach(() => {
@@ -363,6 +377,369 @@ describe('usePermissions', () => {
             });
         });
     });
+    describe('CSP path matching for client fetch', () => {
+        it('should allow any path when allowlist has no path', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: [
+                            'https://cdn.example.com',
+                            'https://cdn.example.com/',
+                            'https://cdn.example.com/any/path',
+                            'https://cdn.example.com/file.js'
+                        ]
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should use prefix matching when allowlist has trailing slash', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com/api/']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: [
+                            'https://cdn.example.com/api/',
+                            'https://cdn.example.com/api/users',
+                            'https://cdn.example.com/api/v1/data'
+                        ]
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should block paths outside prefix when using trailing slash', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com/api/']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: ['https://cdn.example.com/other', 'https://cdn.example.com/']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            expect(result.current.missingPermissions?.external?.fetch?.client).toEqual([
+                'https://cdn.example.com/other',
+                'https://cdn.example.com/'
+            ]);
+        });
+        it('should use exact matching when allowlist has no trailing slash', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com/bundle.js']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: ['https://cdn.example.com/bundle.js']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should block non-exact paths when using exact matching', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com/bundle.js']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: [
+                            'https://cdn.example.com/bundle.js/extra',
+                            'https://cdn.example.com/other.js',
+                            'https://cdn.example.com/'
+                        ]
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            expect(result.current.missingPermissions?.external?.fetch?.client).toEqual([
+                'https://cdn.example.com/bundle.js/extra',
+                'https://cdn.example.com/other.js',
+                'https://cdn.example.com/'
+            ]);
+        });
+    });
+    describe('Backend vs Client CSP differences', () => {
+        it('should allow any path for backend (hostname-only matching)', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            backend: ['https://api.example.com/specific/path']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        backend: [
+                            'https://api.example.com',
+                            'https://api.example.com/different/path',
+                            'https://api.example.com/specific/path'
+                        ]
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should demonstrate backend allows but client blocks different paths', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            backend: ['https://api.example.com/api/'],
+                            client: ['https://api.example.com/api/']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        backend: ['https://api.example.com/private/secret.json'],
+                        client: ['https://api.example.com/private/secret.json']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            // Backend should pass (hostname-only), client should fail (CSP path check)
+            expect(result.current.missingPermissions?.external?.fetch?.backend).toBeUndefined();
+            expect(result.current.missingPermissions?.external?.fetch?.client).toEqual([
+                'https://api.example.com/private/secret.json'
+            ]);
+        });
+    });
+    describe('CSP for resource types', () => {
+        it('should use CSP validation for images with paths', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        images: ['https://cdn.example.com/public/']
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    images: ['https://cdn.example.com/public/image.png', 'https://cdn.example.com/public/nested/image.jpg']
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should block images outside allowed directory', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        images: ['https://cdn.example.com/public/']
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    images: ['https://cdn.example.com/private/image.png', 'https://cdn.example.com/image.png']
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            expect(result.current.missingPermissions?.external?.images).toEqual([
+                'https://cdn.example.com/private/image.png',
+                'https://cdn.example.com/image.png'
+            ]);
+        });
+        it('should apply CSP to all resource types', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        scripts: ['https://cdn.example.com'],
+                        styles: ['https://cdn.example.com/css/'],
+                        fonts: ['https://fonts.example.com/font.woff2']
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    scripts: ['https://cdn.example.com/bundle.js'],
+                    styles: ['https://cdn.example.com/css/main.css'],
+                    fonts: ['https://fonts.example.com/font.woff2'] // Exact match
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+    });
+    describe('URL normalization and protocol handling', () => {
+        it('should handle URLs without protocol', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            backend: ['api.example.com']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        backend: ['https://api.example.com', 'api.example.com']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should handle CSP secure protocol upgrades (http -> https)', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['http://example.com']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: ['http://example.com', 'https://example.com']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should not allow protocol downgrades (https -> http)', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://example.com']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: ['http://example.com']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            expect(result.current.missingPermissions?.external?.fetch?.client).toEqual(['http://example.com']);
+        });
+    });
     describe('Edge cases', () => {
         it('should handle empty required permissions', async () => {
             const mockContext = {

package/out/hooks/usePermissions.d.ts

@@ -1,17 +1,5 @@
-/**
- * https://ecosystem-platform.atlassian.net/browse/DEPLOY-1411
- * reuse logic from @forge/api
- */
-/**
- * Resource types that can be loaded externally
- */
-declare const RESOURCE_TYPES: readonly ["fonts", "styles", "frames", "images", "media", "scripts"];
-export declare type ResourceType = (typeof RESOURCE_TYPES)[number];
-/**
- * Fetch types for external requests
- */
-declare const FETCH_TYPES: readonly ["backend", "client"];
-export declare type FetchType = (typeof FETCH_TYPES)[number];
+import { type PermissionRequirements, type MissingPermissions, type PermissionCheckResult, type ResourceType, type FetchType } from '@forge/bridge';
+export type { ResourceType, FetchType };
 export interface Permissions {
     scopes?: string[];
     external?: {
@@ -28,21 +16,7 @@ export interface Permissions {
     };
     content?: Record<string, unknown>;
 }
-/**
- * Required permissions for a component
- */
-export declare type PermissionRequirements = Permissions;
-/**
- * Missing permissions information
- */
-export declare type MissingPermissions = Permissions;
-/**
- * Permission check result
- */
-export interface PermissionCheckResult {
-    granted: boolean;
-    missing: MissingPermissions | null;
-}
+export type { PermissionRequirements, MissingPermissions, PermissionCheckResult };
 /**
  * Hook for checking permissions in Forge apps
  *
@@ -82,8 +56,7 @@ export interface PermissionCheckResult {
 export declare const usePermissions: (requiredPermissions: PermissionRequirements) => {
     hasPermission: boolean;
     isLoading: boolean;
-    missingPermissions: Permissions | null;
+    missingPermissions: PermissionRequirements | null;
     error: Error | null;
 };
-export {};
 //# sourceMappingURL=usePermissions.d.ts.map

package/out/hooks/usePermissions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePermissions.d.ts","sourceRoot":"","sources":["../../src/hooks/usePermissions.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAEH;;GAEG;AACH,QAAA,MAAM,cAAc,sEAAuE,CAAC;AAC5F,oBAAY,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D;;GAEG;AACH,QAAA,MAAM,WAAW,gCAAiC,CAAC;AACnD,oBAAY,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;YACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;SACnB,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG,WAAW,CAAC;AAEjD;;GAEG;AACH,oBAAY,kBAAkB,GAAG,WAAW,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAC;CACpC;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,cAAc,wBAAyB,sBAAsB;;;;;CA2JzE,CAAC"}
+{"version":3,"file":"usePermissions.d.ts","sourceRoot":"","sources":["../../src/hooks/usePermissions.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAGvB,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAExC,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;YACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;SACnB,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAGD,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,CAAC;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,cAAc,wBAAyB,sBAAsB;;;;;CAoEzE,CAAC"}

package/out/hooks/usePermissions.js

@@ -3,29 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePermissions = void 0;
 const react_1 = require("react");
 const bridge_1 = require("@forge/bridge");
-const minimatch_1 = require("minimatch");
-/**
- * https://ecosystem-platform.atlassian.net/browse/DEPLOY-1411
- * reuse logic from @forge/api
- */
-/**
- * Resource types that can be loaded externally
- */
-const RESOURCE_TYPES = ['fonts', 'styles', 'frames', 'images', 'media', 'scripts'];
-/**
- * Fetch types for external requests
- */
-const FETCH_TYPES = ['backend', 'client'];
-/**
- * Helper function to check if a URL matches any of the allowed patterns
- * Uses minimatch for robust pattern matching with wildcards
- */
-const matchesAllowedUrl = (url, allowedUrls) => {
-    return allowedUrls.some((allowedUrl) => {
-        // Use minimatch for pattern matching
-        return (0, minimatch_1.minimatch)(url, allowedUrl);
-    });
-};
 /**
  * Hook for checking permissions in Forge apps
  *
@@ -66,6 +43,10 @@ const usePermissions = (requiredPermissions) => {
     const [context, setContext] = (0, react_1.useState)();
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
+    const [permissionResult, setPermissionResult] = (0, react_1.useState)({
+        granted: false,
+        missing: null
+    });
     // Load context on mount
     (0, react_1.useEffect)(() => {
         const loadContext = async () => {
@@ -84,110 +65,37 @@ const usePermissions = (requiredPermissions) => {
         };
         void loadContext();
     }, []);
-    // Permission checking utilities
-    const permissionUtils = (0, react_1.useMemo)(() => {
-        if (!context?.permissions)
-            return null;
-        const { scopes, external = {} } = context.permissions;
-        const scopeArray = Array.isArray(scopes) ? scopes : Object.keys(scopes || {});
-        return {
-            hasScope: (scope) => scopeArray.includes(scope),
-            canFetchFrom: (type, url) => {
-                const fetchUrls = external.fetch?.[type];
-                if (!fetchUrls?.length)
-                    return false;
-                // Extract string URLs from fetch URLs array
-                const allowedUrls = fetchUrls
-                    .map((item) => {
-                    // If item is already a string, use it directly
-                    if (typeof item === 'string') {
-                        return item;
-                    }
-                    // If item has an address property, use that
-                    if ('address' in item && item.address) {
-                        return item.address;
-                    }
-                    // Otherwise, use the remote property (if it exists)
-                    return item.remote;
-                })
-                    .filter((url) => typeof url === 'string');
-                return matchesAllowedUrl(url, allowedUrls);
-            },
-            canLoadResource: (type, url) => {
-                const resourceUrls = external[type];
-                if (!resourceUrls?.length)
-                    return false;
-                const stringUrls = resourceUrls.filter((item) => typeof item === 'string');
-                return matchesAllowedUrl(url, stringUrls);
-            },
-            getScopes: () => scopeArray,
-            getExternalPermissions: () => external,
-            hasAnyPermissions: () => scopeArray.length > 0 || Object.keys(external).length > 0
-        };
-    }, [context?.permissions]);
-    // Check permissions
-    const permissionResult = (0, react_1.useMemo)(() => {
-        if (!requiredPermissions) {
-            return { granted: false, missing: null };
-        }
-        if (!permissionUtils) {
-            // If still loading or there's an error, return null for missing permissions
-            if (isLoading || error) {
-                return { granted: false, missing: null };
-            }
-            throw new Error('This feature is not available yet');
+    // Check permissions using shared utility
+    (0, react_1.useEffect)(() => {
+        // Skip if still loading context
+        if (isLoading) {
+            return;
         }
-        const missing = {};
-        let hasAllRequiredPermissions = true;
-        // Check scopes
-        if (requiredPermissions.scopes?.length) {
-            const missingScopes = requiredPermissions.scopes.filter((scope) => !permissionUtils.hasScope(scope));
-            if (missingScopes.length > 0) {
-                missing.scopes = missingScopes;
-                hasAllRequiredPermissions = false;
+        const checkPerms = async () => {
+            if (!requiredPermissions) {
+                setPermissionResult({ granted: false, missing: null });
+                return;
             }
-        }
-        // Check external permissions
-        if (requiredPermissions.external) {
-            const missingExternal = {};
-            // Check fetch permissions
-            if (requiredPermissions.external.fetch) {
-                const missingFetch = {};
-                FETCH_TYPES.forEach((type) => {
-                    const requiredUrls = requiredPermissions.external?.fetch?.[type];
-                    if (requiredUrls?.length) {
-                        const missingUrls = requiredUrls.filter((url) => !permissionUtils.canFetchFrom(type, url));
-                        if (missingUrls.length > 0) {
-                            missingFetch[type] = missingUrls;
-                            hasAllRequiredPermissions = false;
-                        }
-                    }
-                });
-                if (Object.keys(missingFetch).length > 0) {
-                    missingExternal.fetch = missingFetch;
+            if (!context?.permissions) {
+                // If context loaded but has no permissions, set error
+                if (context !== undefined) {
+                    setError(new Error('This feature is not available yet'));
+                    setPermissionResult({ granted: false, missing: null });
                 }
+                return;
             }
-            // Check resource permissions
-            RESOURCE_TYPES.forEach((type) => {
-                const requiredUrls = requiredPermissions.external?.[type];
-                if (requiredUrls?.length) {
-                    const missingUrls = requiredUrls.filter((url) => !permissionUtils.canLoadResource(type, url));
-                    if (missingUrls.length > 0) {
-                        missingExternal[type] = missingUrls;
-                        hasAllRequiredPermissions = false;
-                    }
-                }
-            });
-            if (Object.keys(missingExternal).length > 0) {
-                missing.external = missingExternal;
+            try {
+                setError(null); // Clear any previous errors
+                const result = await (0, bridge_1.checkPermissions)(requiredPermissions, context.permissions);
+                setPermissionResult(result);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err : new Error('Failed to check permissions'));
+                setPermissionResult({ granted: false, missing: null });
             }
-        }
-        // Note: Content permissions are not supported in the current RuntimePermissions type
-        return {
-            granted: hasAllRequiredPermissions,
-            missing: hasAllRequiredPermissions ? null : missing
         };
-    }, [permissionUtils, requiredPermissions]);
+        void checkPerms();
+    }, [context, requiredPermissions, isLoading]);
     return {
         hasPermission: permissionResult.granted,
         isLoading,