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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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/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.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.0-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": "32bbc578ba11464c0c79e2714fdbe50890329be4"
 }

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/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/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;
+};