Commit Message feat: implement comprehensive shared packages architecture for monorepo SUMMARY: Introduce 10 shared packages to unify common code across all 4 web apps, reducing ~3,000 lines of duplicated code and establishing consistent patterns for authentication, UI components, theming, and utilities. NEW SHARED PACKAGES: - @manacore/shared-auth: Unified auth logic (token management, JWT utils, fetch interceptor, storage/device/network adapters) - @manacore/shared-auth-ui: Reusable auth UI (LoginPage, RegisterPage, OAuth buttons for Google/Apple) - @manacore/shared-tailwind: Unified Tailwind config with 4 themes (lume, nature, stone, ocean) and light/dark mode support - @manacore/shared-icons: Phosphor-based icon library (40+ icons) - @manacore/shared-ui: Atomic design system (Text, Button, Badge, Toggle, Input, Modal) - @manacore/shared-i18n: Unified i18n setup with locale detection - @manacore/shared-config: Environment validation with Zod - @manacore/shared-subscriptio n-types: Subscription type definitions - @manacore/shared-subscriptio n-ui: Subscription UI components (planned) EXTENDED PACKAGES: - @manacore/shared-types: Added auth.ts, theme.ts, ui.ts, common.ts - @manacore/shared-utils: Added format.ts, validation.ts APP MIGRATIONS: - memoro/web: Migrated login (549→46 LOC), tailwind (165→12 LOC), removed 15+ duplicate components - manacore/web: Migrated to client-side auth with shared-auth, added new components (Icon, ThemeToggle, Logo) - manadeck/web: Replaced local authService/tokenManager with shared-auth, migrated auth pages - maerchenzauber/web: Added auth setup, stores, components, routes DELETED FILES (migrated to shared packages): - OAuth buttons (Google/Apple) from memoro, manacore, manadeck - Local authService, tokenManager, deviceManager, jwt utils - Duplicate Modal, Toggle, Text components - iconPaths and ManaIcon components - Subscription-related components (CostCard, PackageCard, etc.) BENEFITS: - 92% reduction in login page code - 93% reduction in tailwind config code - Consistent theming across all apps - Single source of truth for auth logic - Easier maintenance and updates BREAKING CHANGES: - Icon imports now from @manacore/shared-icons - Modal imports from @manacore/shared-ui - OAuth config via setGoogleCl ientId()/setAppleConfig()

packages/shared-auth/src/interceptors/fetchInterceptor.ts

@@ -0,0 +1,220 @@
+import type { TokenManager } from '../core/tokenManager';
+import type { AuthService } from '../core/authService';
+import { TokenState } from '../types';
+
+/**
+ * Configuration for the fetch interceptor
+ */
+export interface FetchInterceptorConfig {
+  /**
+   * Patterns to skip (won't be intercepted)
+   */
+  skipPatterns?: string[];
+  /**
+   * Backend URL to match (only intercept requests to this URL)
+   */
+  backendUrl?: string;
+}
+
+/**
+ * Default patterns to skip
+ */
+const DEFAULT_SKIP_PATTERNS = [
+  // Auth endpoints
+  '/auth/signin',
+  '/auth/signup',
+  '/auth/refresh',
+  '/auth/forgot-password',
+  '/auth/reset-password',
+  '/auth/verify',
+  '/auth/logout',
+  // Public endpoints
+  '/health',
+  '/ping',
+  '/status',
+  '/version',
+  '/public/',
+  // Storage endpoints
+  '.supabase.co/storage/',
+  '/storage/v1/',
+  // External APIs
+  'googleapis.com',
+  'firebase.com',
+  'firebaseapp.com',
+  'replicate.com',
+  'openai.com',
+  'anthropic.com',
+];
+
+/**
+ * Setup a global fetch interceptor for automatic token handling
+ */
+export function setupFetchInterceptor(
+  authService: AuthService,
+  tokenManager: TokenManager,
+  config?: FetchInterceptorConfig
+): void {
+  if (typeof globalThis === 'undefined' || !globalThis.fetch) {
+    console.warn('FetchInterceptor: globalThis.fetch not available');
+    return;
+  }
+
+  const originalFetch = globalThis.fetch;
+  const skipPatterns = [...DEFAULT_SKIP_PATTERNS, ...(config?.skipPatterns || [])];
+  const backendUrl = config?.backendUrl || authService.getBaseUrl();
+
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = extractUrl(input);
+
+    // Skip intercepting if URL doesn't match criteria
+    if (shouldSkipInterception(url, skipPatterns, backendUrl)) {
+      return originalFetch(input, init);
+    }
+
+    console.debug('Fetch interceptor: Intercepting URL:', url);
+
+    try {
+      // Make request with current token
+      const response = await makeRequestWithToken(originalFetch, authService, input, init);
+
+      // Handle 401 responses
+      if (response.status === 401) {
+        const responseData = await response.clone().json().catch(() => ({}));
+        console.debug('Fetch interceptor: Received 401 response:', responseData);
+
+        if (isTokenExpiredResponse(responseData)) {
+          console.debug('Fetch interceptor: Token expired, delegating to TokenManager');
+          return tokenManager.handle401Response(input, init);
+        }
+      }
+
+      return response;
+    } catch (error) {
+      console.debug('Error in global fetch interceptor:', error);
+      return originalFetch(input, init);
+    }
+  }) as typeof fetch;
+}
+
+/**
+ * Setup token state observers for integrations (e.g., Supabase)
+ */
+export function setupTokenObservers(
+  tokenManager: TokenManager,
+  onValid?: (token: string) => void | Promise<void>,
+  onExpired?: () => void | Promise<void>
+): () => void {
+  return tokenManager.subscribe(async (state, token) => {
+    try {
+      if (state === TokenState.VALID && token && onValid) {
+        await onValid(token);
+      } else if (state === TokenState.EXPIRED && onExpired) {
+        await onExpired();
+      }
+    } catch (error) {
+      console.debug('Error in token observer:', error);
+    }
+  });
+}
+
+/**
+ * Extract URL from various input types
+ */
+function extractUrl(input: RequestInfo | URL): string {
+  if (typeof input === 'string') {
+    return input;
+  } else if (input instanceof URL) {
+    return input.toString();
+  } else if (input instanceof Request) {
+    return input.url;
+  }
+  return '';
+}
+
+/**
+ * Check if request should skip interception
+ */
+function shouldSkipInterception(
+  url: string,
+  skipPatterns: string[],
+  backendUrl: string
+): boolean {
+  if (!url) return true;
+
+  const lowerUrl = url.toLowerCase();
+
+  // Check skip patterns
+  if (skipPatterns.some((pattern) => lowerUrl.includes(pattern.toLowerCase()))) {
+    return true;
+  }
+
+  // Check if URL matches backend
+  const backendDomain = backendUrl
+    .replace(/https?:\/\//, '')
+    .replace(/:\d+$/, '')
+    .toLowerCase();
+
+  if (!lowerUrl.includes(backendDomain)) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Make a request with the current token
+ */
+async function makeRequestWithToken(
+  originalFetch: typeof fetch,
+  authService: AuthService,
+  input: RequestInfo | URL,
+  init?: RequestInit
+): Promise<Response> {
+  const token = await authService.getAppToken();
+
+  const requestInit: RequestInit = {
+    method: init?.method || 'GET',
+    ...init,
+  };
+
+  if (token) {
+    const headers = new Headers(requestInit.headers || {});
+    headers.set('Authorization', `Bearer ${token}`);
+    requestInit.headers = headers;
+  }
+
+  return originalFetch(input, requestInit);
+}
+
+/**
+ * Check if response indicates token expiration
+ */
+function isTokenExpiredResponse(responseData: Record<string, unknown>): boolean {
+  const error = responseData.error as Record<string, unknown> | undefined;
+  const errorMessage = String(error?.message || responseData.message || responseData.error || '');
+  const errorCode = String(responseData.code || error?.code || '');
+
+  return (
+    errorMessage === 'JWT expired' ||
+    errorCode === 'PGRST301' ||
+    errorMessage === 'Unauthorized'
+  );
+}
+
+/**
+ * Get interceptor status for debugging
+ */
+export function getInterceptorStatus(
+  authService: AuthService,
+  tokenManager: TokenManager
+): {
+  isSetup: boolean;
+  backendUrl: string;
+  tokenManager: { size: number; state: string; refreshAttempts: number };
+} {
+  return {
+    isSetup: typeof globalThis !== 'undefined' && globalThis.fetch !== undefined,
+    backendUrl: authService.getBaseUrl(),
+    tokenManager: tokenManager.getQueueStatus(),
+  };
+}