fix: update default authorization header to include empty Bearer token and improve validation logic

Author: kentcdodds

client/src/App.tsx

@@ -165,7 +165,13 @@ const App = () => {
     }
 
     // Default to empty array
-    return [];
+    return [
+      {
+        name: "Authorization",
+        value: "Bearer ",
+        enabled: false,
+      },
+    ];
   });
 
   const [pendingSampleRequests, setPendingSampleRequests] = useState<

client/src/lib/hooks/__tests__/useConnection.test.tsx

@@ -914,14 +914,14 @@ describe("useConnection", () => {
       expect(headers).toHaveProperty("Authorization", "Bearer mock-token");
     });
 
-    test("replaces empty Bearer token placeholder with OAuth token", async () => {
+    test("warns of enabled empty Bearer token", async () => {
       // This test prevents regression of the bug where default "Bearer " header
       // prevented OAuth token injection, causing infinite auth loops
       const customHeaders: CustomHeaders = [
         {
           name: "Authorization",
           value: "Bearer ", // Empty Bearer token placeholder
-          enabled: true,
+          enabled: true, // enabled
         },
       ];
 
@@ -937,8 +937,8 @@ describe("useConnection", () => {
       });
 
       const headers = mockSSETransport.options?.requestInit?.headers;
-      // Should replace the empty "Bearer " with actual OAuth token
-      expect(headers).toHaveProperty("Authorization", "Bearer mock-token");
+
+      expect(headers).toHaveProperty("Authorization", "Bearer");
       // Should not have the x-custom-auth-headers since Authorization is standard
       expect(headers).not.toHaveProperty("x-custom-auth-headers");
 

client/src/lib/hooks/useConnection.ts

@@ -402,7 +402,7 @@ export function useConnection({
 
       const isEmptyAuthHeader = (header: CustomHeaders[number]) =>
         header.name.trim().toLowerCase() === "authorization" &&
-        header.value.trim() === "Bearer";
+        header.value.trim().toLowerCase() === "bearer";
 
       // Check for empty Authorization headers and show validation error
       const hasEmptyAuthHeader = finalHeaders.some(
@@ -418,7 +418,11 @@ export function useConnection({
         });
       }
 
-      const needsOAuthToken = finalHeaders.length === 0 || hasEmptyAuthHeader;
+      const needsOAuthToken = !finalHeaders.some(
+        (header) =>
+          header.enabled &&
+          header.name.trim().toLowerCase() === "authorization",
+      );
 
       if (needsOAuthToken) {
         const oauthToken = (await serverAuthProvider.tokens())?.access_token;