@squiz/resource-browser 2.1.10-rc.0 → 2.2.1-rc.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.1-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.2.0-rc.0...@squiz/resource-browser@2.2.1-rc.0) (2024-06-07)
+
+**Note:** Version bump only for package @squiz/resource-browser
+
+# [2.2.0-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.1.10-rc.0...@squiz/resource-browser@2.2.0-rc.0) (2024-06-06)
+
+### Features
+
+-   **PRODAM:92:** auth provider ([3c7136d](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/commit/3c7136da5f5ef148f713ad6a39f5d2328eaff4c7))
+
 ## [2.1.10-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.1.9-rc.0...@squiz/resource-browser@2.1.10-rc.0) (2024-06-06)
 
 **Note:** Version bump only for package @squiz/resource-browser

package/lib/Hooks/useAuth.d.ts

@@ -0,0 +1,7 @@
+import { AuthenticationConfiguration } from '../types';
+export declare const useAuth: (authConfig: AuthenticationConfiguration | undefined) => {
+    authToken: string | null;
+    isAuthenticated: boolean;
+    login: () => void;
+    refreshAccessToken: () => Promise<string>;
+};

package/lib/Hooks/useAuth.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAuth = void 0;
+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 refreshAccessToken = (0, react_1.useCallback)(async () => {
+        const newToken = await (0, authUtils_1.refreshAccessToken)(authConfig);
+        setAuthToken(newToken);
+        setIsAuthenticated(!!newToken);
+        return newToken;
+    }, [authConfig]);
+    const handleLogin = (0, react_1.useCallback)(() => {
+        if (!authConfig?.redirectUrl && !authConfig?.authUrl && !authConfig?.redirectUrl && !authConfig?.scope) {
+            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 popup = window.open(loginUrl, 'Login', 'width=600,height=600');
+        if (!popup) {
+            console.error('Popup failed to open');
+            return;
+        }
+        const checkPopup = setInterval(() => {
+            try {
+                if ((0, authUtils_1.getCookieValue)('authToken') && (0, authUtils_1.getCookieValue)('refreshToken')) {
+                    clearInterval(checkPopup);
+                    popup.close();
+                    setAuthToken((0, authUtils_1.getCookieValue)('authToken'));
+                    setIsAuthenticated(true);
+                }
+            }
+            catch (error) {
+                // Ignore cross-origin access errors
+            }
+            if (popup.closed) {
+                clearInterval(checkPopup);
+                console.error('Popup closed before authentication');
+            }
+        }, 1000); // Check every second
+    }, [authConfig]);
+    (0, react_1.useEffect)(() => {
+        refreshAccessToken().catch(() => {
+            setIsAuthenticated(false);
+        });
+    }, [authConfig, refreshAccessToken]);
+    return {
+        authToken,
+        isAuthenticated,
+        login: handleLogin,
+        refreshAccessToken,
+    };
+};
+exports.useAuth = useAuth;

package/lib/MainContainer/MainContainer.js

@@ -40,22 +40,23 @@ function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedS
     }, [setHeaderPortal]);
     // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
     return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
-        react_1.default.createElement("div", { className: "flex items-center p-4.5" },
+        react_1.default.createElement("div", { className: "flex items-center py-4.5 pl-4.5 pr-10" },
             react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" },
                 !plugin && 'Environment Selector',
                 plugin && title),
             plugin && selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 sources.length > 1 && (react_1.default.createElement("div", { className: "px-3 border-l border-gray-300 w-300px" },
                     react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect }))),
-                plugin.createHeaderPortal && (react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "px-3 border-l border-gray-300 w-300px" })))),
+                plugin.createHeaderPortal && (react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "squiz-rb-plugin px-3 border-l border-gray-300 w-300px" })))),
             react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
                 react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
-        react_1.default.createElement("div", { className: "squiz-rb-plugin border-t border-gray-300 overflow-y-hidden" },
-            plugin && selectedSource && SourceBrowser && (react_1.default.createElement(SourceBrowser, { source: selectedSource, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, preselectedResource: preselectedResource || undefined, onSelected: (resource) => {
-                    onChange(resource);
-                    onClose();
-                } })),
+        react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
+            plugin && selectedSource && SourceBrowser && (react_1.default.createElement("div", { className: "squiz-rb-plugin" },
+                react_1.default.createElement(SourceBrowser, { source: selectedSource, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, preselectedResource: preselectedResource || undefined, onSelected: (resource) => {
+                        onChange(resource);
+                        onClose();
+                    } }))),
             !selectedSource && react_1.default.createElement(SourceList_1.default, { sources: sources, onSourceSelect: onSourceSelect }))));
 }
 exports.default = MainContainer;

package/lib/Plugin/Plugin.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PluginRender = void 0;
 const react_1 = __importDefault(require("react"));
 const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserInput");
+const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
 const PluginRender = ({ render, ...props }) => {
     if (render) {
-        return react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props });
+        return react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source },
+            react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props }));
     }
     else {
         return react_1.default.createElement(react_1.default.Fragment, null);

package/lib/ResourceBrowserContext/AuthProvider.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { ResourceBrowserSource } from '../types';
+interface AuthContextProps {
+    authToken: string | null;
+    isAuthenticated: boolean;
+    login: () => void;
+    refreshAccessToken: () => Promise<any>;
+}
+export declare const AuthContext: React.Context<AuthContextProps | undefined>;
+export declare const useAuthContext: () => AuthContextProps;
+interface AuthProviderProps {
+    children: ReactNode;
+    authConfig?: ResourceBrowserSource | null;
+}
+export declare const AuthProvider: ({ children, authConfig }: AuthProviderProps) => React.JSX.Element;
+export {};

package/lib/ResourceBrowserContext/AuthProvider.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthProvider = exports.useAuthContext = exports.AuthContext = void 0;
+const react_1 = __importStar(require("react"));
+const useAuth_1 = require("../Hooks/useAuth");
+exports.AuthContext = (0, react_1.createContext)(undefined);
+const useAuthContext = () => {
+    const context = (0, react_1.useContext)(exports.AuthContext);
+    if (!context) {
+        throw new Error('useAuthContext must be used within an AuthProvider');
+    }
+    return context;
+};
+exports.useAuthContext = useAuthContext;
+const AuthProvider = ({ children, authConfig }) => {
+    const authConfiguration = authConfig;
+    const auth = (0, useAuth_1.useAuth)(authConfiguration?.configuration);
+    if (!authConfiguration?.configuration) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+    return (react_1.default.createElement(exports.AuthContext.Provider, { value: auth }, children));
+};
+exports.AuthProvider = AuthProvider;

package/lib/index.css

@@ -610,6 +610,9 @@
 .squiz-rb-scope .max-w-\[50rem\]:not(.squiz-rb-plugin *) {
   max-width: 50rem;
 }
+.squiz-rb-scope .max-w-\[52rem\]:not(.squiz-rb-plugin *) {
+  max-width: 52rem;
+}
 .squiz-rb-scope .flex-1:not(.squiz-rb-plugin *) {
   flex: 1 1 0%;
 }
@@ -815,6 +818,14 @@
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.squiz-rb-scope .py-4:not(.squiz-rb-plugin *) {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.squiz-rb-scope .py-4\.5:not(.squiz-rb-plugin *) {
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+}
 .squiz-rb-scope .py-8:not(.squiz-rb-plugin *) {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -825,12 +836,24 @@
 .squiz-rb-scope .pb-4:not(.squiz-rb-plugin *) {
   padding-bottom: 1rem;
 }
+.squiz-rb-scope .pb-4\.5:not(.squiz-rb-plugin *) {
+  padding-bottom: 1.125rem;
+}
 .squiz-rb-scope .pl-4:not(.squiz-rb-plugin *) {
   padding-left: 1rem;
 }
+.squiz-rb-scope .pl-4\.5:not(.squiz-rb-plugin *) {
+  padding-left: 1.125rem;
+}
+.squiz-rb-scope .pr-10:not(.squiz-rb-plugin *) {
+  padding-right: 2.5rem;
+}
 .squiz-rb-scope .pr-4:not(.squiz-rb-plugin *) {
   padding-right: 1rem;
 }
+.squiz-rb-scope .pr-4\.5:not(.squiz-rb-plugin *) {
+  padding-right: 1.125rem;
+}
 .squiz-rb-scope .pt-3:not(.squiz-rb-plugin *) {
   padding-top: 0.75rem;
 }
@@ -1032,18 +1055,6 @@
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
 }
-.squiz-rb-scope .p-4\.5:not(.squiz-rb-plugin *) {
-  padding: 18px;
-}
-.squiz-rb-scope .pl-4\.5:not(.squiz-rb-plugin *) {
-  padding-left: 18px;
-}
-.squiz-rb-scope .pr-4\.5:not(.squiz-rb-plugin *) {
-  padding-right: 18px;
-}
-.squiz-rb-scope .pb-4\.5:not(.squiz-rb-plugin *) {
-  padding-bottom: 18px;
-}
 .squiz-rb-scope .break-word:not(.squiz-rb-plugin *) {
   word-break: break-word;
   overflow-wrap: anywhere;

package/lib/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
 import { ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
-export { ResourceBrowserContext, ResourceBrowserContextProvider };
+import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
+export { ResourceBrowserContext, ResourceBrowserContextProvider, useAuthContext, AuthProvider, AuthContext };
 export * from './types';
 export type ResourceBrowserProps = {
     modalTitle: string;

package/lib/index.js

@@ -26,13 +26,17 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResourceBrowser = exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
+exports.ResourceBrowser = exports.AuthContext = exports.AuthProvider = exports.useAuthContext = exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
 const react_1 = __importStar(require("react"));
 const ResourceBrowserContext_1 = require("./ResourceBrowserContext/ResourceBrowserContext");
 Object.defineProperty(exports, "ResourceBrowserContext", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContext; } });
 Object.defineProperty(exports, "ResourceBrowserContextProvider", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContextProvider; } });
 const useSources_1 = require("./Hooks/useSources");
 const Plugin_1 = require("./Plugin/Plugin");
+const AuthProvider_1 = require("./ResourceBrowserContext/AuthProvider");
+Object.defineProperty(exports, "AuthProvider", { enumerable: true, get: function () { return AuthProvider_1.AuthProvider; } });
+Object.defineProperty(exports, "useAuthContext", { enumerable: true, get: function () { return AuthProvider_1.useAuthContext; } });
+Object.defineProperty(exports, "AuthContext", { enumerable: true, get: function () { return AuthProvider_1.AuthContext; } });
 __exportStar(require("./types"), exports);
 const ResourceBrowser = (props) => {
     const { value } = props;

package/lib/types.d.ts

@@ -2,11 +2,20 @@ import React, { ReactElement } from 'react';
 import { SquizImageType } from '@squiz/dx-json-schema-lib';
 export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
 export type ResourceBrowserPluginType = 'dam' | 'matrix';
-export type ResourceBrowserSource = {
+export type AuthenticationConfiguration = {
+    authUrl: string;
+    redirectUrl: string;
+    clientId: string;
+    scope: string;
+};
+export interface ResourceBrowserSource {
     name?: string;
     id: string;
     type: ResourceBrowserPluginType;
-};
+}
+export interface ResourceBrowserSourceWithConfig extends ResourceBrowserSource {
+    configuration?: AuthenticationConfiguration;
+}
 export type ResourceBrowserUnresolvedResource = {
     sourceId: string;
     resourceId: string;

package/lib/utils/authUtils.d.ts

@@ -0,0 +1,5 @@
+import { AuthenticationConfiguration } from '../types';
+export declare const getCookieValue: (name: string) => string | null;
+export declare const setCookieValue: (name: string, value: string) => void;
+export declare const logout: () => void;
+export declare const refreshAccessToken: (authConfig?: AuthenticationConfiguration) => Promise<string>;

package/lib/utils/authUtils.js

@@ -0,0 +1,38 @@
+"use strict";
+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;
+};
+exports.getCookieValue = getCookieValue;
+const setCookieValue = (name, value) => {
+    document.cookie = `${name}=${value}; Path=/;`;
+};
+exports.setCookieValue = setCookieValue;
+const logout = () => {
+    (0, exports.setCookieValue)('authToken', '');
+    (0, exports.setCookieValue)('refreshToken', '');
+};
+exports.logout = logout;
+const refreshAccessToken = async (authConfig) => {
+    if (!authConfig) {
+        throw new Error('No auth configuration available');
+    }
+    const refreshToken = (0, exports.getCookieValue)('refreshToken');
+    if (!refreshToken) {
+        throw new Error('You are not logged in');
+    }
+    const response = await fetch(`${authConfig.redirectUrl}?grant_type=refresh_token&refresh_token=${refreshToken}`, {
+        method: 'GET',
+        credentials: 'include',
+    });
+    if (!response.ok) {
+        (0, exports.logout)();
+        throw new Error('Failed to refresh token');
+    }
+    const data = await response.json();
+    (0, exports.setCookieValue)('authToken', data.access_token);
+    return data.access_token;
+};
+exports.refreshAccessToken = refreshAccessToken;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "2.1.10-rc.0",
+    "version": "2.2.1-rc.0",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -81,5 +81,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "0799116e7501bb4eaa3c401be6304231d8910f75"
+    "gitHead": "2ae6e09c8e222b2ef95f12243abe659ed76f0fd0"
 }

package/src/Hooks/useAuth.spec.tsx

@@ -0,0 +1,137 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useAuth } from './useAuth';
+import '@testing-library/jest-dom';
+import { AuthenticationConfiguration } from '../types';
+import * as authUtils from '../utils/authUtils';
+
+jest.mock('../utils/authUtils');
+
+const mockGetCookieValue = authUtils.getCookieValue as jest.MockedFunction<typeof authUtils.getCookieValue>;
+const mockRefreshAccessToken = authUtils.refreshAccessToken as jest.MockedFunction<typeof authUtils.refreshAccessToken>;
+
+describe('useAuth', () => {
+    const authConfig: AuthenticationConfiguration = {
+        authUrl: 'https://auth.example.com',
+        clientId: 'example-client-id',
+        redirectUrl: 'https://example.com/callback',
+        scope: 'offline_access'
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should initialize with token and authentication state', async () => {
+        mockGetCookieValue.mockReturnValue('initialAuthToken');
+
+        const { result } = renderHook(() => useAuth(authConfig));
+
+        await waitFor(() => {
+            expect(result.current.authToken).toBe('initialAuthToken');
+            expect(result.current.isAuthenticated).toBe(true);
+        });
+    });
+
+    it('should log error and return when popup fails to open', async () => {
+        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+        jest.spyOn(window, 'open').mockImplementation(() => null);
+
+        const { result } = renderHook(() => useAuth(authConfig));
+
+        result.current.login();
+
+        await waitFor(() => {
+            expect(consoleSpy).toHaveBeenCalledWith('Popup failed to open');
+        });
+        consoleSpy.mockRestore();
+    });
+
+    it('should log error when popup closes before authentication', async () => {
+        jest.useFakeTimers();
+
+        const popupMock = {
+            close: jest.fn(),
+        } as unknown as Window;
+
+        Object.defineProperty(popupMock, 'closed', {
+            get: jest.fn(() => false),
+            set: jest.fn()
+        });
+
+        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+        jest.spyOn(window, 'open').mockImplementation(() => popupMock);
+        mockGetCookieValue.mockReturnValueOnce(null);
+
+        const { result } = renderHook(() => useAuth(authConfig));
+
+        result.current.login();
+        (Object.getOwnPropertyDescriptor(popupMock, 'closed')!.get as jest.Mock).mockReturnValue(true);
+        jest.advanceTimersByTime(1000);
+
+        await waitFor(() => {
+            expect(consoleSpy).toHaveBeenCalledWith('Popup closed before authentication');
+        });
+
+        consoleSpy.mockRestore();
+    });
+
+    it('should login successfully and update state', 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));
+
+        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`,
+            'Login',
+            'width=600,height=600'
+        );
+
+        act(() => {
+            mockGetCookieValue.mockReturnValue('newAuthToken');
+            jest.advanceTimersByTime(1000);
+            (popupMock as any).closed = true;
+        });
+
+        await waitFor(() => {
+            expect(result.current.authToken).toBe('newAuthToken');
+            expect(result.current.isAuthenticated).toBe(true);
+        });
+
+        expect(popupMock.close).toHaveBeenCalled();
+    });
+
+    it('should refresh access token and update state', async () => {
+        mockGetCookieValue.mockReturnValue('initialRefreshToken');
+        mockRefreshAccessToken.mockResolvedValue('newAuthToken');
+
+        const { result } = renderHook(() => useAuth(authConfig));
+
+        await waitFor(() => {
+            expect(mockRefreshAccessToken).toHaveBeenCalledWith(authConfig);
+            expect(result.current.authToken).toBe('newAuthToken');
+            expect(result.current.isAuthenticated).toBe(true);
+        });
+    });
+
+    it('should handle token refresh failure', async () => {
+        mockGetCookieValue.mockReturnValue('initialRefreshToken');
+        mockRefreshAccessToken.mockRejectedValue(new Error('Failed to refresh token'));
+
+        const { result } = renderHook(() => useAuth(authConfig));
+
+        await waitFor(() => {
+            expect(mockRefreshAccessToken).toHaveBeenCalledWith(authConfig);
+            expect(result.current.isAuthenticated).toBe(false);
+        });
+    });
+});

package/src/Hooks/useAuth.ts

@@ -0,0 +1,60 @@
+import { useState, useCallback, useEffect } from 'react';
+import { AuthenticationConfiguration } from '../types';
+import { getCookieValue, refreshAccessToken as refreshTokenUtil } from '../utils/authUtils';
+
+export const useAuth = (authConfig: AuthenticationConfiguration | undefined) => {
+    const [authToken, setAuthToken] = useState<string | null>(getCookieValue('authToken'));
+    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(!!getCookieValue('authToken'));
+
+    const refreshAccessToken = useCallback(async (): Promise<string> => {
+        const newToken = await refreshTokenUtil(authConfig);
+        setAuthToken(newToken);
+        setIsAuthenticated(!!newToken);
+        return newToken;
+    }, [authConfig]);
+
+    const handleLogin = useCallback((): void => {
+        if (!authConfig?.redirectUrl && !authConfig?.authUrl && !authConfig?.redirectUrl && !authConfig?.scope) {
+            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 popup = window.open(loginUrl, 'Login', 'width=600,height=600');
+
+        if (!popup) {
+            console.error('Popup failed to open');
+            return;
+        }
+
+        const checkPopup = setInterval(() => {
+            try {
+                if (getCookieValue('authToken') && getCookieValue('refreshToken')) {
+                    clearInterval(checkPopup);
+                    popup.close();
+                    setAuthToken(getCookieValue('authToken'));
+                    setIsAuthenticated(true);
+                }
+            } catch (error) {
+                // Ignore cross-origin access errors
+            }
+
+            if (popup.closed) {
+                clearInterval(checkPopup);
+                console.error('Popup closed before authentication');
+            }
+        }, 1000); // Check every second
+    }, [authConfig]);
+
+    useEffect(() => {
+        refreshAccessToken().catch(() => {
+            setIsAuthenticated(false);
+        });
+    }, [authConfig, refreshAccessToken]);
+
+    return {
+        authToken,
+        isAuthenticated,
+        login: handleLogin,
+        refreshAccessToken,
+    };
+};

package/src/MainContainer/MainContainer.tsx

@@ -46,7 +46,7 @@ function MainContainer({
     // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
     return (
         <div className="relative flex flex-col h-full text-gray-800">
-            <div className="flex items-center p-4.5">
+            <div className="flex items-center py-4.5 pl-4.5 pr-10">
                 <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
                     {!plugin && 'Environment Selector'}
                     {plugin && title}
@@ -60,7 +60,7 @@ function MainContainer({
                             </div>
                         )}
                         {plugin.createHeaderPortal && (
-                            <div ref={setHeaderPortalRef} className="px-3 border-l border-gray-300 w-300px"></div>
+                            <div ref={setHeaderPortalRef} className="squiz-rb-plugin px-3 border-l border-gray-300 w-300px"></div>
                         )}
                     </>
                 )}
@@ -79,18 +79,20 @@ function MainContainer({
                     </svg>
                 </button>
             </div>
-            <div className="squiz-rb-plugin border-t border-gray-300 overflow-y-hidden">
+            <div className="border-t border-gray-300 overflow-y-hidden">
                 {plugin && selectedSource && SourceBrowser && (
-                    <SourceBrowser
-                        source={selectedSource}
-                        allowedTypes={allowedTypes}
-                        headerPortal={plugin.createHeaderPortal && headerPortal ? headerPortal : undefined}
-                        preselectedResource={preselectedResource || undefined}
-                        onSelected={(resource: ResourceBrowserResource) => {
-                            onChange(resource);
-                            onClose();
-                        }}
-                    />
+                    <div className="squiz-rb-plugin">
+                        <SourceBrowser
+                            source={selectedSource}
+                            allowedTypes={allowedTypes}
+                            headerPortal={plugin.createHeaderPortal && headerPortal ? headerPortal : undefined}
+                            preselectedResource={preselectedResource || undefined}
+                            onSelected={(resource: ResourceBrowserResource) => {
+                                onChange(resource);
+                                onClose();
+                            }}
+                        />
+                    </div>
                 )}
                 {!selectedSource && <SourceList sources={sources} onSourceSelect={onSourceSelect} />}
             </div>

package/src/Plugin/Plugin.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ResourceBrowserInput, ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
+import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
 
 /**
  *  This plugin component exsits to deal with React rules of Hooks stupidity.
@@ -13,7 +14,7 @@ export type PluginRenderType = ResourceBrowserInputProps & {
 };
 export const PluginRender = ({ render, ...props }: PluginRenderType) => {
     if (render) {
-        return <ResourceBrowserInput {...props} />;
+        return <AuthProvider authConfig={props.source}><ResourceBrowserInput {...props} /></AuthProvider>;
     } else {
         return <></>;
     }

package/src/ResourceBrowserContext/AuthProvider.spec.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { AuthProvider, useAuthContext } from './AuthProvider';
+import {AuthenticationConfiguration, ResourceBrowserSourceWithConfig} from '../types';
+import { useAuth } from '../Hooks/useAuth';
+
+jest.mock('../Hooks/useAuth');
+
+const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
+
+describe('AuthContext', () => {
+    const authConfig: AuthenticationConfiguration = {
+        authUrl: 'https://auth.example.com',
+        clientId: 'example-client-id',
+        redirectUrl: 'https://example.com/callback',
+        scope: 'offline'
+    };
+
+    const sourceConfig: ResourceBrowserSourceWithConfig  = {
+        id: '1',
+        type: 'dam',
+        configuration: authConfig
+    };
+
+    const authState = {
+        authToken: 'testAuthToken',
+        isAuthenticated: true,
+        login: jest.fn(),
+        refreshAccessToken: jest.fn(),
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockUseAuth.mockReturnValue(authState);
+    });
+
+    it('should provide auth state and functions to consumers', async () => {
+        const TestComponent = () => {
+            const { authToken, isAuthenticated, login } = useAuthContext();
+            return (
+                <div>
+                    <span>{`Token: ${authToken}`}</span>
+                    <span>{`Authenticated: ${isAuthenticated}`}</span>
+                    <button onClick={login}>Login</button>
+                </div>
+            );
+        };
+
+        render(
+            <AuthProvider authConfig={sourceConfig}>
+                <TestComponent />
+            </AuthProvider>
+        );
+
+        expect(screen.getByText(/Token: testAuthToken/)).toBeInTheDocument();
+        expect(screen.getByText(/Authenticated: true/)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByText('Login'));
+
+        expect(authState.login).toHaveBeenCalled();
+    });
+
+    it('should throw an error if used outside of AuthProvider', () => {
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        const TestComponent = () => {
+            useAuthContext();
+            return <div />;
+        };
+
+        expect(() => render(<TestComponent />)).toThrowError('useAuthContext must be used within an AuthProvider');
+    });
+});

package/src/ResourceBrowserContext/AuthProvider.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { useAuth } from '../Hooks/useAuth';
+import { ResourceBrowserSource, ResourceBrowserSourceWithConfig } from '../types';
+
+interface AuthContextProps {
+    authToken: string | null;
+    isAuthenticated: boolean;
+    login: () => void;
+    refreshAccessToken: () => Promise<any>;
+}
+
+export const AuthContext = createContext<AuthContextProps | undefined>(undefined);
+
+export const useAuthContext = (): AuthContextProps => {
+    const context = useContext(AuthContext);
+    if (!context) {
+        throw new Error('useAuthContext must be used within an AuthProvider');
+    }
+    return context;
+};
+
+interface AuthProviderProps {
+    children: ReactNode;
+    authConfig?: ResourceBrowserSource | null;
+}
+
+export const AuthProvider = ( {children, authConfig}: AuthProviderProps ) => {
+    const authConfiguration = authConfig as ResourceBrowserSourceWithConfig;
+    const auth = useAuth(authConfiguration?.configuration);
+
+    if (!authConfiguration?.configuration) {
+        return <>{children}</>;
+    }
+
+    return (
+        <AuthContext.Provider value={auth}>
+            {children}
+        </AuthContext.Provider>
+    );
+};

package/src/__mocks__/StorybookHelpers.tsx

@@ -21,7 +21,7 @@ export const createPlugins = (callbackWait: number, headerPortal = false): Resou
             sourceBrowserComponent: () => {
                 return (props) => {
                     return (
-                        <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[50rem]">
+                        <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[52rem]">
                             <div>THIS IS A {type} PLUGIN</div>
                             <button
                                 onClick={() => {

package/src/index.scss

@@ -18,22 +18,6 @@ svg {
     @apply text-gray-600;
 }
 
-.p-4\.5 {
-    padding: 18px;
-}
-
-.pl-4\.5 {
-    padding-left: 18px;
-}
-
-.pr-4\.5 {
-    padding-right: 18px;
-}
-
-.pb-4\.5 {
-    padding-bottom: 18px;
-}
-
 // In tailwind there is no break-word as it is deprecated, but break-words which is slightly different does not work here, so I have added the suggested combination here
 // https://v1.tailwindcss.com/docs/word-break
 // https://github.com/tailwindlabs/tailwindcss/discussions/2213

package/src/index.spec.tsx

@@ -267,7 +267,9 @@ describe('Resource browser input', () => {
 
         // Invoke modal close callback
         const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
-        onModalStateChange(false);
+        act(() => {
+            onModalStateChange(false);
+        });
 
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(

package/src/index.tsx

@@ -4,8 +4,9 @@ import { ResourceBrowserContext, ResourceBrowserContextProvider } from './Resour
 import { ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource, ResourceBrowserPlugin } from './types';
 import { useSources } from './Hooks/useSources';
 import { PluginRender } from './Plugin/Plugin';
+import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
 
-export { ResourceBrowserContext, ResourceBrowserContextProvider };
+export { ResourceBrowserContext, ResourceBrowserContextProvider, useAuthContext, AuthProvider, AuthContext };
 export * from './types';
 
 export type ResourceBrowserProps = {
@@ -121,6 +122,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                     />
                 );
             })}
+
         </div>
     );
 };

package/src/types.ts

@@ -4,14 +4,25 @@ import { SquizImageType } from '@squiz/dx-json-schema-lib';
 export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
 export type ResourceBrowserPluginType = 'dam' | 'matrix';
 
-export type ResourceBrowserSource = {
+export type AuthenticationConfiguration = {
+    authUrl: string;
+    redirectUrl: string;
+    clientId: string;
+    scope: string;
+}
+
+export interface ResourceBrowserSource {
     // Source name; shown on the UI
     name?: string;
     // Source identifier for additional information lookups
     id: string;
     // Source type e.g. Matrix, DAM etc determines what plugin will be used for resource selection
     type: ResourceBrowserPluginType;
-};
+}
+
+export interface ResourceBrowserSourceWithConfig extends ResourceBrowserSource {
+    configuration?: AuthenticationConfiguration;
+}
 
 export type ResourceBrowserUnresolvedResource = {
     sourceId: string;

package/src/utils/authUtils.spec.ts

@@ -0,0 +1,88 @@
+import { getCookieValue, setCookieValue, logout, refreshAccessToken } from './authUtils';
+import { AuthenticationConfiguration } from '../types';
+
+// Mock the global fetch function
+global.fetch = jest.fn();
+
+describe('auth-utils', () => {
+    beforeEach(() => {
+        // Clear all cookies before each test
+        document.cookie.split(';').forEach(cookie => {
+            const eqPos = cookie.indexOf('=');
+            const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+            document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
+        });
+    });
+
+    describe('getCookieValue', () => {
+        it('should return the value of the cookie if it exists', () => {
+            document.cookie = 'testCookie=testValue';
+            expect(getCookieValue('testCookie')).toBe('testValue');
+        });
+
+        it('should return null if the cookie does not exist', () => {
+            expect(getCookieValue('nonExistentCookie')).toBeNull();
+        });
+    });
+
+    describe('setCookieValue', () => {
+        it('should set the cookie with the given name and value', () => {
+            setCookieValue('testCookie', 'testValue');
+            expect(document.cookie).toContain('testCookie=testValue');
+        });
+    });
+
+    describe('logout', () => {
+        it('should clear authToken and refreshToken cookies', () => {
+            document.cookie = 'authToken=testAuthToken';
+            document.cookie = 'refreshToken=testRefreshToken';
+            logout();
+            expect(getCookieValue('authToken')).toBeNull();
+            expect(getCookieValue('refreshToken')).toBeNull();
+        });
+    });
+
+    describe('refreshAccessToken', () => {
+        const authConfig: AuthenticationConfiguration = {
+            authUrl: 'https://auth.example.com',
+            clientId: 'example-client-id',
+            redirectUrl: 'https://example.com/callback',
+            scope: 'offline_access'
+        };
+
+        it('should throw an error if authConfig is not provided', async () => {
+            await expect(refreshAccessToken()).rejects.toThrow('No auth configuration available');
+        });
+
+        it('should throw an error if refreshToken is not available', async () => {
+            await expect(refreshAccessToken(authConfig)).rejects.toThrow('You are not logged in');
+        });
+
+        it('should refresh the access token and set the authToken cookie', async () => {
+            document.cookie = 'refreshToken=testRefreshToken';
+
+            // Mock fetch response
+            (global.fetch as jest.Mock).mockResolvedValueOnce({
+                ok: true,
+                json: async () => ({ access_token: 'newAccessToken' }),
+            });
+
+            const newToken = await refreshAccessToken(authConfig);
+            expect(newToken).toBe('newAccessToken');
+            expect(getCookieValue('authToken')).toBe('newAccessToken');
+        });
+
+        it('should call logout and throw an error if the fetch response is not ok', async () => {
+            document.cookie = 'refreshToken=testRefreshToken';
+
+            // Mock fetch response
+            (global.fetch as jest.Mock).mockResolvedValueOnce({
+                ok: false,
+            });
+
+            await expect(refreshAccessToken(authConfig)).rejects.toThrow('Failed to refresh token');
+            expect(getCookieValue('authToken')).toBeNull();
+            expect(getCookieValue('refreshToken')).toBeNull();
+        });
+    });
+});

package/src/utils/authUtils.ts

@@ -0,0 +1,40 @@
+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;
+};
+
+export const setCookieValue = (name: string, value: string): void => {
+    document.cookie = `${name}=${value}; Path=/;`;
+};
+
+export const logout = (): void => {
+    setCookieValue('authToken', '');
+    setCookieValue('refreshToken', '');
+};
+
+export const refreshAccessToken = async (authConfig?: AuthenticationConfiguration): Promise<string> => {
+    if (!authConfig) {
+        throw new Error('No auth configuration available');
+    }
+
+    const refreshToken = getCookieValue('refreshToken');
+    if (!refreshToken) {
+        throw new Error('You are not logged in');
+    }
+
+    const response = await fetch(`${authConfig.redirectUrl}?grant_type=refresh_token&refresh_token=${refreshToken}`, {
+        method: 'GET',
+        credentials: 'include',
+    });
+
+    if (!response.ok) {
+        logout();
+        throw new Error('Failed to refresh token');
+    }
+
+    const data = await response.json();
+    setCookieValue('authToken', data.access_token);
+    return data.access_token;
+};

package/tailwind.config.cjs

@@ -63,6 +63,7 @@ module.exports = {
                 2: '0.5rem', // 8px
                 3: '0.75rem', // 12px
                 4: '1rem', // 16px
+                4.5: '1.125rem', // 18px
                 5: '1.25rem', // 20px
                 6: '1.5rem', // 24px
                 7: '1.75rem', // 28px