@oxyhq/services 5.5.8 → 5.5.9

package/src/__tests__/ui/hooks/authfetch-integration.test.ts

@@ -0,0 +1,197 @@
+/**
+ * Integration test demonstrating the separation of internal and public authFetch usage
+ * This test simulates real-world usage patterns described in the issue
+ */
+
+describe('AuthFetch Separation - Integration Test', () => {
+  describe('Real-world usage simulation', () => {
+    // Mock OxyServices to simulate the actual implementation
+    class MockOxyServices {
+      private internalBaseURL: string;
+
+      constructor(config: { baseURL: string }) {
+        this.internalBaseURL = config.baseURL;
+      }
+
+      // Internal URL management (used by the module itself)
+      getBaseURL(): string {
+        return this.internalBaseURL;
+      }
+
+      setBaseURL(url: string): void {
+        if (!url) throw new Error('Base URL cannot be empty');
+        this.internalBaseURL = url;
+      }
+
+      // Simulate internal module methods that make API calls
+      authenticateToken(token: string): Promise<{ valid: boolean; error?: string }> {
+        const url = `${this.internalBaseURL}/auth/validate`;
+        console.log(`Internal module call to: ${url}`);
+        return Promise.resolve({ valid: false, error: 'Invalid token' });
+      }
+
+      refreshTokens(): Promise<void> {
+        const url = `${this.internalBaseURL}/auth/refresh`;
+        console.log(`Internal module call to: ${url}`);
+        return Promise.resolve();
+      }
+
+      getUserBySession(sessionId: string): Promise<any> {
+        const url = `${this.internalBaseURL}/users/session/${sessionId}`;
+        console.log(`Internal module call to: ${url}`);
+        return Promise.resolve({ id: 'user123', username: 'testuser' });
+      }
+    }
+
+    // Mock context state (simulating the new OxyContext implementation)
+    class MockOxyContext {
+      private oxyServices: MockOxyServices;
+      private appBaseURL: string;
+
+      constructor(oxyServices: MockOxyServices) {
+        this.oxyServices = oxyServices;
+        this.appBaseURL = oxyServices.getBaseURL(); // Initially same as internal URL
+      }
+
+      // Public methods for apps
+      setApiUrl(url: string): void {
+        if (!url) throw new Error('Base URL cannot be empty');
+        this.appBaseURL = url; // Only affects public authFetch
+      }
+
+      getAppBaseURL(): string {
+        return this.appBaseURL;
+      }
+
+      getOxyServices(): MockOxyServices {
+        return this.oxyServices;
+      }
+    }
+
+    // Mock authFetch (simulating the new useAuthFetch implementation)
+    function createMockAuthFetch(context: MockOxyContext) {
+      return {
+        get: async (endpoint: string) => {
+          const url = `${context.getAppBaseURL()}${endpoint}`;
+          console.log(`Public authFetch call to: ${url}`);
+          return { data: `Response from ${url}` };
+        },
+        post: async (endpoint: string, data: any) => {
+          const url = `${context.getAppBaseURL()}${endpoint}`;
+          console.log(`Public authFetch call to: ${url}`);
+          return { data: `Posted to ${url}`, posted: data };
+        }
+      };
+    }
+
+    test('should demonstrate clean separation in Mention app scenario', async () => {
+      console.log('\n=== Mention App Integration Test ===\n');
+
+      // 1. Initialize OxyServices for internal module usage
+      const oxyServices = new MockOxyServices({
+        baseURL: 'https://api.oxy.so'
+      });
+
+      // 2. Create context (simulating OxyProvider)
+      const context = new MockOxyContext(oxyServices);
+      
+      // 3. Create authFetch (simulating useAuthFetch hook)
+      const authFetch = createMockAuthFetch(context);
+
+      console.log('1. Initial state:');
+      
+      // Internal module calls should use Oxy API
+      await oxyServices.authenticateToken('test-token');
+      await oxyServices.getUserBySession('session123');
+      
+      // Public authFetch calls initially use Oxy API too
+      await authFetch.get('/api/users/me');
+      await authFetch.post('/api/mentions', { text: 'Hello world' });
+
+      console.log('\n2. Mention app sets its own API URL:');
+      
+      // App configures its own API URL
+      context.setApiUrl('https://mention.earth/api');
+
+      console.log('\n3. After configuration:');
+      
+      // Internal module calls STILL use Oxy API (unchanged)
+      await oxyServices.authenticateToken('test-token');
+      await oxyServices.refreshTokens();
+      
+      // Public authFetch calls now use Mention's API
+      await authFetch.get('/api/mentions');
+      await authFetch.post('/api/mentions', { text: 'New mention' });
+      
+      // Verify URLs are correctly separated
+      expect(oxyServices.getBaseURL()).toBe('https://api.oxy.so');
+      expect(context.getAppBaseURL()).toBe('https://mention.earth/api');
+      
+      console.log('\n✅ Clean separation achieved!');
+    });
+
+    test('should support dynamic URL changes without affecting internal calls', async () => {
+      console.log('\n=== Dynamic URL Changes Test ===\n');
+
+      const oxyServices = new MockOxyServices({
+        baseURL: 'https://api.oxy.so'
+      });
+      const context = new MockOxyContext(oxyServices);
+      const authFetch = createMockAuthFetch(context);
+
+      // Scenario: App switches between staging and production
+      const environments = [
+        'https://staging.myapp.com/api',
+        'https://production.myapp.com/api',
+        'https://dev.myapp.com/api'
+      ];
+
+      for (const [index, env] of environments.entries()) {
+        console.log(`${index + 1}. Switching to ${env}:`);
+        
+        context.setApiUrl(env);
+        
+        // Internal calls remain unchanged
+        await oxyServices.authenticateToken('token');
+        
+        // Public calls use new environment
+        await authFetch.get('/api/data');
+        
+        // Verify separation
+        expect(oxyServices.getBaseURL()).toBe('https://api.oxy.so');
+        expect(context.getAppBaseURL()).toBe(env);
+      }
+      
+      console.log('\n✅ Dynamic URL changes work correctly!');
+    });
+
+    test('should handle zero-config setup as described in issue', () => {
+      console.log('\n=== Zero-Config Setup Test ===\n');
+
+      // Simulate the zero-config setup described in the issue
+      console.log('1. Create OxyServices instance:');
+      const oxyServices = new MockOxyServices({
+        baseURL: 'https://your-api.com'
+      });
+
+      console.log('2. Wrap app with provider (simulated):');
+      const context = new MockOxyContext(oxyServices);
+
+      console.log('3. Use authFetch in components (simulated):');
+      const authFetch = createMockAuthFetch(context);
+
+      // Verify the setup works
+      expect(oxyServices.getBaseURL()).toBe('https://your-api.com');
+      expect(context.getAppBaseURL()).toBe('https://your-api.com');
+
+      console.log('4. Change API URL at runtime:');
+      context.setApiUrl('https://production-api.com');
+
+      // Verify separation
+      expect(oxyServices.getBaseURL()).toBe('https://your-api.com'); // Internal unchanged
+      expect(context.getAppBaseURL()).toBe('https://production-api.com'); // Public changed
+
+      console.log('\n✅ Zero-config setup with separation works!');
+    });
+  });
+});

package/src/__tests__/ui/hooks/backward-compatibility.test.ts

@@ -0,0 +1,159 @@
+/**
+ * Backward compatibility test - ensures existing API surface is unchanged
+ */
+
+describe('Backward Compatibility', () => {
+  describe('Existing API surface', () => {
+    // Mock the components to test the API surface
+    function mockUseOxy() {
+      return {
+        oxyServices: {
+          getBaseURL: () => 'https://api.oxy.so',
+          setBaseURL: (url: string) => {},
+        },
+        isAuthenticated: true,
+        user: { id: 'user123', username: 'testuser' },
+        login: async (username: string, password: string) => ({ id: 'user123' }),
+        logout: async () => {},
+        signUp: async (username: string, email: string, password: string) => ({ id: 'user123' }),
+        activeSessionId: 'session123',
+        setApiUrl: (url: string) => {}, // This should still exist
+        getAppBaseURL: () => 'https://app.example.com', // New addition
+      };
+    }
+
+    function mockUseAuthFetch() {
+      const oxyContext = mockUseOxy();
+      
+      // Mock the AuthFetchAPI interface
+      const authFetch = async (input: RequestInfo | URL, init?: any) => {
+        return new Response('{"success": true}');
+      };
+
+      // Add convenience methods as per the interface
+      Object.assign(authFetch, {
+        get: async (endpoint: string, options?: any) => ({ data: 'get response' }),
+        post: async (endpoint: string, data?: any, options?: any) => ({ data: 'post response' }),
+        put: async (endpoint: string, data?: any, options?: any) => ({ data: 'put response' }),
+        delete: async (endpoint: string, options?: any) => ({ data: 'delete response' }),
+        isAuthenticated: oxyContext.isAuthenticated,
+        user: oxyContext.user,
+        login: oxyContext.login,
+        logout: oxyContext.logout,
+        signUp: oxyContext.signUp,
+        setApiUrl: oxyContext.setApiUrl, // Existing API
+      });
+
+      return authFetch;
+    }
+
+    test('should maintain existing useAuthFetch API', async () => {
+      const authFetch = mockUseAuthFetch();
+
+      // Test that all existing methods are still available
+      expect(typeof authFetch).toBe('function'); // Main function
+      expect(typeof authFetch.get).toBe('function');
+      expect(typeof authFetch.post).toBe('function');
+      expect(typeof authFetch.put).toBe('function');
+      expect(typeof authFetch.delete).toBe('function');
+      expect(typeof authFetch.setApiUrl).toBe('function'); // Key API method
+
+      // Test that auth properties are available
+      expect(typeof authFetch.isAuthenticated).toBe('boolean');
+      expect(authFetch.user).toBeTruthy();
+      expect(typeof authFetch.login).toBe('function');
+      expect(typeof authFetch.logout).toBe('function');
+      expect(typeof authFetch.signUp).toBe('function');
+    });
+
+    test('should support existing usage patterns from documentation', async () => {
+      // Test usage pattern from refactored-authentication.md
+      const authFetch = mockUseAuthFetch();
+
+      // Simple authenticated GET request
+      const profile = await authFetch.get('/api/users/me');
+      expect(profile).toEqual({ data: 'get response' });
+
+      // Simple authenticated POST request
+      const result = await authFetch.post('/api/users/me', { name: 'Updated Name' });
+      expect(result).toEqual({ data: 'post response' });
+
+      // Runtime API URL updates (this should still work)
+      authFetch.setApiUrl('https://new-api.com');
+      
+      // Verify no breaking changes in the API surface
+      expect(authFetch.isAuthenticated).toBe(true);
+      expect(authFetch.user?.username).toBe('testuser');
+    });
+
+    test('should support existing OxyServices API', () => {
+      const oxyContext = mockUseOxy();
+      const oxyServices = oxyContext.oxyServices;
+
+      // Existing OxyServices methods should still work
+      expect(typeof oxyServices.getBaseURL).toBe('function');
+      expect(typeof oxyServices.setBaseURL).toBe('function');
+      expect(oxyServices.getBaseURL()).toBe('https://api.oxy.so');
+
+      // This should not throw
+      oxyServices.setBaseURL('https://new-oxy-url.com');
+    });
+
+    test('should demonstrate zero-config setup still works', () => {
+      // From the documentation example
+      console.log('Testing zero-config setup pattern...');
+
+      // 1. Create OxyServices instance (existing pattern)
+      const mockOxyServices = {
+        baseURL: 'https://your-api.com',
+        getBaseURL: () => 'https://your-api.com',
+      };
+
+      // 2. Wrap app with provider (existing pattern)
+      const mockProvider = {
+        oxyServices: mockOxyServices,
+      };
+
+      // 3. Use authFetch in components (existing pattern)
+      const authFetch = mockUseAuthFetch();
+
+      // All existing functionality should work
+      expect(authFetch).toBeTruthy();
+      expect(typeof authFetch.get).toBe('function');
+      expect(typeof authFetch.setApiUrl).toBe('function');
+
+      console.log('✅ Zero-config setup compatibility verified');
+    });
+  });
+
+  describe('New functionality (additive)', () => {
+    test('should add new getAppBaseURL without breaking existing API', () => {
+      const oxyContext = mockUseOxy();
+
+      // New method should be available
+      expect(typeof oxyContext.getAppBaseURL).toBe('function');
+      expect(oxyContext.getAppBaseURL()).toBe('https://app.example.com');
+
+      // Existing methods should still work
+      expect(typeof oxyContext.setApiUrl).toBe('function');
+    });
+
+    test('should demonstrate separation without breaking existing usage', () => {
+      console.log('\nTesting that new separation doesn\'t break existing patterns...');
+
+      const oxyContext = mockUseOxy();
+      
+      // Existing pattern: app sets API URL
+      oxyContext.setApiUrl('https://myapp.example.com');
+      
+      // New behavior: this now only affects public authFetch, not internal calls
+      // But from the app's perspective, the API call is identical
+      expect(typeof oxyContext.setApiUrl).toBe('function');
+      
+      // Internal calls would still work independently (behind the scenes)
+      expect(oxyContext.oxyServices.getBaseURL()).toBe('https://api.oxy.so');
+      
+      console.log('✅ Separation is transparent to existing users');
+    });
+  });
+});

package/src/__tests__/ui/hooks/real-world-scenarios.test.ts

@@ -0,0 +1,224 @@
+/**
+ * Real-world scenario test: Mention app and other Oxy ecosystem apps
+ * This test demonstrates the exact use case described in the issue
+ */
+
+describe('Real-world Oxy Ecosystem Integration', () => {
+  describe('Mention app scenario', () => {
+    // Simulate the complete Mention app setup
+    function simulateMentionAppSetup() {
+      console.log('Setting up Mention app with Oxy authentication...');
+
+      // 1. Create OxyServices for Oxy API authentication
+      const oxyServices = {
+        baseURL: 'https://api.oxy.so',
+        getBaseURL: () => 'https://api.oxy.so',
+        setBaseURL: (url: string) => {
+          console.log(`[OxyServices] Internal URL change to: ${url}`);
+        },
+        // Internal methods that need to call Oxy API
+        authenticateToken: async (token: string) => {
+          const url = `https://api.oxy.so/auth/validate`;
+          console.log(`[Internal] Validating token at: ${url}`);
+          return { valid: true, user: { id: 'user123', username: 'mentionuser' } };
+        },
+        refreshTokens: async () => {
+          const url = `https://api.oxy.so/auth/refresh`;
+          console.log(`[Internal] Refreshing tokens at: ${url}`);
+          return { accessToken: 'new-token', refreshToken: 'new-refresh' };
+        }
+      };
+
+      // 2. Create context with separation
+      let appBaseURL = oxyServices.baseURL; // Initially same
+
+      const oxyContext = {
+        oxyServices,
+        setApiUrl: (url: string) => {
+          console.log(`[App] Setting app API URL to: ${url}`);
+          appBaseURL = url; // Only affects public authFetch
+        },
+        getAppBaseURL: () => appBaseURL,
+        isAuthenticated: true,
+        user: { id: 'user123', username: 'mentionuser' },
+        login: async (username: string, password: string) => ({ id: 'user123' }),
+        logout: async () => {},
+        signUp: async (username: string, email: string, password: string) => ({ id: 'user123' }),
+        activeSessionId: 'session123'
+      };
+
+      // 3. Create authFetch that uses app-specific URL
+      const authFetch = {
+        get: async (endpoint: string) => {
+          const url = `${oxyContext.getAppBaseURL()}${endpoint}`;
+          console.log(`[AuthFetch] GET ${url}`);
+          return { data: `Response from ${url}` };
+        },
+        post: async (endpoint: string, data: any) => {
+          const url = `${oxyContext.getAppBaseURL()}${endpoint}`;
+          console.log(`[AuthFetch] POST ${url}`, data);
+          return { data: `Posted to ${url}`, created: data };
+        },
+        put: async (endpoint: string, data: any) => {
+          const url = `${oxyContext.getAppBaseURL()}${endpoint}`;
+          console.log(`[AuthFetch] PUT ${url}`, data);
+          return { data: `Updated at ${url}`, updated: data };
+        },
+        delete: async (endpoint: string) => {
+          const url = `${oxyContext.getAppBaseURL()}${endpoint}`;
+          console.log(`[AuthFetch] DELETE ${url}`);
+          return { data: `Deleted from ${url}` };
+        },
+        setApiUrl: oxyContext.setApiUrl,
+        isAuthenticated: oxyContext.isAuthenticated,
+        user: oxyContext.user
+      };
+
+      return { oxyServices, oxyContext, authFetch };
+    }
+
+    test('should enable Mention app to use its own backend with Oxy authentication', async () => {
+      console.log('\\n=== Mention App Real-world Test ===\\n');
+
+      const { oxyServices, oxyContext, authFetch } = simulateMentionAppSetup();
+
+      console.log('1. Initial setup - both use Oxy API:');
+      // Internal authentication calls
+      await oxyServices.authenticateToken('user-token');
+      
+      // Public app calls (initially to Oxy API)
+      await authFetch.get('/api/user/profile');
+
+      console.log('\\n2. Mention app configures its own backend:');
+      // This is the key change - app sets its own API URL
+      authFetch.setApiUrl('https://mention.earth/api');
+
+      console.log('\\n3. After configuration - clean separation:');
+      
+      // Internal module calls STILL go to Oxy API
+      await oxyServices.authenticateToken('user-token');
+      await oxyServices.refreshTokens();
+      
+      // Public authFetch calls now go to Mention's backend
+      await authFetch.get('/api/mentions');
+      await authFetch.post('/api/mentions', { 
+        text: 'Hello world from Mention!',
+        userId: 'user123'
+      });
+      await authFetch.put('/api/mentions/123', { 
+        text: 'Updated mention text' 
+      });
+      await authFetch.delete('/api/mentions/456');
+
+      console.log('\\n4. Verification:');
+      const internalURL = oxyServices.getBaseURL();
+      const publicURL = oxyContext.getAppBaseURL();
+      
+      console.log(`Internal (Oxy API): ${internalURL}`);
+      console.log(`Public (Mention API): ${publicURL}`);
+
+      // Verify the separation
+      expect(internalURL).toBe('https://api.oxy.so');
+      expect(publicURL).toBe('https://mention.earth/api');
+
+      console.log('\\n✅ Mention app can use Oxy auth with its own backend!');
+    });
+
+    test('should support multiple Oxy ecosystem apps with different backends', async () => {
+      console.log('\\n=== Multiple Oxy Apps Test ===\\n');
+
+      // Simulate different apps in the Oxy ecosystem
+      const apps = [
+        { name: 'Mention', url: 'https://mention.earth/api' },
+        { name: 'Homiio', url: 'https://homiio.com/api' },
+        { name: 'Custom App', url: 'https://my-custom-app.com/api' }
+      ];
+
+      for (const app of apps) {
+        console.log(`${app.name} app setup:`);
+        
+        const { oxyServices, oxyContext, authFetch } = simulateMentionAppSetup();
+        
+        // Each app configures its own backend
+        authFetch.setApiUrl(app.url);
+        
+        // Internal auth still works with Oxy
+        await oxyServices.authenticateToken('token');
+        
+        // App-specific calls go to app backend
+        await authFetch.get('/api/data');
+        
+        // Verify separation for each app
+        expect(oxyServices.getBaseURL()).toBe('https://api.oxy.so');
+        expect(oxyContext.getAppBaseURL()).toBe(app.url);
+        
+        console.log(`  ✅ ${app.name} configured successfully\\n`);
+      }
+
+      console.log('✅ Multiple apps can coexist with independent backends!');
+    });
+
+    test('should demonstrate zero-config setup with runtime configuration', async () => {
+      console.log('\\n=== Zero-Config + Runtime Config Test ===\\n');
+
+      console.log('1. Zero-config setup (as described in issue):');
+      
+      // App developer just needs to:
+      const { oxyServices, authFetch } = simulateMentionAppSetup();
+      
+      console.log('   - Create OxyServices instance ✅');
+      console.log('   - Wrap app with OxyProvider ✅');
+      console.log('   - Use authFetch in components ✅');
+      
+      console.log('\\n2. Runtime configuration (almost zero setup):');
+      
+      // App can dynamically configure its API
+      authFetch.setApiUrl('https://production.myapp.com/api');
+      
+      console.log('\\n3. Everything works seamlessly:');
+      
+      // Authentication through Oxy
+      await oxyServices.authenticateToken('user-token');
+      
+      // App data through app's backend
+      await authFetch.get('/api/app-specific-data');
+      await authFetch.post('/api/app-actions', { action: 'create' });
+      
+      console.log('\\n✅ Zero-config setup with runtime flexibility achieved!');
+    });
+  });
+
+  describe('Backend integration scenarios', () => {
+    test('should support backend token validation while frontend uses app API', async () => {
+      console.log('\\n=== Backend Integration Test ===\\n');
+
+      // Simulate backend middleware
+      const backendOxyServices = {
+        baseURL: 'https://api.oxy.so',
+        authenticateToken: async (token: string) => {
+          const url = `https://api.oxy.so/auth/validate`;
+          console.log(`[Backend] Validating token at: ${url}`);
+          return { 
+            valid: true, 
+            user: { id: 'user123', username: 'testuser' },
+            userId: 'user123'
+          };
+        }
+      };
+
+      // Simulate frontend using app API
+      const { authFetch } = simulateMentionAppSetup();
+      authFetch.setApiUrl('https://myapp.com/api');
+
+      console.log('1. Frontend makes authenticated request to app backend:');
+      await authFetch.post('/api/protected-endpoint', { data: 'sensitive' });
+
+      console.log('\\n2. Backend validates token with Oxy API:');
+      const tokenValidation = await backendOxyServices.authenticateToken('user-jwt-token');
+      
+      console.log('   Token validation result:', tokenValidation);
+
+      console.log('\\n✅ Backend validates with Oxy, frontend uses app API!');
+    });
+  });
+});