// Selfhost-only (browser): the multi-method auth UX beyond the no-auth case —// an OAuth-DETECTED server gets an API key declared alongside at add time, and// the connect modal's "+ method" adds a custom API key to an OAuth integration// without displacing it. Selfhost-only because cloud has no browser identity// yet and these paste a credential into the default store; the cross-target// no-auth add-flow variant lives in scenarios/auth-methods-ui.test.ts. The// selfhost instance runs with EXECUTOR_ALLOW_LOCAL_NETWORK so its outbound// probe/dial can reach the loopback test servers. Video is the artifact.import { randomBytes } from "node:crypto";import { createServer } from "node:http"; import { expect } from "@effect/vitest";import { Effect, Schema } from "effect";import { composePluginApi } from "@executor-js/api/server";import { mcpHttpPlugin } from "@executor-js/plugin-mcp/api";import {  makeGreetingMcpServer,  serveMcpServer,  serveMcpServerWithOAuth,} from "@executor-js/plugin-mcp/testing";import { OAuthTestServer } from "@executor-js/sdk/testing";import { IntegrationSlug } from "@executor-js/sdk/shared"; import { scenario } from "../src/scenario";import { Api, Browser, Target } from "../src/services"; const api = composePluginApi([mcpHttpPlugin()] as const); const SlackDeepLinkManifest = Schema.Struct({  oauth_config: Schema.Struct({    redirect_urls: Schema.Array(Schema.String),  }),  settings: Schema.Struct({    is_mcp_enabled: Schema.Boolean,  }),}); const decodeSlackDeepLinkManifest = Schema.decodeUnknownSync(  Schema.fromJsonString(SlackDeepLinkManifest),); const SLACK_SCOPES = [  "search:read.public",  "search:read.private",  "search:read.mpim",  "search:read.im",  "search:read.files",  "search:read.users",  "chat:write",  "channels:history",  "groups:history",  "mpim:history",  "im:history",  "canvases:read",  "canvases:write",  "users:read",  "users:read.email",  "reactions:write",  "reactions:read",  "emoji:read",  "files:read",  "channels:write",  "groups:write",  "im:write",  "mpim:write",  "channels:read",  "groups:read",  "mpim:read",] as const; const serveSlackLikeMcpOAuthServer = () =>  Effect.acquireRelease(    Effect.callback<{ readonly endpoint: string; readonly close: () => void }>((resume) => {      const server = createServer((request, response) => {        const address = server.address();        const port = typeof address === "object" && address ? address.port : 0;        const origin = `http://127.0.0.1:${port}`;        const pathname = new URL(request.url ?? "/", origin).pathname;         if (pathname === "/mcp") {          response.writeHead(401, {            "content-type": "application/json",            "www-authenticate": `Bearer resource_metadata="${origin}/.well-known/oauth-protected-resource/mcp"`,          });          response.end(            JSON.stringify({              jsonrpc: "2.0",              id: null,              error: { code: -32001, message: "missing_token" },            }),          );          return;        }         if (pathname === "/.well-known/oauth-protected-resource/mcp") {          response.writeHead(200, { "content-type": "application/json" });          response.end(            JSON.stringify({              resource: `${origin}/mcp`,              authorization_servers: [`${origin}/oauth`],              scopes_supported: SLACK_SCOPES,            }),          );          return;        }         if (pathname === "/.well-known/oauth-authorization-server/oauth") {          response.writeHead(200, { "content-type": "application/json" });          response.end(            JSON.stringify({              issuer: `${origin}/oauth`,              authorization_endpoint: "https://slack.com/oauth/v2_user/authorize",              token_endpoint: "https://slack.com/api/oauth.v2.user.access",              code_challenge_methods_supported: ["S256"],              token_endpoint_auth_methods_supported: ["client_secret_post"],            }),          );          return;        }         response.writeHead(404, { "content-type": "text/plain" });        response.end("not found");      });       server.listen(0, "127.0.0.1", () => {        const address = server.address();        const port = typeof address === "object" && address ? address.port : 0;        resume(          Effect.succeed({            endpoint: `http://127.0.0.1:${port}/mcp`,            close: () => {              server.close();              server.closeAllConnections();            },          }),        );      });    }),    (server) => Effect.sync(server.close),  ); scenario(  "Auth methods · a detected-OAuth server gets an API key declared alongside",  {},  Effect.scoped(    Effect.gen(function* () {      const target = yield* Target;      const browser = yield* Browser;      // An OAuth-PROTECTED server: the probe gets a 401 with protected-      // resource metadata pointing at the test OAuth issuer, so the method      // list seeds with the detected OAuth row.      const server = yield* serveMcpServerWithOAuth(        () =>          makeGreetingMcpServer({            name: `oauth-mcp-${randomBytes(3).toString("hex")}`,          }),        { path: "/mcp" },      );      const identity = yield* target.newIdentity();       yield* browser.session(identity, async ({ page, step }) => {        await step("Open the add-MCP flow pointed at the server", async () => {          await page.goto(`/integrations/add/mcp?url=${encodeURIComponent(server.endpoint)}`, {            waitUntil: "networkidle",          });          // Generous timeout: the debounced probe request can queue behind a          // busy dev server under CI load, and there is no clean client-side          // re-trigger to poke it mid-flight.          await page.getByText("How does this server authenticate?").waitFor({ timeout: 90_000 });        });         await step("The probe detected OAuth", async () => {          await page.getByText("Method 1 · Detected").waitFor();          // The OAuth editor declares discovery-at-connect, not pasted URLs.          await page.getByText("OAuth metadata is discovered from this server").waitFor();        });         await step("Declare an API key method alongside OAuth", async () => {          await page.getByRole("button", { name: "Add method" }).click();          await page.getByText("Method 2").waitFor();          await page.getByPlaceholder("Authorization").last().waitFor();        });         await step("Add the integration with both methods", async () => {          await page.getByRole("button", { name: "Add integration" }).click();          await page.waitForURL(/\/integrations\/(?!add\b)[^/?]+$/, {            timeout: 30_000,          });          await page.getByText("Connections").first().waitFor();        });         await step("The connect modal offers OAuth and the API key", async () => {          await page.getByRole("button", { name: "Add connection" }).first().click();          await page.getByRole("tab", { name: "OAuth" }).waitFor();          await page.getByRole("tab", { name: "API key (Authorization)" }).waitFor();        });      });    }),  ).pipe(Effect.provide(OAuthTestServer.layer())),); scenario(  "Slack MCP · Register OAuth app shows the Slack setup deep link",  {},  Effect.scoped(    Effect.gen(function* () {      const target = yield* Target;      const browser = yield* Browser;      const { client: makeApiClient } = yield* Api;      const server = yield* serveSlackLikeMcpOAuthServer();      const identity = yield* target.newIdentity();      const client = yield* makeApiClient(api, identity);      const integrationSlug = `slack-mcp-setup-${randomBytes(3).toString("hex")}`;      let slug: string | null = null;       yield* Effect.gen(function* () {        yield* browser.session(identity, async ({ page, step }) => {          await step("Open the add-MCP flow pointed at the Slack-shaped server", async () => {            await page.goto(`/integrations/add/mcp?url=${encodeURIComponent(server.endpoint)}`, {              waitUntil: "networkidle",            });            await page.getByText("How does this server authenticate?").waitFor({ timeout: 90_000 });            await page.getByText("OAuth metadata is discovered from this server").waitFor();          });           await step("Add the OAuth MCP integration", async () => {            await page.getByPlaceholder("e.g. Linear").fill("Slack MCP Setup");            await page.getByPlaceholder("sentry_api").fill(integrationSlug);            await page.getByRole("button", { name: "Add integration" }).click();            await page.waitForURL(/\/integrations\/(?!add\b)[^/?]+$/, {              timeout: 30_000,            });            const pathname = new URL(page.url()).pathname;            slug = decodeURIComponent(pathname.split("/").filter(Boolean).at(-1) ?? "");            await page.getByText("Connections").first().waitFor();          });           await step("Fall back from automatic setup to app registration", async () => {            await page.getByRole("button", { name: "Add connection" }).first().click();            await page              .getByRole("dialog")              .getByRole("button", { name: "Connect", exact: true })              .click();            await page.getByRole("button", { name: "Register app", exact: true }).waitFor({              timeout: 30_000,            });            await page.getByRole("button", { name: "Register app", exact: true }).click();            await page.getByRole("heading", { name: "Register OAuth app" }).waitFor();          });           await step("The Slack setup panel embeds this form's callback URL", async () => {            await page.getByText("Slack requires a pre-registered app").waitFor();            const callbackUrl = await page.locator("#oauth-callback-url").innerText();            const href = await page              .getByRole("link", { name: "Create the Slack app" })              .getAttribute("href");            expect(              href?.startsWith("https://api.slack.com/apps?new_app=1&manifest_json="),              "the Slack app link targets Slack's manifest deep link",            ).toBe(true);             const url = new URL(href ?? "https://invalid.example");            const rawManifest = url.searchParams.get("manifest_json");            expect(rawManifest, "manifest_json is present").not.toBeNull();            const manifest = decodeSlackDeepLinkManifest(decodeURIComponent(rawManifest ?? "{}"));            expect(manifest.settings.is_mcp_enabled, "MCP access is enabled").toBe(true);            expect(              manifest.oauth_config.redirect_urls,              "the deep link uses the displayed callback URL",            ).toEqual([callbackUrl]);          });        });      }).pipe(        Effect.ensuring(          Effect.gen(function* () {            if (slug !== null) {              yield* client.mcp                .removeServer({ params: { slug: IntegrationSlug.make(slug) } })                .pipe(Effect.ignore);            }          }),        ),      );    }),  ),); scenario(  "Auth methods · a custom method added in the connect modal keeps OAuth",  {},  Effect.scoped(    Effect.gen(function* () {      const target = yield* Target;      const browser = yield* Browser;      const { client: makeApiClient } = yield* Api;      // A server that only accepts the bearer key — the connection created      // through the custom method must render it on the wire.      const token = `e2e-modal-key-${randomBytes(6).toString("hex")}`;      const server = yield* serveMcpServer(() => makeGreetingMcpServer(), {        auth: {          validateAuthorization: (authorization) =>            Effect.succeed(authorization === `Bearer ${token}`),        },      });       const identity = yield* target.newIdentity();      const client = yield* makeApiClient(api, identity);      const slug = `mcp-modal-key-${randomBytes(3).toString("hex")}`;       // The integration as the add flow would have left it: OAuth only.      yield* client.mcp.addServer({        payload: {          transport: "remote",          name: "OAuth-only MCP",          endpoint: server.endpoint,          slug,          authenticationTemplate: [{ kind: "oauth2" }],        },      });       // Remove the integration (and the connection it creates) afterward —      // selfhost identities share one tenant, so a leaked connection would      // break the "fresh identity has zero connections" scenario.      yield* Effect.gen(function* () {        yield* browser.session(identity, async ({ page, step }) => {          await step("Open the integration's connect modal", async () => {            await page.goto(`/integrations/${slug}`, {              waitUntil: "networkidle",            });            await page.getByRole("button", { name: "Add connection" }).first().click();            await page.getByRole("tab", { name: "OAuth" }).waitFor();          });           await step("Add a custom API key method from the modal", async () => {            await page.getByRole("button", { name: "Add authentication method" }).click();            await page.getByLabel("Method name").fill("Team API key");            await page.getByPlaceholder("Authorization").fill("Authorization");            await page.getByPlaceholder("Bearer ").fill("Bearer ");            await page.getByRole("button", { name: "Add method" }).click();          });           await step("OAuth survives next to the new method", async () => {            await page.getByRole("tab", { name: "API key (Authorization)" }).waitFor();            await page.getByRole("tab", { name: "OAuth" }).waitFor();          });           await step("Connect through the new method", async () => {            // Custom "Authorization: Bearer " method renders the affixed field            // with no placeholder; its accessible name is the placement name            // ("Authorization"). The credential wizard is two steps: Continue            // (validate) then Add connection (name + place).            await page              .getByRole("dialog")              .getByRole("textbox", { name: "Authorization" })              .fill(token);            await page.getByRole("button", { name: "Continue" }).click();            // Scoped to the dialog: the page also has its own "Add connection"            // trigger button, which would otherwise make this ambiguous.            await page.getByRole("dialog").getByRole("button", { name: "Add connection" }).click();            await page.getByText("Connection added").waitFor();          });        });         // Wire proof: discovery for the new connection hit the server with        // the credential rendered through the custom method.        const requests = yield* server.requests;        expect(          requests.some((request) => request.authorization === `Bearer ${token}`),          "the server saw the bearer rendered through the custom method",        ).toBe(true);      }).pipe(        Effect.ensuring(          client.mcp            .removeServer({ params: { slug: IntegrationSlug.make(slug) } })            .pipe(Effect.ignore),        ),      );    }),  ),); scenario(  "Auth methods · the connect modal collects one value per input of a 2-input method",  {},  Effect.scoped(    Effect.gen(function* () {      const target = yield* Target;      const browser = yield* Browser;      const { client: makeApiClient } = yield* Api;      // A method with TWO credential inputs: a bearer header rendered from      // `api_token` and a team-id query param rendered from `team_id`. The      // server requires both on every request, so the connect-time      // discovery dial only succeeds when the modal collected both values.      const apiToken = `e2e-two-input-${randomBytes(4).toString("hex")}`;      const teamId = `team-${randomBytes(3).toString("hex")}`;      const server = yield* serveMcpServer(() => makeGreetingMcpServer(), {        auth: {          validateAuthorization: (authorization) =>            Effect.succeed(authorization === `Bearer ${apiToken}`),        },      });       const identity = yield* target.newIdentity();      const client = yield* makeApiClient(api, identity);      const slug = `mcp-two-input-${randomBytes(3).toString("hex")}`;       yield* client.mcp.addServer({        payload: {          transport: "remote",          name: "Two-input MCP",          endpoint: server.endpoint,          slug,          authenticationTemplate: [            {              slug: "token_and_team",              type: "apiKey",              headers: {                Authorization: ["Bearer ", { type: "variable", name: "api_token" }],              },              queryParams: { team_id: [{ type: "variable", name: "team_id" }] },            },          ],        },      });       yield* Effect.gen(function* () {        yield* browser.session(identity, async ({ page, step }) => {          await step("Open the integration's connect modal", async () => {            await page.goto(`/integrations/${slug}`, {              waitUntil: "networkidle",            });            await page.getByRole("button", { name: "Add connection" }).first().click();            await page.getByRole("tab", { name: "API key (Authorization)" }).waitFor();          });           const dialog = page.getByRole("dialog");          await step("The method renders one field per credential input", async () => {            await dialog.getByRole("textbox", { name: "Authorization" }).waitFor();            await dialog.getByRole("textbox", { name: "team_id" }).waitFor();          });           await step("Fill both values and connect", async () => {            await dialog.getByRole("textbox", { name: "Authorization" }).fill(apiToken);            await dialog.getByRole("textbox", { name: "team_id" }).fill(teamId);            // The credential wizard is two steps: Continue (validate) then Add            // connection (name + place).            await page.getByRole("button", { name: "Continue" }).click();            // Scoped to the dialog: the page also has its own "Add connection"            // trigger button, which would otherwise make this ambiguous.            await dialog.getByRole("button", { name: "Add connection" }).click();            await page.getByText("Connection added").waitFor();          });        });         // Wire proof: the discovery dial rendered BOTH inputs — the bearer        // header (the server rejects anything else) and the team-id query.        const requests = yield* server.requests;        expect(          requests.some(            (request) =>              request.authorization === `Bearer ${apiToken}` &&              request.url.includes(`team_id=${teamId}`),          ),          "the server saw the bearer header and the team-id query param together",        ).toBe(true);      }).pipe(        Effect.ensuring(          client.mcp            .removeServer({ params: { slug: IntegrationSlug.make(slug) } })            .pipe(Effect.ignore),        ),      );    }),  ),);