feat(react): allow passing a signal to refreshToken

Allow passing a signal to the `refreshToken` call to for example set timeout using an AbortController

Author: mvantellingen

.changeset/proud-olives-burn.md

@@ -0,0 +1,5 @@
+---
+"@labdigital/federated-token-react": minor
+---
+
+Allow passing a signal to the `refreshToken` call to for example set timeout using an AbortController

packages/react/README.md

@@ -32,7 +32,7 @@ Use the token data
 ```tsx
 import { useAuth } from '@labdigital/federated-token-react';
 
-const { loading, isAuthenticated, values } = useAuth();
+const { loading, isAuthenticated, values, refreshToken } = useAuth();
 
 if (loading) {
 	return <div>Loading...</div>;
@@ -42,3 +42,73 @@ return (
 	<div>Values: {values}</div>
 )
 ```
+
+## Manual Token Refresh with AbortSignal
+
+You can manually refresh the token and optionally provide an AbortSignal for cancellation:
+
+```tsx
+import { useAuth } from '@labdigital/federated-token-react';
+
+function MyComponent() {
+	const { refreshToken } = useAuth();
+
+	const handleRefresh = async () => {
+		try {
+			// Simple refresh (uses default 10s timeout)
+			await refreshToken();
+			console.log('Token refreshed successfully');
+		} catch (error) {
+			console.error('Token refresh failed:', error);
+		}
+	};
+
+	const handleRefreshWithTimeout = async () => {
+		try {
+			// Use AbortSignal.timeout for clean timeout handling
+			await refreshToken(AbortSignal.timeout(5000)); // 5 second timeout
+			console.log('Token refreshed successfully');
+		} catch (error) {
+			if (error.name === 'AbortError') {
+				console.error('Token refresh timed out');
+			} else {
+				console.error('Token refresh failed:', error);
+			}
+		}
+	};
+
+	const handleRefreshWithCancel = async () => {
+		const controller = new AbortController();
+		
+		// Start the refresh
+		const refreshPromise = refreshToken(controller.signal);
+		
+		// Cancel after 3 seconds if still pending
+		setTimeout(() => {
+			console.log('Cancelling refresh request...');
+			controller.abort();
+		}, 3000);
+
+		try {
+			await refreshPromise;
+		} catch (error) {
+			console.error('Refresh was cancelled or failed:', error);
+		}
+	};
+
+	return (
+		<div>
+			<button onClick={handleRefresh}>Refresh Token</button>
+			<button onClick={handleRefreshWithTimeout}>Refresh with 5s Timeout</button>
+			<button onClick={handleRefreshWithCancel}>Refresh with Cancel</button>
+		</div>
+	);
+}
+```
+
+## Configuration Options
+
+The `AuthProvider` accepts the following options:
+
+- `refreshTimeoutMs`: Default timeout in milliseconds for token refresh requests (default: 10000ms)
+- `refreshHandler`: Custom function to handle token refresh with optional AbortSignal support

packages/react/src/provider.tsx

@@ -51,15 +51,16 @@ type AuthContextType = {
 	logout: () => Promise<void>;
 	validateLocalToken: () => void;
 	checkToken: () => Promise<void>;
-	refreshToken: () => Promise<boolean>;
+	refreshToken: (signal?: AbortSignal) => Promise<boolean>;
 };
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export type AuthProviderProps = {
 	cookieNames?: CookieNames;
 	logoutHandler?: () => void;
-	refreshHandler?: () => Promise<boolean>;
+	refreshHandler?: (signal?: AbortSignal) => Promise<boolean>;
+	refreshTimeoutMs?: number;
 
 	// Deprecated
 	refreshTokenEndpoint?: string;
@@ -300,46 +301,60 @@ export function AuthProvider({
 		return undefined;
 	};
 
-	const refreshAccessToken = async (): Promise<boolean> => {
-		if (options.refreshHandler) {
-			return await options.refreshHandler();
+	const refreshAccessToken = async (signal?: AbortSignal): Promise<boolean> => {
+		// If no signal is provided, create one with default timeout using AbortSignal.timeout
+		if (!signal) {
+			const timeout = options.refreshTimeoutMs ?? 10000; // Default 10 seconds
+			signal = AbortSignal.timeout(timeout);
 		}
 
-		if (!options.refreshTokenEndpoint || !options.refreshTokenMutation) {
-			throw new Error("No refresh token endpoint or mutation provided");
-		}
+		try {
+			if (options.refreshHandler) {
+				return await options.refreshHandler(signal);
+			}
 
-		// Since we are storing the refresh token in a cookie this will be sent
-		// automatically by the browser.
-		const response = await fetch(options.refreshTokenEndpoint, {
-			method: "POST",
-			body: options.refreshTokenMutation,
-			headers: {
-				"Content-Type": "application/json",
-			},
-			credentials: "include",
-		});
+			if (!options.refreshTokenEndpoint || !options.refreshTokenMutation) {
+				throw new Error("No refresh token endpoint or mutation provided");
+			}
 
-		if (!response.ok) {
-			throw new Error("Failed to refresh token");
-		}
+			// Since we are storing the refresh token in a cookie this will be sent
+			// automatically by the browser.
+			const response = await fetch(options.refreshTokenEndpoint, {
+				method: "POST",
+				body: options.refreshTokenMutation,
+				headers: {
+					"Content-Type": "application/json",
+				},
+				credentials: "include",
+				signal: signal,
+			});
 
-		const data = await response.json();
-		if (!data) {
-			throw new Error("Failed to refresh token");
-		}
+			if (!response.ok) {
+				throw new Error("Failed to refresh token");
+			}
+
+			const data = await response.json();
+			if (!data) {
+				throw new Error("Failed to refresh token");
+			}
 
-		// Check if there is a GraphQL error
-		if (data.errors && data.errors.length > 0) {
-			throw new Error("Failed to refresh token");
+			// Check if there is a GraphQL error
+			if (data.errors && data.errors.length > 0) {
+				throw new Error("Failed to refresh token");
+			}
+			return data;
+		} catch (error) {
+			if (error instanceof Error && error.name === "AbortError") {
+				const timeout = options.refreshTimeoutMs ?? 10000;
+				throw new Error(`Token refresh timed out after ${timeout}ms`);
+			}
+			throw error;
 		}
-		return data;
 	};
 
 	const clearTokens = async () => {
 		if (options.logoutHandler) {
-			await options.logoutHandler();
-			return;
+			return options.logoutHandler();
 		}
 
 		if (!options.logoutEndpoint || !options.logoutMutation) {