feat(playground): support digest auth (BRU-3769) (#49)

Digest is now a selectable auth mode with the RFC 2617 challenge/response
implemented browser-side (MD5 via js-md5, probe + single retry with
credentials omitted to suppress the native login dialog). Digest failures
surface as response-pane errors instead of silent unauthenticated sends.
Header output is byte-compatible with the desktop app.

Author: sundram-bruno

package-lock.json

@@ -28,4 +28,11 @@ export class EnvEditorComponent extends BaseComponent {
   cardFor(name: string): Locator {
     return this.cardItems.filter({ has: this.page.getByRole('checkbox', { name: `Enable ${name}` }) });
   }
+
+  async addVariable(name: string, value: string): Promise<void> {
+    const index = (await this.nameInputs.count()) - 1;
+    await this.nameInputs.nth(index).fill(name);
+    await this.valueInputs.nth(index).fill(value);
+    await this.cardItems.nth(index + 1).waitFor({ state: 'visible' });
+  }
 }

packages/bruno-api-docs/e2e/components/environments/env-editor.component.ts

@@ -79,20 +79,25 @@ export class PlaygroundComponent extends BaseComponent {
   }
 
   async openSidebarItem(name: string): Promise<void> {
+    await this.ensureSidebarOpen();
     await this.sidebarItem(name).click();
   }
 
   scriptTab(id: string): Locator {
     return this.page.getByTestId(`scripts-tabs-tab-${id}`);
   }
 
+  folderSettingsTab(id: string): Locator {
+    return this.page.getByTestId(`folder-settings-tabs-tab-${id}`);
+  }
+
   async selectScriptTab(id: string): Promise<void> {
     await this.scriptTab(id).click();
   }
 
   async openTreeItem(names: string[]): Promise<void> {
     for (const name of names) {
-      await this.sidebarItem(name).click();
+      await this.openSidebarItem(name);
     }
   }
 
@@ -105,14 +110,19 @@ export class PlaygroundComponent extends BaseComponent {
   }
 
   async openRequest(name: string): Promise<void> {
-    await this.sidebarItem(name).click();
+    await this.openSidebarItem(name);
     await this.view.waitFor({ state: 'visible' });
   }
 
+  async ensureSidebarOpen(): Promise<void> {
+    await this.runner.waitFor({ state: 'visible' });
+    if (await this.sidebarPanel.isVisible()) return;
+    await this.sidebarToggle.click();
+    await this.sidebarPanel.waitFor({ state: 'visible' });
+  }
+
   async openEnvironments(): Promise<void> {
-    if (!(await this.gear.isVisible())) {
-      await this.sidebarToggle.click();
-    }
+    await this.ensureSidebarOpen();
     await this.gear.click();
   }
 

packages/bruno-api-docs/e2e/components/playground.component.ts

@@ -13,6 +13,10 @@ export class RequestAuthComponent extends BaseComponent {
     return this.page.getByTestId(`auth-mode-select-${value}`);
   }
 
+  field(name: string): Locator {
+    return this.page.getByTestId(`auth-${name}`);
+  }
+
   async open(): Promise<void> {
     await this.modeSelect.click();
   }

packages/bruno-api-docs/e2e/components/playground/auth.component.ts

@@ -11,6 +11,11 @@ import type { ResponseBodyFormat } from '../../../src/utils/response';
 export class ResponsePaneComponent extends BaseComponent {
   readonly bodyEditor = new CodeEditorComponent(this.page, 'response-body-editor');
   readonly sendButton = this.page.getByTestId('query-bar-send');
+  readonly status = this.page.getByTestId('response-status');
+  readonly bodyPanel = this.page.getByTestId('response-tabs-panel-response');
+  readonly errorBanner = this.bodyPanel.getByTestId('error-banner');
+  readonly errorTitle = this.bodyPanel.getByTestId('error-title');
+  readonly errorMessage = this.bodyPanel.getByTestId('error-message');
   readonly formatSelector = this.page.getByTestId('response-format-selector');
   // The leading icon in the selector trigger (the eye when preview is on, else the format's icon).
   readonly formatSelectorIcon = this.page.getByTestId('response-format-selector-trigger-icon');

packages/bruno-api-docs/e2e/components/playground/response-pane.component.ts

@@ -0,0 +1,131 @@
+import crypto from 'node:crypto';
+import { test as base } from '@playwright/test';
+import type { Page, Route } from '@playwright/test';
+
+export interface DigestMockOptions {
+  username?: string;
+  password?: string;
+  realm?: string;
+  qop?: 'auth' | null;
+  exposeChallenge?: boolean;
+  sendChallenge?: boolean;
+  challengeOverride?: string;
+}
+
+export interface RecordedRequest {
+  method: string;
+  authorization: string | null;
+  postData: string | null;
+}
+
+const md5 = (input: string) => crypto.createHash('md5').update(input).digest('hex');
+
+const parseAuthHeader = (header: string): Record<string, string> => {
+  const fields: Record<string, string> = {};
+  header.replace(/^Digest\s+/i, '').split(',').forEach((pair) => {
+    const idx = pair.indexOf('=');
+    if (idx === -1) return;
+    fields[pair.substring(0, idx).trim().toLowerCase()] = pair.substring(idx + 1).trim().replace(/"/g, '');
+  });
+  return fields;
+};
+
+export class DigestMock {
+  readonly requests: RecordedRequest[] = [];
+  private readonly issuedNonces = new Set<string>();
+
+  private readonly username: string;
+  private readonly password: string;
+  private readonly realm: string;
+  private readonly qop: 'auth' | null;
+  private readonly exposeChallenge: boolean;
+  private readonly sendChallenge: boolean;
+  private readonly challengeOverride?: string;
+
+  constructor(options: DigestMockOptions = {}) {
+    this.username = options.username ?? 'user';
+    this.password = options.password ?? 'pass';
+    this.realm = options.realm ?? 'digest-lab';
+    this.qop = options.qop === undefined ? 'auth' : options.qop;
+    this.exposeChallenge = options.exposeChallenge ?? true;
+    this.sendChallenge = options.sendChallenge ?? true;
+    this.challengeOverride = options.challengeOverride;
+  }
+
+  async install(page: Page, pattern = '**://localhost:8081/**'): Promise<void> {
+    await page.route(pattern, (route) => this.handle(route));
+  }
+
+  private async handle(route: Route): Promise<void> {
+    const request = route.request();
+
+    if (request.method() === 'OPTIONS') {
+      return route.fulfill({
+        status: 204,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE, OPTIONS',
+          'Access-Control-Allow-Headers': request.headers()['access-control-request-headers'] ?? 'authorization, content-type'
+        }
+      });
+    }
+
+    const authorization = request.headers()['authorization'] ?? null;
+    this.requests.push({ method: request.method(), authorization, postData: request.postData() });
+
+    if (authorization && this.verify(authorization, request.method(), new URL(request.url()))) {
+      return route.fulfill({
+        status: 200,
+        headers: { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' },
+        body: JSON.stringify({ authenticated: true })
+      });
+    }
+
+    return this.challenge(route);
+  }
+
+  private challenge(route: Route): Promise<void> {
+    const nonce = crypto.randomBytes(16).toString('hex');
+    this.issuedNonces.add(nonce);
+    const overrideNonce = this.challengeOverride && /nonce="([^"]+)"/.exec(this.challengeOverride);
+    if (overrideNonce) this.issuedNonces.add(overrideNonce[1]);
+    const digestChallenge
+      = `Digest realm="${this.realm}", nonce="${nonce}", opaque="deadbeef", algorithm=MD5`
+        + (this.qop ? ', qop="auth"' : '');
+    const headers: Record<string, string> = {
+      'Access-Control-Allow-Origin': '*',
+      'Content-Type': 'application/json'
+    };
+    if (this.sendChallenge) {
+      headers['WWW-Authenticate'] = this.challengeOverride ?? digestChallenge;
+    }
+    if (this.exposeChallenge) {
+      headers['Access-Control-Expose-Headers'] = 'WWW-Authenticate';
+    }
+    return route.fulfill({ status: 401, headers, body: JSON.stringify({ challenged: true }) });
+  }
+
+  private verify(authorization: string, method: string, url: URL): boolean {
+    const fields = parseAuthHeader(authorization);
+    if (!fields.nonce || !this.issuedNonces.has(fields.nonce)) return false;
+    const uri = url.pathname + url.search;
+    const ha1 = md5(`${this.username}:${this.realm}:${this.password}`);
+    const ha2 = md5(`${method}:${uri}`);
+    const expected = fields.qop
+      ? md5(`${ha1}:${fields.nonce}:${fields.nc}:${fields.cnonce}:auth:${ha2}`)
+      : md5(`${ha1}:${fields.nonce}:${ha2}`);
+    return fields.response === expected && fields.username === this.username;
+  }
+}
+
+export const test = base.extend<{
+  digestMock: (options?: DigestMockOptions) => Promise<DigestMock>;
+}>({
+  digestMock: async ({ page }, use) => {
+    await use(async (options?: DigestMockOptions) => {
+      const mock = new DigestMock(options);
+      await mock.install(page);
+      return mock;
+    });
+  }
+});

packages/bruno-api-docs/e2e/playwright/digest-mock.fixture.ts

@@ -1,5 +1,6 @@
 import { mergeTests } from '@playwright/test';
 import { test as pagesTest } from './pages.fixture';
+import { test as digestMockTest } from './digest-mock.fixture';
 
 /**
  * Entry point for the test harness — specs import everything (`test`, `expect`)
@@ -8,5 +9,5 @@ import { test as pagesTest } from './pages.fixture';
  * `mergeTests` combines the fixtures from every `*.fixture.ts` file in this folder
  * into one `test`.
  */
-export const test = mergeTests(pagesTest);
+export const test = mergeTests(pagesTest, digestMockTest);
 export { expect } from '@playwright/test';

packages/bruno-api-docs/e2e/playwright/index.ts

@@ -54,12 +54,12 @@ test.describe('collection settings', () => {
     await expect(collectionSettings.authField('placement')).toBeVisible();
   });
 
-  test('does not offer Digest or AWS Signature v4 as selectable auth modes', async ({ collectionSettings }) => {
+  test('offers Digest but not AWS Signature v4 as selectable auth modes', async ({ collectionSettings }) => {
     await collectionSettings.openTab('auth');
     await collectionSettings.authMode.click();
 
     await expect(collectionSettings.authModeOption('basic')).toBeVisible();
-    await expect(collectionSettings.authModeOption('digest')).toHaveCount(0);
+    await expect(collectionSettings.authModeOption('digest')).toBeVisible();
     await expect(collectionSettings.authModeOption('awsv4')).toHaveCount(0);
   });