@squiz/resource-browser 3.1.1 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 3.2.0
+
+### Minor Changes
+
+-   ce4521d: Outdated token fix
+
+## 3.1.2
+
+### Patch Changes
+
+-   c1ebb09: format scope as expected for oAuth calls (space delimited)
+-   213ea12: change plugin render comparison to type not object ref
+
 ## 3.1.1
 
 ### Patch Changes

package/lib/Hooks/useAuth.js

@@ -6,20 +6,28 @@ const react_1 = require("react");
 const authUtils_1 = require("../utils/authUtils");
 const useAuth = (authConfig) => {
     const [authToken, setAuthToken] = (0, react_1.useState)((0, authUtils_1.getCookieValue)('authToken'));
-    const [isAuthenticated, setIsAuthenticated] = (0, react_1.useState)(!!(0, authUtils_1.getCookieValue)('authToken'));
+    const [isAuthenticated, setIsAuthenticated] = (0, react_1.useState)(!!authToken);
     const refreshAccessToken = (0, react_1.useCallback)(async () => {
-        const newToken = await (0, authUtils_1.refreshAccessToken)(authConfig);
-        setAuthToken(newToken);
-        setIsAuthenticated(!!newToken);
-        return newToken;
+        try {
+            const newToken = await (0, authUtils_1.refreshAccessToken)(authConfig);
+            setAuthToken(newToken);
+            setIsAuthenticated(!!newToken);
+            return newToken;
+        }
+        catch {
+            setAuthToken(null);
+            setIsAuthenticated(false);
+            throw new Error('Session expired. Please log in again.');
+        }
     }, [authConfig]);
     const handleLogin = (0, react_1.useCallback)(() => {
-        if (!authConfig?.redirectUrl && !authConfig?.authUrl && !authConfig?.scope) {
+        if (!authConfig?.redirectUrl || !authConfig?.authUrl) {
             console.error('Auth config is misconfigured');
             return;
         }
         const encodedRedirectUrl = encodeURIComponent(authConfig.redirectUrl);
-        const loginUrl = `${authConfig?.authUrl}?client_id=${authConfig?.clientId}&scope=${authConfig?.scope}&redirect_uri=${encodedRedirectUrl}&response_type=code&state=state`;
+        const scope = authConfig?.scope?.split(';').join(' '); // Saved in scope1;scope2;scope3 format, sent in scope1 scope2 scope3 format
+        const loginUrl = `${authConfig?.authUrl}?client_id=${authConfig?.clientId}&scope=${scope}&redirect_uri=${encodedRedirectUrl}&response_type=code&state=state`;
         const popup = window.open(loginUrl, 'Login', 'width=600,height=600');
         if (!popup) {
             console.error('Popup failed to open');
@@ -27,10 +35,12 @@ const useAuth = (authConfig) => {
         }
         const checkPopup = setInterval(() => {
             try {
-                if ((0, authUtils_1.getCookieValue)('authToken') && (0, authUtils_1.getCookieValue)('refreshToken')) {
+                const token = (0, authUtils_1.getCookieValue)('authToken');
+                const refreshToken = (0, authUtils_1.getCookieValue)('refreshToken');
+                if (token && refreshToken) {
                     clearInterval(checkPopup);
                     popup.close();
-                    setAuthToken((0, authUtils_1.getCookieValue)('authToken'));
+                    setAuthToken(token);
                     setIsAuthenticated(true);
                 }
             }
@@ -43,6 +53,25 @@ const useAuth = (authConfig) => {
             }
         }, 1000); // Check every second
     }, [authConfig]);
+    const syncAuthState = () => {
+        const token = (0, authUtils_1.getCookieValue)('authToken');
+        setAuthToken(token);
+        setIsAuthenticated(!!token);
+    };
+    (0, react_1.useEffect)(() => {
+        const handleTabChange = () => {
+            if (!document.hidden) {
+                syncAuthState();
+            }
+        };
+        syncAuthState();
+        document.addEventListener('visibilitychange', handleTabChange);
+        window.addEventListener('focus', syncAuthState);
+        return () => {
+            document.removeEventListener('visibilitychange', handleTabChange);
+            window.removeEventListener('focus', syncAuthState);
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         refreshAccessToken().catch(() => {
             setIsAuthenticated(false);

package/lib/Plugin/Plugin.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
-import { InlineType } from '../types';
+import { ResourceBrowserPluginType, InlineType } from '../types';
 /**
  *  This plugin component exsits to deal with React rules of Hooks stupidity.
  *
@@ -9,6 +9,7 @@ import { InlineType } from '../types';
  *  needs to render its UI etc.
  */
 export type PluginRenderType = ResourceBrowserInputProps & {
+    type: ResourceBrowserPluginType | null;
     render: boolean;
     inline: boolean;
     inlineType?: InlineType;

package/lib/index.css

@@ -4805,6 +4805,9 @@
   white-space: nowrap;
   border-width: 0;
 }
+.squiz-rb-scope .visible:not(.squiz-rb-plugin *) {
+  visibility: visible;
+}
 .squiz-rb-scope .fixed:not(.squiz-rb-plugin *) {
   position: fixed;
 }
@@ -5663,6 +5666,9 @@
   border: none;
   padding: 0;
 }
+.squiz-rb-scope .image-card:disabled:not(.squiz-rb-plugin *) {
+  cursor: not-allowed;
+}
 .squiz-rb-scope .image-card--selected:not(.squiz-rb-plugin *) {
   background-color: #e6f1fa;
 }
@@ -5727,6 +5733,9 @@
   margin: 0.25rem 0.5rem;
   border-bottom: 1px solid #e0e0e0;
 }
+.squiz-rb-scope .selection-list__item:first-child:not(.squiz-rb-plugin *) {
+  margin-top: 8px;
+}
 .squiz-rb-scope .selection-list__item:last-child:not(.squiz-rb-plugin *) {
   border-bottom: none;
 }
@@ -6164,6 +6173,7 @@
   margin: auto;
 }
 .squiz-rb-scope .image-info__title:not(.squiz-rb-plugin *) {
+  padding: 0 2.2rem;
   margin: 1rem 0;
   color: #3d3d3d;
 }
@@ -6172,6 +6182,7 @@
   color: #707070;
 }
 .squiz-rb-scope .image-info__details-list:not(.squiz-rb-plugin *) {
+  width: 270px;
   display: flex;
   flex-direction: column;
   margin: 1rem 0;
@@ -6186,10 +6197,11 @@
   display: flex;
 }
 .squiz-rb-scope .image-info__details-value:not(.squiz-rb-plugin *) {
+  margin-left: 20px;
   color: #3d3d3d;
 }
 .squiz-rb-scope .image-variant__list:not(.squiz-rb-plugin *) {
-  width: 250px;
+  width: 280px;
   margin-bottom: 1rem;
 }
 .squiz-rb-scope .image-variant__item:not(.squiz-rb-plugin *) {
@@ -6199,6 +6211,9 @@
   width: 100%;
   justify-content: space-between;
 }
+.squiz-rb-scope .selection-list__item:focus-visible:not(.squiz-rb-plugin *) {
+  outline-width: 0px;
+}
 .squiz-rb-scope .selection-list__item--selected .image-variant__checkmark:not(.squiz-rb-plugin *) {
   visibility: visible;
 }
@@ -6253,6 +6268,10 @@
     overflow-y: auto;
   }
 }
+.squiz-rb-scope .divider-container:not(.squiz-rb-plugin *) {
+  padding: 0 1.25rem;
+  width: 100%;
+}
 .squiz-rb-scope .resource-picker:not(.squiz-rb-plugin *) {
   display: grid;
   grid-template-columns: 24px 1fr;

package/lib/index.js

@@ -119,7 +119,7 @@ const ResourceBrowser = (props) => {
     }, [reloadSources]);
     // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", render: plugin === null, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, isOtherSourceValue: false, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
+        react_1.default.createElement(Plugin_1.PluginRender, { key: "default", type: null, render: plugin === null, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, isOtherSourceValue: false, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
                 return {
                     data: null,
                     error: null,
@@ -127,7 +127,7 @@ const ResourceBrowser = (props) => {
                 };
             }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }),
         plugins.map((thisPlugin) => {
-            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, inline: !!inline, inlineType: inlineType, ...props, value: value && source ? (value.sourceId === source.id ? value : null) : null, isOtherSourceValue: value && source ? (value.sourceId !== source.id ? true : false) : false, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }));
+            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, type: thisPlugin.type, render: thisPlugin.type === plugin?.type, inline: !!inline, inlineType: inlineType, ...props, value: value && source ? (value.sourceId === source.id ? value : null) : null, isOtherSourceValue: value && source ? (value.sourceId !== source.id ? true : false) : false, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }));
         })));
 };
 exports.ResourceBrowser = ResourceBrowser;

package/lib/utils/authUtils.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.refreshAccessToken = exports.logout = exports.setCookieValue = exports.getCookieValue = void 0;
 const getCookieValue = (name) => {
-    const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
-    return match ? match.pop() : null;
+    try {
+        const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
+        return match ? match.pop() : null;
+    }
+    catch (error) {
+        return null;
+    }
 };
 exports.getCookieValue = getCookieValue;
 const setCookieValue = (name, value) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.1.1",
+    "version": "3.2.0",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,

package/src/Hooks/useAuth.spec.tsx

@@ -14,7 +14,7 @@ describe('useAuth', () => {
         authUrl: 'https://auth.example.com',
         clientId: 'example-client-id',
         redirectUrl: 'https://example.com/callback',
-        scope: 'offline_access',
+        scope: 'offline',
     };
 
     beforeEach(() => {
@@ -107,7 +107,7 @@ describe('useAuth', () => {
         result.current.login();
 
         expect(window.open).toHaveBeenCalledWith(
-            `${authConfig.authUrl}?client_id=${authConfig.clientId}&scope=offline_access&redirect_uri=${encodeURIComponent(authConfig.redirectUrl)}&response_type=code&state=state`,
+            `${authConfig.authUrl}?client_id=${authConfig.clientId}&scope=offline&redirect_uri=${encodeURIComponent(authConfig.redirectUrl)}&response_type=code&state=state`,
             'Login',
             'width=600,height=600',
         );
@@ -126,6 +126,50 @@ describe('useAuth', () => {
         expect(popupMock.close).toHaveBeenCalled();
     });
 
+    it('splits the scope from dxp-console and sends in expected format (space delimited)', async () => {
+        jest.useFakeTimers();
+
+        const popupMock = {
+            closed: false,
+            close: jest.fn(),
+        } as unknown as Window;
+
+        jest.spyOn(window, 'open').mockImplementation(() => popupMock);
+        mockGetCookieValue.mockReturnValueOnce(null).mockReturnValueOnce('newAuthToken').mockReturnValueOnce('newRefreshToken');
+
+        const { result } = renderHook(() => useAuth({ ...authConfig, scope: 'offline;asset:read' }));
+
+        result.current.login();
+
+        expect(window.open).toHaveBeenCalledWith(
+            `${authConfig.authUrl}?client_id=${authConfig.clientId}&scope=offline asset:read&redirect_uri=${encodeURIComponent(authConfig.redirectUrl)}&response_type=code&state=state`,
+            'Login',
+            'width=600,height=600',
+        );
+    });
+
+    it('Works with an empty scope', async () => {
+        jest.useFakeTimers();
+
+        const popupMock = {
+            closed: false,
+            close: jest.fn(),
+        } as unknown as Window;
+
+        jest.spyOn(window, 'open').mockImplementation(() => popupMock);
+        mockGetCookieValue.mockReturnValueOnce(null).mockReturnValueOnce('newAuthToken').mockReturnValueOnce('newRefreshToken');
+
+        const { result } = renderHook(() => useAuth({ ...authConfig, scope: '' }));
+
+        result.current.login();
+
+        expect(window.open).toHaveBeenCalledWith(
+            `${authConfig.authUrl}?client_id=${authConfig.clientId}&scope=&redirect_uri=${encodeURIComponent(authConfig.redirectUrl)}&response_type=code&state=state`,
+            'Login',
+            'width=600,height=600',
+        );
+    });
+
     it('should refresh access token and update state', async () => {
         mockGetCookieValue.mockReturnValue('initialRefreshToken');
         mockRefreshAccessToken.mockResolvedValue('newAuthToken');
@@ -150,4 +194,104 @@ describe('useAuth', () => {
             expect(result.current.isAuthenticated).toBe(false);
         });
     });
+
+    it('should update state when the page gains focus', async () => {
+        const { result } = renderHook(() => useAuth(authConfig));
+
+        mockGetCookieValue.mockReturnValueOnce('focusedAuthToken');
+
+        act(() => {
+            window.dispatchEvent(new Event('focus'));
+        });
+
+        await waitFor(() => {
+            expect(result.current.authToken).toBe('focusedAuthToken');
+            expect(result.current.isAuthenticated).toBe(true);
+        });
+    });
+
+    it('should update state when the document becomes visible', async () => {
+        mockGetCookieValue.mockReturnValueOnce(null);
+        const { result } = renderHook(() => useAuth(authConfig));
+
+        mockGetCookieValue.mockReturnValue('visibleAuthToken');
+
+        Object.defineProperty(document, 'hidden', { configurable: true, value: false });
+
+        act(() => {
+            document.dispatchEvent(new Event('visibilitychange'));
+        });
+
+        await waitFor(() => {
+            expect(result.current.authToken).toBe('visibleAuthToken');
+            expect(result.current.isAuthenticated).toBe(true);
+        });
+    });
+
+    it('should clean up event listeners on unmount', async () => {
+        const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+
+        const { unmount } = renderHook(() => useAuth(authConfig));
+
+        unmount();
+
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('focus', expect.any(Function));
+    });
+
+    it('should log error when authConfig is misconfigured', async () => {
+        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        const invalidConfig = { clientId: 'example-client-id', scope: 'offline' };
+
+        // @ts-ignore
+        const { result } = renderHook(() => useAuth(invalidConfig));
+
+        result.current.login();
+
+        await waitFor(() => {
+            expect(consoleSpy).toHaveBeenCalledWith('Auth config is misconfigured');
+        });
+
+        consoleSpy.mockRestore();
+    });
+
+    it('should handle missing refreshToken when logging in', async () => {
+        jest.useFakeTimers();
+
+        const popupMock = {
+            closed: false,
+            close: jest.fn(),
+        } as unknown as Window;
+
+        jest.spyOn(window, 'open').mockImplementation(() => popupMock);
+        mockGetCookieValue.mockReturnValueOnce(null).mockReturnValueOnce('newAuthToken').mockReturnValueOnce(null);
+
+        const { result } = renderHook(() => useAuth(authConfig));
+
+        result.current.login();
+
+        act(() => {
+            mockGetCookieValue.mockReturnValue('newAuthToken');
+            jest.advanceTimersByTime(1000);
+            (popupMock as any).closed = true;
+        });
+
+        await waitFor(() => {
+            expect(result.current.authToken).toBe(null);
+            expect(result.current.isAuthenticated).toBe(false);
+        });
+
+        expect(popupMock.close).toHaveBeenCalled();
+    });
+
+    it('should throw an error when getCookieValue throws unexpectedly', () => {
+        jest.spyOn(authUtils, 'getCookieValue').mockImplementation(() => {
+            throw new Error('Unexpected error');
+        });
+        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        expect(() => renderHook(() => useAuth(authConfig))).toThrow('Unexpected error');
+
+        consoleSpy.mockRestore();
+    });
 });

package/src/Hooks/useAuth.ts

@@ -5,22 +5,29 @@ import { getCookieValue, refreshAccessToken as refreshTokenUtil } from '../utils
 
 export const useAuth = (authConfig: AuthenticationConfiguration | undefined) => {
     const [authToken, setAuthToken] = useState<string | null>(getCookieValue('authToken'));
-    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(!!getCookieValue('authToken'));
+    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(!!authToken);
 
     const refreshAccessToken = useCallback(async (): Promise<string> => {
-        const newToken = await refreshTokenUtil(authConfig);
-        setAuthToken(newToken);
-        setIsAuthenticated(!!newToken);
-        return newToken;
+        try {
+            const newToken = await refreshTokenUtil(authConfig);
+            setAuthToken(newToken);
+            setIsAuthenticated(!!newToken);
+            return newToken;
+        } catch {
+            setAuthToken(null);
+            setIsAuthenticated(false);
+            throw new Error('Session expired. Please log in again.');
+        }
     }, [authConfig]);
 
     const handleLogin = useCallback((): void => {
-        if (!authConfig?.redirectUrl && !authConfig?.authUrl && !authConfig?.scope) {
+        if (!authConfig?.redirectUrl || !authConfig?.authUrl) {
             console.error('Auth config is misconfigured');
             return;
         }
         const encodedRedirectUrl = encodeURIComponent(authConfig.redirectUrl);
-        const loginUrl = `${authConfig?.authUrl}?client_id=${authConfig?.clientId}&scope=${authConfig?.scope}&redirect_uri=${encodedRedirectUrl}&response_type=code&state=state`;
+        const scope = authConfig?.scope?.split(';').join(' '); // Saved in scope1;scope2;scope3 format, sent in scope1 scope2 scope3 format
+        const loginUrl = `${authConfig?.authUrl}?client_id=${authConfig?.clientId}&scope=${scope}&redirect_uri=${encodedRedirectUrl}&response_type=code&state=state`;
         const popup = window.open(loginUrl, 'Login', 'width=600,height=600');
 
         if (!popup) {
@@ -30,10 +37,12 @@ export const useAuth = (authConfig: AuthenticationConfiguration | undefined) =>
 
         const checkPopup = setInterval(() => {
             try {
-                if (getCookieValue('authToken') && getCookieValue('refreshToken')) {
+                const token = getCookieValue('authToken');
+                const refreshToken = getCookieValue('refreshToken');
+                if (token && refreshToken) {
                     clearInterval(checkPopup);
                     popup.close();
-                    setAuthToken(getCookieValue('authToken'));
+                    setAuthToken(token);
                     setIsAuthenticated(true);
                 }
             } catch (error) {
@@ -47,6 +56,29 @@ export const useAuth = (authConfig: AuthenticationConfiguration | undefined) =>
         }, 1000); // Check every second
     }, [authConfig]);
 
+    const syncAuthState = () => {
+        const token = getCookieValue('authToken');
+        setAuthToken(token);
+        setIsAuthenticated(!!token);
+    };
+
+    useEffect(() => {
+        const handleTabChange = () => {
+            if (!document.hidden) {
+                syncAuthState();
+            }
+        };
+        syncAuthState();
+
+        document.addEventListener('visibilitychange', handleTabChange);
+        window.addEventListener('focus', syncAuthState);
+
+        return () => {
+            document.removeEventListener('visibilitychange', handleTabChange);
+            window.removeEventListener('focus', syncAuthState);
+        };
+    }, []);
+
     useEffect(() => {
         refreshAccessToken().catch(() => {
             setIsAuthenticated(false);

package/src/Plugin/Plugin.spec.tsx

@@ -19,6 +19,7 @@ describe('Plugin', () => {
 
     it('Does render ResourceBrowserInput if render is true', async () => {
         const props = {
+            type: null,
             modalTitle: 'Asset picker',
             value: null,
             isOtherSourceValue: false,
@@ -52,6 +53,7 @@ describe('Plugin', () => {
 
     it('Does render ResourceBrowserInlineButton if inline is true', async () => {
         const props = {
+            type: null,
             modalTitle: 'Asset picker',
             value: null,
             isOtherSourceValue: false,

package/src/Plugin/Plugin.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ResourceBrowserInput, ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
 import { ResourceBrowserInlineButton } from '../ResourceBrowserInlineButton/ResourceBrowserInlineButton';
 import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
-import { InlineType } from '../types';
+import { ResourceBrowserPluginType, InlineType } from '../types';
 
 /**
  *  This plugin component exsits to deal with React rules of Hooks stupidity.
@@ -12,6 +12,7 @@ import { InlineType } from '../types';
  *  needs to render its UI etc.
  */
 export type PluginRenderType = ResourceBrowserInputProps & {
+    type: ResourceBrowserPluginType | null;
     render: boolean;
     inline: boolean;
     inlineType?: InlineType;

package/src/index.spec.tsx

@@ -8,6 +8,8 @@ import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserSourceWith
 import * as RBI from './ResourceBrowserInput/ResourceBrowserInput';
 jest.spyOn(RBI, 'ResourceBrowserInput');
 
+import * as Plugin from './Plugin/Plugin';
+
 var useSourceReloadMock = jest.fn();
 jest.mock('./Hooks/useSources', () => {
     const actual = jest.requireActual('./Hooks/useSources');
@@ -45,12 +47,22 @@ describe('Resource browser input', () => {
         renderResourceLauncher: jest.fn(),
     } as unknown as ResourceBrowserPlugin;
 
+    const mockMatrixPlugin = {
+        type: 'matrix',
+        resolveResource: mockResolveResource,
+        renderSelectedResource: mockRenderSelectedResource,
+        sourceBrowserComponent: mockSourceBrowserComponent,
+        useResolveResource: mockUseResolveResource,
+        sourceSearchComponent: jest.fn(),
+        renderResourceLauncher: jest.fn(),
+    } as ResourceBrowserPlugin;
+
     const renderComponent = (props: Partial<ResourceBrowserProps> = {}, searchEnabled?: boolean) => {
         return renderWithContext(
             <ResourceBrowser modalTitle="Asset picker" value={null} onChange={mockChange} onClear={mockOnClear} {...props} />,
             {
                 onRequestSources: mockRequestSources,
-                plugins: [mockDamPlugin],
+                plugins: [mockMatrixPlugin, mockDamPlugin],
                 searchEnabled: !!searchEnabled,
             },
         );
@@ -524,4 +536,135 @@ describe('Resource browser input', () => {
             expect(useSourceReloadMock).toHaveBeenCalled();
         });
     });
+
+    describe('Resource browser plugin', () => {
+        beforeEach(() => {
+            jest.spyOn(Plugin, 'PluginRender');
+        });
+        afterEach(() => {
+            (Plugin.PluginRender as jest.Mock).mockRestore();
+        });
+
+        it('Will default to a non plugin based render for initial load and selection of first source', async () => {
+            const sourcesInput = [mockSource({ type: 'dam' }), mockSource({ type: 'matrix' })];
+            mockRequestSources.mockResolvedValue(sourcesInput);
+            renderComponent();
+
+            // Will render a default with no selected source
+            await waitFor(() => {
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: true,
+                        type: null,
+                        plugin: null,
+                    }),
+                    {},
+                );
+
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: false,
+                        type: 'dam',
+                    }),
+                    {},
+                );
+
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: false,
+                        type: 'matrix',
+                    }),
+                    {},
+                );
+            });
+        });
+
+        it('Will only send render=true to the Plugin for the currently selected source', async () => {
+            const sourcesInput = [mockSource({ type: 'dam' }), mockSource({ type: 'matrix' })];
+            mockRequestSources.mockResolvedValue(sourcesInput);
+
+            // Render with an input so it will default a source
+            renderComponent({ value: { sourceId: sourcesInput[0].id, resourceId: '123456' } });
+
+            // Will render a default with no selected source
+            await waitFor(() => {
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: false,
+                        type: null,
+                    }),
+                    {},
+                );
+
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: true,
+                        type: 'dam',
+                    }),
+                    {},
+                );
+
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: false,
+                        type: 'matrix',
+                    }),
+                    {},
+                );
+            });
+
+            // renderComponent({ value: { sourceId: sourcesInput[0].id, resourceId: '123456' } });
+        });
+
+        it('Will match plugin to render based on type', async () => {
+            const sourcesInput = [mockSource({ type: 'dam' }), mockSource({ type: 'matrix' })];
+            const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+            mockRequestSources.mockResolvedValue(sourcesInput);
+            renderComponent();
+
+            // Modify the source so the plugin object comparison doesnt match
+            calculatedSources[0] = {
+                ...calculatedSources[0],
+                plugin: {
+                    // @ts-ignore
+                    test: 'test',
+                    ...calculatedSources[0].plugin,
+                },
+            };
+
+            // Get the provided callback
+            const { setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+            // Invoke it
+            act(() => {
+                setSource(calculatedSources[0]);
+            });
+
+            // Will render a default with no selected source
+            await waitFor(() => {
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: true,
+                        type: null,
+                    }),
+                    {},
+                );
+
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: true,
+                        type: 'dam',
+                    }),
+                    {},
+                );
+
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: false,
+                        type: 'matrix',
+                    }),
+                    {},
+                );
+            });
+        });
+    });
 });

package/src/index.tsx

@@ -129,6 +129,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
         <div className="squiz-rb-scope">
             <PluginRender
                 key="default"
+                type={null}
                 render={plugin === null}
                 inline={!!inline}
                 inlineType={inlineType}
@@ -157,7 +158,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                 return (
                     <PluginRender
                         key={thisPlugin.type}
-                        render={thisPlugin === plugin}
+                        type={thisPlugin.type}
+                        render={thisPlugin.type === plugin?.type}
                         inline={!!inline}
                         inlineType={inlineType}
                         {...props}

package/src/utils/authUtils.spec.ts

@@ -23,6 +23,23 @@ describe('auth-utils', () => {
         it('should return null if the cookie does not exist', () => {
             expect(getCookieValue('nonExistentCookie')).toBeNull();
         });
+
+        it('should return null if an error occurs when reading cookies', () => {
+            const originalCookieDescriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie');
+
+            Object.defineProperty(document, 'cookie', {
+                get: () => {
+                    throw new Error('Cookie read error');
+                },
+                configurable: true,
+            });
+
+            expect(getCookieValue('anyCookie')).toBeNull();
+
+            if (originalCookieDescriptor) {
+                Object.defineProperty(document, 'cookie', originalCookieDescriptor);
+            }
+        });
     });
 
     describe('setCookieValue', () => {

package/src/utils/authUtils.ts

@@ -1,8 +1,12 @@
 import { AuthenticationConfiguration } from '../types';
 
 export const getCookieValue = (name: string): string | null => {
-    const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
-    return match ? match.pop()! : null;
+    try {
+        const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
+        return match ? match.pop()! : null;
+    } catch (error) {
+        return null;
+    }
 };
 
 export const setCookieValue = (name: string, value: string): void => {