fix(chat): handle EasyAuth 302 redirect and improve auth error detection in useAgentCard (#8801)

* fix: handle EasyAuth 302 redirect in useAgentCard fetch

* test: add tests for EasyAuth redirect and CORS error handling in useAgentCard

* fix: use status codes for auth detection, remove dead opaqueredirect check, update tests

* refactor: remove unused redirect manual option

* Remove console log

Author: ccastrotrejo

apps/iframe-app/src/hooks/__tests__/useAgentCard.test.tsx

@@ -168,6 +168,7 @@ describe('useAgentCard', () => {
     const onUnauthorized = vi.fn();
     mockFetch.mockResolvedValueOnce({
       ok: false,
+      status: 401,
       statusText: 'Unauthorized',
     });
 
@@ -186,9 +187,68 @@ describe('useAgentCard', () => {
     expect(result.current.error?.message).toBe('Unauthorized');
   });
 
+  it('should call onUnauthorized on network/CORS error (e.g., EasyAuth 302 redirect)', async () => {
+    const onUnauthorized = vi.fn();
+    mockFetch.mockRejectedValueOnce(new TypeError('Failed to fetch'));
+
+    const config: UseAgentCardConfig = {
+      apiUrl: 'https://api.example.com',
+      onUnauthorized,
+    };
+
+    const { result } = renderHook(() => useAgentCard(config), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(onUnauthorized).toHaveBeenCalled();
+    expect(result.current.error?.message).toBe('Unauthorized');
+  });
+
+  it('should error with Unauthorized on network failure even without onUnauthorized callback', async () => {
+    mockFetch.mockRejectedValueOnce(new TypeError('Failed to fetch'));
+
+    const config: UseAgentCardConfig = {
+      apiUrl: 'https://api.example.com',
+    };
+
+    const { result } = renderHook(() => useAgentCard(config), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.error?.message).toBe('Unauthorized');
+  });
+
+  it('should handle 403 forbidden response and call onUnauthorized', async () => {
+    const onUnauthorized = vi.fn();
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 403,
+      statusText: 'Forbidden',
+    });
+
+    const config: UseAgentCardConfig = {
+      apiUrl: 'https://api.example.com',
+      onUnauthorized,
+    };
+
+    const { result } = renderHook(() => useAgentCard(config), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(onUnauthorized).toHaveBeenCalled();
+    expect(result.current.error?.message).toBe('Unauthorized');
+  });
+
   it('should handle non-unauthorized error responses', async () => {
     mockFetch.mockResolvedValueOnce({
       ok: false,
+      status: 500,
       statusText: 'Internal Server Error',
     });
 
@@ -202,7 +262,7 @@ describe('useAgentCard', () => {
       expect(result.current.isError).toBe(true);
     });
 
-    expect(result.current.error?.message).toBe('Failed to fetch agent card: Internal Server Error');
+    expect(result.current.error?.message).toBe('Failed to fetch agent card: 500 Internal Server Error');
   });
 
   it('should not fetch when disabled', async () => {

apps/iframe-app/src/hooks/useAgentCard.ts

@@ -9,6 +9,13 @@ export interface UseAgentCardConfig {
   onUnauthorized?: () => void | Promise<void>;
 }
 
+async function handleUnauthorized(config: UseAgentCardConfig): Promise<never> {
+  if (config.onUnauthorized) {
+    await config.onUnauthorized();
+  }
+  throw new Error('Unauthorized');
+}
+
 async function fetchAgentCard(config: UseAgentCardConfig): Promise<AgentCard> {
   const url = isDirectAgentCardUrl(config.apiUrl) ? config.apiUrl : `${config.apiUrl}/.well-known/agent-card.json`;
 
@@ -28,16 +35,19 @@ async function fetchAgentCard(config: UseAgentCardConfig): Promise<AgentCard> {
     requestInit.credentials = 'include';
   }
 
-  const response = await fetch(url, requestInit);
+  let response: Response;
+  try {
+    response = await fetch(url, requestInit);
+  } catch {
+    // Network error or CORS failure (e.g., EasyAuth 302 redirect to login page)
+    return handleUnauthorized(config);
+  }
 
   if (!response.ok) {
-    if (response.statusText === 'Unauthorized') {
-      if (config.onUnauthorized) {
-        await config.onUnauthorized();
-      }
-      throw new Error('Unauthorized');
+    if (response.status === 401 || response.status === 403) {
+      return handleUnauthorized(config);
     }
-    throw new Error(`Failed to fetch agent card: ${response.statusText}`);
+    throw new Error(`Failed to fetch agent card: ${response.status} ${response.statusText}`.trim());
   }
 
   return (await response.json()) as AgentCard;