feat(http-auth): resolve profiles by UUID and allow multi-auth triggers

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/server/http-auths-store.js

@@ -4,12 +4,27 @@ import { assertHttpStatus } from "./http-pages-store.js";
 
 const MAX_NAME_LENGTH = 128;
 const NAME_RE = /^[A-Za-z0-9._-]+$/;
+const UUID_RE =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
 const ALLOWED_TYPES = new Set(["bearer", "basic", "header"]);
 
 function nowIso() {
   return new Date().toISOString();
 }
 
+/**
+ * @param {unknown} id
+ * @returns {string}
+ */
+export function assertAuthId(id) {
+  if (typeof id !== "string" || !UUID_RE.test(id)) {
+    const err = new Error("invalid auth id");
+    err.statusCode = 400;
+    throw err;
+  }
+  return id.toLowerCase();
+}
+
 /**
  * @param {unknown} name
  * @returns {string}
@@ -218,10 +233,11 @@ function publicAuth(row, { includeConfig = true } = {}) {
 
 /**
  * Internal: full config including literals (for runtime auth checks).
- * @param {string} name
+ * @param {string} id
  */
-export async function getHttpAuthInternal(name) {
+export async function getHttpAuthInternal(id) {
-  const row = await db("http_auths").where({ name: assertAuthName(name) }).first();
+  const authId = assertAuthId(id);
+  const row = await db("http_auths").where({ id: authId }).first();
   if (!row) return null;
   return {
     id: row.id,
@@ -235,11 +251,11 @@ export async function getHttpAuthInternal(name) {
 
 /**
  * Return only plaintext literal credential fields (not KV refs or encrypted secrets).
- * @param {string} name
+ * @param {string} id
- * @returns {Promise<{ name: string, type: string, literals: Record<string, string> } | null>}
+ * @returns {Promise<{ id: string, name: string, type: string, literals: Record<string, string> } | null>}
  */
-export async function revealHttpAuthLiterals(name) {
+export async function revealHttpAuthLiterals(id) {
-  const internal = await getHttpAuthInternal(name);
+  const internal = await getHttpAuthInternal(id);
   if (!internal) return null;
   /** @type {Record<string, string>} */
   const literals = {};
@@ -248,7 +264,12 @@ export async function revealHttpAuthLiterals(name) {
     const v = cfg[key];
     if (typeof v === "string") literals[key] = v;
   }
-  return { name: internal.name, type: internal.type, literals };
+  return {
+    id: internal.id,
+    name: internal.name,
+    type: internal.type,
+    literals,
+  };
 }
 
 export async function listHttpAuths() {
@@ -256,24 +277,23 @@ export async function listHttpAuths() {
   return rows.map((r) => publicAuth(r));
 }
 
-/**
- * @param {string} name
- */
-export async function getHttpAuthByName(name) {
-  const row = await db("http_auths").where({ name: assertAuthName(name) }).first();
-  return row ? publicAuth(row) : null;
-}
-
 /**
  * @param {string} id
  */
 export async function getHttpAuthById(id) {
-  const row = await db("http_auths").where({ id }).first();
+  let authId;
+  try {
+    authId = assertAuthId(id);
+  } catch {
+    return null;
+  }
+  const row = await db("http_auths").where({ id: authId }).first();
   return row ? publicAuth(row) : null;
 }
 
 /**
  * @param {{
+ *   id?: string | null,
  *   name: string,
  *   type: string,
  *   config?: unknown,
@@ -282,6 +302,7 @@ export async function getHttpAuthById(id) {
  * }} opts
  */
 export async function upsertHttpAuth({
+  id,
   name,
   type,
   config,
@@ -290,7 +311,26 @@ export async function upsertHttpAuth({
 }) {
   const authName = assertAuthName(name);
   const authType = assertAuthType(type);
-  const existing = await db("http_auths").where({ name: authName }).first();
+
+  /** @type {Record<string, unknown> | null} */
+  let existing = null;
+  if (id != null && String(id).length > 0) {
+    const authId = assertAuthId(id);
+    existing = await db("http_auths").where({ id: authId }).first();
+    if (!existing) {
+      const err = new Error("auth not found");
+      err.statusCode = 404;
+      throw err;
+    }
+  }
+
+  const nameClash = await db("http_auths").where({ name: authName }).first();
+  if (nameClash && (!existing || nameClash.id !== existing.id)) {
+    const err = new Error(`auth name "${authName}" already exists`);
+    err.statusCode = 409;
+    throw err;
+  }
+
   const prevConfig = existing ? parseConfig(existing.config) : {};
   const normalized = normalizeAuthConfig(authType, config, {
     keepLiteralsFrom: prevConfig,
@@ -315,18 +355,19 @@ export async function upsertHttpAuth({
     await db("http_auths")
       .where({ id: existing.id })
       .update({
+        name: authName,
         type: authType,
         config: configJson,
         unauthorized_status: unauthStatus,
         unauthorized_response: unauthResponse,
         updated_at: now,
       });
-    return getHttpAuthById(existing.id);
+    return getHttpAuthById(/** @type {string} */ (existing.id));
   }
 
-  const id = randomUUID();
+  const newId = randomUUID();
   await db("http_auths").insert({
-    id,
+    id: newId,
     name: authName,
     type: authType,
     config: configJson,
@@ -335,7 +376,7 @@ export async function upsertHttpAuth({
     created_at: now,
     updated_at: now,
   });
-  return getHttpAuthById(id);
+  return getHttpAuthById(newId);
 }
 
 /**
@@ -343,6 +384,7 @@ export async function upsertHttpAuth({
  * @returns {Promise<boolean>}
  */
 export async function deleteHttpAuth(id) {
-  const n = await db("http_auths").where({ id }).del();
+  const authId = assertAuthId(id);
+  const n = await db("http_auths").where({ id: authId }).del();
   return n > 0;
 }

packages/server/http-trigger-auth.js

@@ -77,23 +77,28 @@ export async function resolveCredentialValue(field, ctx) {
 }
 
 /**
- * Normalize trigger.auth into an inline auth mechanism object.
+ * @typedef {{
- * @param {unknown} authField
- * @returns {Promise<{
  *   type: string,
  *   config: Record<string, unknown>,
  *   unauthorized_status?: number | null,
  *   unauthorized_response?: string | null,
  *   label: string,
- * } | null>}
+ * }} AuthMechanism
  */
-export async function resolveAuthMechanism(authField) {
-  if (authField == null || authField === false) return null;
 
-  if (typeof authField === "string") {
+/**
-    const named = await getHttpAuthInternal(authField);
+ * Resolve one auth entry (auth profile id UUID, or inline object).
+ * @param {unknown} entry
+ * @returns {Promise<AuthMechanism | null>}
+ */
+export async function resolveAuthMechanism(entry) {
+  if (entry == null || entry === false) return null;
+
+  if (typeof entry === "string") {
+    try {
+      const named = await getHttpAuthInternal(entry);
       if (!named) {
-      log.warn({ name: authField }, "http auth: named profile not found");
+        log.warn({ id: entry }, "http auth: profile id not found");
         return null;
       }
       return {
@@ -101,14 +106,18 @@ export async function resolveAuthMechanism(authField) {
         config: named.config,
         unauthorized_status: named.unauthorized_status,
         unauthorized_response: named.unauthorized_response,
-      label: authField,
+        label: named.name,
       };
+    } catch (err) {
+      log.warn({ err, id: entry }, "http auth: invalid profile id");
+      return null;
+    }
   }
 
-  if (typeof authField === "object" && !Array.isArray(authField)) {
+  if (typeof entry === "object" && !Array.isArray(entry)) {
-    const obj = /** @type {Record<string, unknown>} */ (authField);
+    const obj = /** @type {Record<string, unknown>} */ (entry);
-    if (typeof obj.name === "string" && obj.name.length > 0 && !obj.type) {
+    if (typeof obj.id === "string" && obj.id.length > 0 && !obj.type) {
-      return resolveAuthMechanism(obj.name);
+      return resolveAuthMechanism(obj.id);
     }
     try {
       const type = assertAuthType(obj.type);
@@ -116,6 +125,7 @@ export async function resolveAuthMechanism(authField) {
       const config = { ...obj };
       delete config.type;
       delete config.name;
+      delete config.id;
       return {
         type,
         config,
@@ -133,18 +143,64 @@ export async function resolveAuthMechanism(authField) {
 }
 
 /**
- * Label for mermaid / summary (sync, no DB).
+ * Normalize trigger.auth (array of auth ids / inline objects) into mechanisms.
+ * Empty / null / false → no auth. Any entry that fails to resolve is skipped;
+ * if the field was non-empty but nothing resolves, returns [] (caller treats as unauthorized).
  * @param {unknown} authField
+ * @returns {Promise<AuthMechanism[]>}
  */
-export function authLabel(authField) {
+export async function resolveAuthMechanisms(authField) {
-  if (authField == null) return null;
+  if (authField == null || authField === false) return [];
-  if (typeof authField === "string") return authField;
+  if (!Array.isArray(authField) || authField.length === 0) return [];
-  if (typeof authField === "object" && !Array.isArray(authField)) {
+
-    const o = /** @type {Record<string, unknown>} */ (authField);
+  /** @type {AuthMechanism[]} */
-    if (typeof o.name === "string" && o.name) return o.name;
+  const out = [];
+  for (const entry of authField) {
+    const mech = await resolveAuthMechanism(entry);
+    if (mech) out.push(mech);
+  }
+  return out;
+}
+
+/**
+ * True if any mechanism accepts the request (OR).
+ * @param {import("fastify").FastifyRequest} req
+ * @param {AuthMechanism[]} mechanisms
+ * @param {{ owner: string, workflowKey: string }} ctx
+ */
+export async function checkAnyHttpAuth(req, mechanisms, ctx) {
+  for (const mechanism of mechanisms) {
+    if (await checkHttpAuth(req, mechanism, ctx)) return true;
+  }
+  return false;
+}
+
+/**
+ * Label for mermaid / summary (sync). Prefer resolved display names when provided.
+ * @param {unknown} authField
+ * @param {Map<string, string> | Record<string, string>} [nameById]
+ */
+export function authLabel(authField, nameById) {
+  if (authField == null || authField === false) return null;
+  if (!Array.isArray(authField) || authField.length === 0) return null;
+  const lookup =
+    nameById instanceof Map
+      ? (id) => nameById.get(id)
+      : nameById
+        ? (id) => nameById[id]
+        : () => undefined;
+  const parts = authField.map((entry) => {
+    if (typeof entry === "string") return lookup(entry) ?? entry;
+    if (entry && typeof entry === "object" && !Array.isArray(entry)) {
+      const o = /** @type {Record<string, unknown>} */ (entry);
+      if (typeof o.id === "string" && o.id && !o.type) {
+        return lookup(o.id) ?? o.id;
+      }
       if (typeof o.type === "string" && o.type) return o.type;
     }
     return "auth";
+  });
+  return parts.join("|");
 }
 
 /**

packages/server/src/api/http-auths.js

@@ -1,9 +1,9 @@
 import {
+  assertAuthId,
   assertAuthName,
   assertAuthType,
   listHttpAuths,
   getHttpAuthById,
-  getHttpAuthByName,
   upsertHttpAuth,
   deleteHttpAuth,
   revealHttpAuthLiterals,
@@ -18,28 +18,28 @@ export default async function httpAuthsPlugin(fastify) {
     return { auths: await listHttpAuths() };
   });
 
-  fastify.get("/http-auths/:name/reveal", async (req, reply) => {
+  fastify.get("/http-auths/:id/reveal", async (req, reply) => {
-    const { name } = /** @type {{ name: string }} */ (req.params);
+    const { id } = /** @type {{ id: string }} */ (req.params);
     try {
-      assertAuthName(name);
+      assertAuthId(id);
     } catch (err) {
       return reply.code(err.statusCode ?? 400).send({ error: err.message });
     }
-    const revealed = await revealHttpAuthLiterals(name);
+    const revealed = await revealHttpAuthLiterals(id);
     if (!revealed) {
       return reply.code(404).send({ error: "auth not found" });
     }
     return revealed;
   });
 
-  fastify.get("/http-auths/:name", async (req, reply) => {
+  fastify.get("/http-auths/:id", async (req, reply) => {
-    const { name } = /** @type {{ name: string }} */ (req.params);
+    const { id } = /** @type {{ id: string }} */ (req.params);
     try {
-      assertAuthName(name);
+      assertAuthId(id);
     } catch (err) {
       return reply.code(err.statusCode ?? 400).send({ error: err.message });
     }
-    const auth = await getHttpAuthByName(name);
+    const auth = await getHttpAuthById(id);
     if (!auth) {
       return reply.code(404).send({ error: "auth not found" });
     }
@@ -48,6 +48,7 @@ export default async function httpAuthsPlugin(fastify) {
 
   fastify.put("/http-auths", async (req, reply) => {
     const body = /** @type {{
+      id?: string | null,
       name?: string,
       type?: string,
       config?: unknown,
@@ -57,6 +58,9 @@ export default async function httpAuthsPlugin(fastify) {
     try {
       assertAuthName(String(body.name ?? ""));
       assertAuthType(body.type);
+      if (body.id != null && String(body.id).length > 0) {
+        assertAuthId(String(body.id));
+      }
       if (
         body.unauthorized_response != null &&
         String(body.unauthorized_response).length > 0
@@ -69,6 +73,7 @@ export default async function httpAuthsPlugin(fastify) {
         );
       }
       const auth = await upsertHttpAuth({
+        id: body.id != null && String(body.id).length > 0 ? String(body.id) : null,
         name: String(body.name),
         type: String(body.type),
         config: body.config,
@@ -83,6 +88,11 @@ export default async function httpAuthsPlugin(fastify) {
 
   fastify.delete("/http-auths/:id", async (req, reply) => {
     const { id } = /** @type {{ id: string }} */ (req.params);
+    try {
+      assertAuthId(id);
+    } catch (err) {
+      return reply.code(err.statusCode ?? 400).send({ error: err.message });
+    }
     const existing = await getHttpAuthById(id);
     if (!existing) {
       return reply.code(404).send({ error: "auth not found" });

packages/server/test/http-trigger-auth-smoke.js

@@ -12,9 +12,12 @@ import {
   getHttpAuthInternal,
 } from "../http-auths-store.js";
 import {
+  authLabel,
+  checkAnyHttpAuth,
   checkHttpAuth,
   coerceCredentialString,
   resolveAuthMechanism,
+  resolveAuthMechanisms,
   resolveCredentialValue,
   resolveUnauthorizedSpec,
   sendHttpPageOrJson,
@@ -180,7 +183,7 @@ const secret = await upsertSecret({
   assert(!missingSec, "missing secret fails closed");
 }
 
-// --- named profile ---
+// --- named profile (by id) ---
 const profile = await upsertHttpAuth({
   name: "webhook-smoke",
   type: "bearer",
@@ -188,9 +191,10 @@ const profile = await upsertHttpAuth({
   unauthorized_status: 403,
   unauthorized_response: "deny-smoke",
 });
+assert(typeof profile.id === "string" && profile.id.length > 0, "profile has id");
 {
-  const mech = await resolveAuthMechanism("webhook-smoke");
+  const mech = await resolveAuthMechanism(profile.id);
-  assert(mech?.label === "webhook-smoke", "named profile");
+  assert(mech?.label === "webhook-smoke", "profile by id");
   const ok = await checkHttpAuth(
     mockReq({ authorization: "Bearer named-token" }),
     mech,
@@ -202,9 +206,68 @@ const profile = await upsertHttpAuth({
   assert(pageName === "deny-smoke", "profile unauth page");
 }
 
+// --- rename keeps id ---
+{
+  const renamed = await upsertHttpAuth({
+    id: profile.id,
+    name: "webhook-renamed",
+    type: "bearer",
+    config: { token: { keep: true } },
+    unauthorized_status: 403,
+    unauthorized_response: "deny-smoke",
+  });
+  assert(renamed.id === profile.id, "rename keeps id");
+  assert(renamed.name === "webhook-renamed", "rename updates name");
+  const mech = await resolveAuthMechanism(profile.id);
+  assert(mech?.label === "webhook-renamed", "resolve uses new name label");
+  const ok = await checkHttpAuth(
+    mockReq({ authorization: "Bearer named-token" }),
+    mech,
+    ctx,
+  );
+  assert(ok, "credentials survive rename");
+}
+
+// --- multi-auth OR ---
+const basicProfile = await upsertHttpAuth({
+  name: "basic-smoke",
+  type: "basic",
+  config: { user: "bob", password: "p@ss" },
+});
+{
+  const mechs = await resolveAuthMechanisms([profile.id, basicProfile.id]);
+  assert(mechs.length === 2, "resolve two mechanisms");
+  assert(
+    authLabel([profile.id, basicProfile.id], {
+      [profile.id]: "webhook-renamed",
+      [basicProfile.id]: "basic-smoke",
+    }) === "webhook-renamed|basic-smoke",
+    "authLabel",
+  );
+  const viaBearer = await checkAnyHttpAuth(
+    mockReq({ authorization: "Bearer named-token" }),
+    mechs,
+    ctx,
+  );
+  assert(viaBearer, "OR accepts bearer");
+  const encoded = Buffer.from("bob:p@ss").toString("base64");
+  const viaBasic = await checkAnyHttpAuth(
+    mockReq({ authorization: `Basic ${encoded}` }),
+    mechs,
+    ctx,
+  );
+  assert(viaBasic, "OR accepts basic");
+  const neither = await checkAnyHttpAuth(
+    mockReq({ authorization: "Bearer wrong" }),
+    mechs,
+    ctx,
+  );
+  assert(!neither, "OR rejects when none match");
+}
+
 // trigger-level override
 {
-  const mech = await getHttpAuthInternal("webhook-smoke");
+  const mech = await getHttpAuthInternal(profile.id);
   const { status, pageName } = resolveUnauthorizedSpec(
     { unauthorized: { status: 401, response: "deny-smoke" } },
     mech,
@@ -226,7 +289,7 @@ await validateWorkflowHttpTriggers({
       type: "HTTP",
       method: "POST",
       path: "/x",
-      auth: "webhook-smoke",
+      auth: [profile.id, basicProfile.id],
       response: "deny-smoke",
     },
   ],
@@ -235,12 +298,38 @@ await validateWorkflowHttpTriggers({
 let threw = false;
 try {
   await validateWorkflowHttpTriggers({
-    triggers: [{ type: "HTTP", path: "/x", auth: "no-such-profile" }],
+    triggers: [{ type: "HTTP", path: "/x", auth: profile.id }],
   });
 } catch {
   threw = true;
 }
-assert(threw, "unknown auth fails validation");
+assert(threw, "non-array auth fails validation");
+
+threw = false;
+try {
+  await validateWorkflowHttpTriggers({
+    triggers: [{ type: "HTTP", path: "/x", auth: ["webhook-renamed"] }],
+  });
+} catch {
+  threw = true;
+}
+assert(threw, "name string fails validation");
+
+threw = false;
+try {
+  await validateWorkflowHttpTriggers({
+    triggers: [
+      {
+        type: "HTTP",
+        path: "/x",
+        auth: ["00000000-0000-4000-8000-000000000000"],
+      },
+    ],
+  });
+} catch {
+  threw = true;
+}
+assert(threw, "unknown auth id fails validation");
 
 threw = false;
 try {
@@ -280,6 +369,7 @@ assert(threw, "unknown page fails validation");
 
 // cleanup
 await deleteHttpAuth(profile.id);
+await deleteHttpAuth(basicProfile.id);
 await deleteHttpPage(page.id);
 await deleteSecret(secret.id);
 const leftover = (await listSecrets({ owner })).find(

packages/server/workflow-http-validate.js

@@ -1,7 +1,11 @@
 /**
  * Validate HTTP trigger auth / response fields on workflow save.
  */
-import { assertAuthType, getHttpAuthByName } from "./http-auths-store.js";
+import {
+  assertAuthId,
+  assertAuthType,
+  getHttpAuthById,
+} from "./http-auths-store.js";
 import { getHttpPageByName, assertHttpResponsePage } from "./http-pages-store.js";
 import { authLabel } from "./http-trigger-auth.js";
 
@@ -24,49 +28,78 @@ function assertCredentialFieldShape(field, label) {
 }
 
 /**
+ * @param {unknown} entry
+ * @param {string} path
+ */
+async function validateAuthEntry(entry, path) {
+  if (typeof entry === "string") {
+    try {
+      assertAuthId(entry);
+    } catch {
+      const err = new Error(`${path} must be an auth profile UUID`);
+      err.statusCode = 400;
+      throw err;
+    }
+    const named = await getHttpAuthById(entry);
+    if (!named) {
+      const err = new Error(`unknown auth profile id "${entry}"`);
+      err.statusCode = 400;
+      throw err;
+    }
+    return;
+  }
+
+  if (entry && typeof entry === "object" && !Array.isArray(entry)) {
+    const obj = /** @type {Record<string, unknown>} */ (entry);
+    if (typeof obj.id === "string" && obj.id.length > 0 && !obj.type) {
+      await validateAuthEntry(obj.id, path);
+      return;
+    }
+    const type = assertAuthType(obj.type);
+    if (type === "bearer") {
+      assertCredentialFieldShape(obj.token, `${path}.token`);
+    } else if (type === "basic") {
+      assertCredentialFieldShape(obj.user, `${path}.user`);
+      if (obj.password != null && obj.password !== "") {
+        assertCredentialFieldShape(obj.password, `${path}.password`);
+      }
+    } else if (type === "header") {
+      if (typeof obj.header !== "string" || obj.header.length === 0) {
+        const err = new Error(`${path}.header must be a non-empty string`);
+        err.statusCode = 400;
+        throw err;
+      }
+      assertCredentialFieldShape(obj.value, `${path}.value`);
+    }
+    return;
+  }
+
+  const err = new Error(
+    `${path} must be an auth profile UUID or an inline auth object`,
+  );
+  err.statusCode = 400;
+  throw err;
+}
+
+/**
+ * auth is an array of auth profile UUIDs and/or inline auth objects (OR).
+ * null / false / [] = no auth.
  * @param {unknown} auth
  */
 async function validateAuthField(auth) {
   if (auth == null || auth === false) return;
 
-  if (typeof auth === "string") {
+  if (!Array.isArray(auth)) {
-    const named = await getHttpAuthByName(auth);
+    const err = new Error(
-    if (!named) {
+      "auth must be an array of auth profile UUIDs and/or inline auth objects",
-      const err = new Error(`unknown auth profile "${auth}"`);
+    );
     err.statusCode = 400;
     throw err;
   }
-    return;
-  }
 
-  if (typeof auth === "object" && !Array.isArray(auth)) {
+  for (let i = 0; i < auth.length; i++) {
-    const obj = /** @type {Record<string, unknown>} */ (auth);
+    await validateAuthEntry(auth[i], `auth[${i}]`);
-    if (typeof obj.name === "string" && obj.name.length > 0 && !obj.type) {
-      await validateAuthField(obj.name);
-      return;
   }
-    const type = assertAuthType(obj.type);
-    if (type === "bearer") {
-      assertCredentialFieldShape(obj.token, "auth.token");
-    } else if (type === "basic") {
-      assertCredentialFieldShape(obj.user, "auth.user");
-      if (obj.password != null && obj.password !== "") {
-        assertCredentialFieldShape(obj.password, "auth.password");
-      }
-    } else if (type === "header") {
-      if (typeof obj.header !== "string" || obj.header.length === 0) {
-        const err = new Error("auth.header must be a non-empty string");
-        err.statusCode = 400;
-        throw err;
-      }
-      assertCredentialFieldShape(obj.value, "auth.value");
-    }
-    return;
-  }
-
-  const err = new Error("auth must be a profile name or an auth object");
-  err.statusCode = 400;
-  throw err;
 }
 
 /**

packages/server/workflows/default/dev-zte-sms.yaml

@@ -13,4 +13,5 @@ triggers:
   - type: HTTP
     method: POST
     path: /dev-zte-sms
-    auth: basic-auth
+    auth:
+      - 0f78d6d7-bd44-45d7-a826-f51c027b767f

packages/server/workflows/default/send-gmail.yaml

@@ -36,4 +36,5 @@ triggers:
   - type: HTTP
     method: POST
     path: /send-gmail
-    auth: basic-auth
+    auth:
+      - 0f78d6d7-bd44-45d7-a826-f51c027b767f

packages/server/workflows/default/time-to-ntfy-example.yaml

@@ -1,6 +1,7 @@
 name: time to ntfy example
 description: |
   this workflow will send a message to ntfy with the current time
+enabled: false
 scripts:
   - script: plugin/get-current-time
     config:
@@ -12,3 +13,5 @@ triggers:
   - type: HTTP
     method: POST
     path: /time-to-ntfy
+    auth:
+      - 0f78d6d7-bd44-45d7-a826-f51c027b767f

packages/web/src/components/AuthEditorModal.jsx

@@ -0,0 +1,422 @@
+import { useEffect, useState } from "react";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+import { errorMessage } from "../api/client.js";
+import {
+  fetchHttpAuthLiterals,
+  useHttpPages,
+  useUpsertHttpAuth,
+} from "../api/hooks.js";
+
+function emptyCred(source = "literal") {
+  return { source, value: "", kv: "", namespace: "", secret: "" };
+}
+
+function credFromPublic(field, literalValue) {
+  if (!field || field.source === "missing") return emptyCred("literal");
+  if (field.source === "kv") {
+    return {
+      source: "kv",
+      value: "",
+      kv: field.kv ?? "",
+      namespace: field.namespace ?? "",
+      secret: "",
+    };
+  }
+  if (field.source === "secret") {
+    return {
+      source: "secret",
+      value: "",
+      kv: "",
+      namespace: "",
+      secret: field.secret ?? "",
+    };
+  }
+  if (typeof literalValue === "string") {
+    return {
+      source: "literal",
+      value: literalValue,
+      kv: "",
+      namespace: "",
+      secret: "",
+      keep: true,
+    };
+  }
+  return {
+    source: "literal",
+    value: "",
+    kv: "",
+    namespace: "",
+    secret: "",
+    keep: field.set === true,
+  };
+}
+
+function toApiField(cred, { required = true } = {}) {
+  if (cred.source === "kv") {
+    const out = { kv: cred.kv };
+    if (cred.namespace) out.namespace = cred.namespace;
+    return out;
+  }
+  if (cred.source === "secret") {
+    return { secret: cred.secret };
+  }
+  if (cred.value) return cred.value;
+  if (cred.keep) return { keep: true };
+  if (!required) return "";
+  return null;
+}
+
+function emptyForm() {
+  return {
+    id: null,
+    name: "",
+    type: "bearer",
+    token: emptyCred(),
+    user: emptyCred(),
+    password: emptyCred(),
+    header: "",
+    value: emptyCred(),
+    unauthorized_status: "",
+    unauthorized_response: "",
+  };
+}
+
+function formFromAuth(auth, literals = {}) {
+  const cfg = auth.config ?? {};
+  return {
+    id: auth.id,
+    name: auth.name,
+    type: auth.type,
+    token: credFromPublic(cfg.token, literals.token),
+    user: credFromPublic(cfg.user, literals.user),
+    password: credFromPublic(cfg.password, literals.password),
+    header: cfg.header ?? "",
+    value: credFromPublic(cfg.value, literals.value),
+    unauthorized_status: auth.unauthorized_status ?? "",
+    unauthorized_response: auth.unauthorized_response ?? "",
+  };
+}
+
+function Field({ label, children, hint }) {
+  return (
+    <div className="form-control w-full">
+      <div className="label py-1">
+        <span className="label-text text-sm font-medium">{label}</span>
+      </div>
+      {children}
+      {hint ? (
+        <div className="label py-1">
+          <span className="label-text-alt opacity-60">{hint}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className="space-y-3 rounded-box border border-base-300 p-3">
+      <p className="text-sm font-medium">{label}</p>
+      <Field label="Source">
+        <select
+          className="select select-bordered w-full"
+          value={cred.source}
+          onChange={(e) => onChange({ ...cred, source: e.target.value, keep: false })}
+        >
+          <option value="literal">Plain text</option>
+          <option value="kv">From KV</option>
+          <option value="secret">From secret</option>
+        </select>
+      </Field>
+      {cred.source === "literal" ? (
+        <Field
+          label="Value"
+          hint={
+            cred.keep && !cred.value
+              ? "A value is already set. Enter a new one to replace it."
+              : null
+          }
+        >
+          <div className="flex w-full gap-1">
+            <input
+              type={masked && !show ? "password" : "text"}
+              className="input input-bordered w-full font-mono"
+              value={cred.value}
+              onChange={(e) => onChange({ ...cred, value: e.target.value, keep: false })}
+              placeholder={
+                cred.keep && !cred.value ? "(unchanged — leave blank to keep)" : ""
+              }
+              required={!allowEmpty && !cred.keep && !cred.value}
+              autoComplete="off"
+            />
+            {masked ? (
+              <button
+                type="button"
+                className="btn btn-ghost btn-square shrink-0"
+                title={show ? "Hide" : "Reveal"}
+                aria-label={show ? "Hide value" : "Reveal value"}
+                onClick={() => setShow((v) => !v)}
+              >
+                {show ? <LuEyeOff className="size-4" /> : <LuEye className="size-4" />}
+              </button>
+            ) : null}
+          </div>
+        </Field>
+      ) : null}
+      {cred.source === "kv" ? (
+        <>
+          <Field label="Namespace (optional)">
+            <input
+              className="input input-bordered w-full font-mono"
+              placeholder="namespace"
+              value={cred.namespace}
+              onChange={(e) => onChange({ ...cred, namespace: e.target.value })}
+            />
+          </Field>
+          <Field label="Key">
+            <input
+              className="input input-bordered w-full font-mono"
+              placeholder="key"
+              value={cred.kv}
+              onChange={(e) => onChange({ ...cred, kv: e.target.value })}
+              required
+            />
+          </Field>
+        </>
+      ) : null}
+      {cred.source === "secret" ? (
+        <Field
+          label="Secret name"
+          hint="Encrypted secret — value is never shown here. Manage it on the Secrets page."
+        >
+          <input
+            className="input input-bordered w-full font-mono"
+            placeholder="secret name"
+            value={cred.secret}
+            onChange={(e) => onChange({ ...cred, secret: e.target.value })}
+            required
+            pattern="[A-Za-z0-9._-]+"
+          />
+        </Field>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Add / edit an HTTP trigger auth profile.
+ * Reusable: mount when open; pass `auth` for edit (literals loaded inside).
+ *
+ * @param {"add" | "edit"} mode
+ * @param {object} [auth] Public auth row when mode is "edit"
+ * @param {() => void} onClose
+ * @param {(saved: unknown) => void} [onSaved]
+ */
+export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
+  const { data: pages = [] } = useHttpPages();
+  const upsert = useUpsertHttpAuth();
+  const [form, setForm] = useState(emptyForm);
+  const [loading, setLoading] = useState(mode === "edit");
+
+  useEffect(() => {
+    if (mode !== "edit" || !auth?.id) {
+      setForm(emptyForm());
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    (async () => {
+      /** @type {Record<string, string>} */
+      let literals = {};
+      try {
+        const data = await fetchHttpAuthLiterals(auth.id);
+        literals = data.literals ?? {};
+      } catch {
+        // Form still works with keep markers
+      }
+      if (cancelled) return;
+      setForm(formFromAuth(auth, literals));
+      setLoading(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, auth]);
+
+  function onSubmit(e) {
+    e.preventDefault();
+    /** @type {Record<string, unknown>} */
+    let config = {};
+    if (form.type === "bearer") {
+      const token = toApiField(form.token);
+      if (token == null) return;
+      config = { token };
+    } else if (form.type === "basic") {
+      const user = toApiField(form.user);
+      if (user == null) return;
+      const password = toApiField(form.password, { required: false });
+      config = { user, password: password ?? "" };
+    } else {
+      const value = toApiField(form.value);
+      if (value == null) return;
+      config = { header: form.header, value };
+    }
+
+    upsert.mutate(
+      {
+        id: form.id,
+        name: form.name,
+        type: form.type,
+        config,
+        unauthorized_status:
+          form.unauthorized_status === "" ? null : Number(form.unauthorized_status),
+        unauthorized_response: form.unauthorized_response || null,
+      },
+      {
+        onSuccess: (data) => {
+          onSaved?.(data?.auth ?? data);
+          onClose();
+        },
+      },
+    );
+  }
+
+  const title = mode === "add" ? "New auth profile" : `Edit ${form.name || auth?.name || ""}`;
+
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box max-w-xl">
+        <h3 className="font-bold">{title}</h3>
+        {loading ? (
+          <div className="flex justify-center py-10">
+            <span className="loading loading-spinner" />
+          </div>
+        ) : (
+          <form className="mt-3 space-y-4" onSubmit={onSubmit}>
+            <Field label="Name">
+              <input
+                className="input input-bordered w-full font-mono"
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                required
+                pattern="[A-Za-z0-9._-]+"
+                autoComplete="off"
+              />
+            </Field>
+
+            <Field label="Type">
+              <select
+                className="select select-bordered w-full"
+                value={form.type}
+                onChange={(e) => setForm({ ...form, type: e.target.value })}
+              >
+                <option value="bearer">bearer</option>
+                <option value="basic">basic</option>
+                <option value="header">header</option>
+              </select>
+            </Field>
+
+            {form.type === "bearer" ? (
+              <CredentialFields
+                label="Token"
+                cred={form.token}
+                onChange={(token) => setForm({ ...form, token })}
+              />
+            ) : null}
+            {form.type === "basic" ? (
+              <>
+                <CredentialFields
+                  label="User"
+                  cred={form.user}
+                  onChange={(user) => setForm({ ...form, user })}
+                />
+                <CredentialFields
+                  label="Password"
+                  cred={form.password}
+                  onChange={(password) => setForm({ ...form, password })}
+                  allowEmpty
+                  masked
+                />
+              </>
+            ) : null}
+            {form.type === "header" ? (
+              <>
+                <Field label="Header name">
+                  <input
+                    className="input input-bordered w-full font-mono"
+                    value={form.header}
+                    onChange={(e) => setForm({ ...form, header: e.target.value })}
+                    required
+                    placeholder="X-Webhook-Secret"
+                  />
+                </Field>
+                <CredentialFields
+                  label="Header value"
+                  cred={form.value}
+                  onChange={(value) => setForm({ ...form, value })}
+                />
+              </>
+            ) : null}
+
+            <Field label="Unauthorized status (optional)">
+              <input
+                type="number"
+                className="input input-bordered w-full"
+                value={form.unauthorized_status}
+                onChange={(e) => setForm({ ...form, unauthorized_status: e.target.value })}
+                min={100}
+                max={599}
+                placeholder="401"
+              />
+            </Field>
+
+            <Field label="Unauthorized response page (optional)">
+              <select
+                className="select select-bordered w-full"
+                value={form.unauthorized_response}
+                onChange={(e) => setForm({ ...form, unauthorized_response: e.target.value })}
+              >
+                <option value="">(default JSON)</option>
+                {pages.map((p) => (
+                  <option key={p.id} value={p.name}>
+                    {p.name}
+                  </option>
+                ))}
+              </select>
+            </Field>
+
+            {upsert.isError ? (
+              <p className="text-error text-sm">{errorMessage(upsert.error)}</p>
+            ) : null}
+            <div className="modal-action">
+              <button type="button" className="btn btn-ghost" onClick={onClose}>
+                Cancel
+              </button>
+              <button type="submit" className="btn btn-primary" disabled={upsert.isPending}>
+                {upsert.isPending ? (
+                  <span className="loading loading-spinner loading-xs" />
+                ) : null}
+                Save
+              </button>
+            </div>
+          </form>
+        )}
+        {loading ? (
+          <div className="modal-action">
+            <button type="button" className="btn btn-ghost" onClick={onClose}>
+              Cancel
+            </button>
+          </div>
+        ) : null}
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={onClose}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}

packages/web/src/components/workflow/TriggerCard.jsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
-import { LuChevronDown, LuCopy, LuGripVertical, LuTrash2 } from "react-icons/lu";
+import { LuChevronDown, LuCopy, LuGripVertical, LuTrash2, LuX } from "react-icons/lu";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import cronstrue from "cronstrue";
@@ -138,15 +138,27 @@ function typeLabel(type) {
   return type || "Trigger";
 }
 
+function Field({ label, children, hint }) {
+  return (
+    <div className="flex w-full flex-col gap-1">
+      {label ? <span className="text-sm font-medium opacity-80">{label}</span> : null}
+      {children}
+      {hint ? <span className="text-xs opacity-60">{hint}</span> : null}
+    </div>
+  );
+}
+
 function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDestinations }) {
   const path = trigger.path || "/";
   const url = namespacedPath(owner || "owner", path);
-  const authIsInline = trigger.auth != null && typeof trigger.auth === "object";
+  const authEntries = Array.isArray(trigger.auth) ? trigger.auth : [];
-  const authSelect = authIsInline
+  const selectedIds = authEntries.filter((e) => typeof e === "string" && e).map(String);
-    ? "__inline__"
+  const inlineEntries = authEntries.filter((e) => e && typeof e === "object");
-    : typeof trigger.auth === "string" && trigger.auth
+
-      ? trigger.auth
+  function setAuthIds(nextIds) {
-      : "";
+    const next = [...nextIds, ...inlineEntries];
+    onChange({ ...trigger, auth: next.length ? next : null });
+  }
 
   function copyUrl() {
     if (typeof navigator?.clipboard?.writeText === "function") {
@@ -155,11 +167,10 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
   }
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-3">
-      <label className="form-control">
+      <Field label="Method">
-        <span className="label py-0 text-sm">Method</span>
         <select
-          className="select select-sm"
+          className="select select-bordered select-sm w-full"
           value={trigger.method || "POST"}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, method: e.target.value })}
@@ -173,51 +184,48 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
             <option value={trigger.method}>{trigger.method}</option>
           )}
         </select>
-      </label>
+      </Field>
-      <label className="form-control">
+
-        <span className="label py-0 text-sm">Path</span>
+      <Field label="Path">
         <input
-          className="input input-sm font-mono"
+          className="input input-bordered input-sm w-full font-mono"
           value={trigger.path ?? ""}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, path: e.target.value })}
           placeholder="/hook"
         />
-      </label>
+      </Field>
-      <div className="flex items-center gap-2 text-xs font-mono opacity-80">
+
-        <span className="truncate">{url}</span>
+      <Field label="URL">
-        <button type="button" className="btn btn-ghost btn-xs btn-square" title="Copy URL" onClick={copyUrl}>
+        <div className="flex w-full items-center gap-1">
+          <input
+            className="input input-bordered input-sm w-full font-mono opacity-80"
+            value={url}
+            readOnly
+            tabIndex={-1}
+          />
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm btn-square shrink-0"
+            title="Copy URL"
+            onClick={copyUrl}
+          >
             <LuCopy className="size-3.5" />
           </button>
         </div>
-      <label className="form-control">
+      </Field>
-        <span className="label py-0 text-sm">Auth</span>
+
-        <select
+      <AuthPicker
-          className="select select-sm"
+        auths={auths}
-          value={authSelect}
+        selectedIds={selectedIds}
+        inlineCount={inlineEntries.length}
         disabled={disabled}
-          onChange={(e) => {
+        onChange={setAuthIds}
-            const v = e.target.value;
+      />
-            if (v === "" || v === "__inline__") {
+
-              onChange({ ...trigger, auth: v === "__inline__" ? trigger.auth : null });
+      <Field label="Response page">
-            } else {
-              onChange({ ...trigger, auth: v });
-            }
-          }}
-        >
-          <option value="">None</option>
-          {auths.map((a) => (
-            <option key={a.name} value={a.name}>
-              {a.name}
-            </option>
-          ))}
-          {authIsInline ? <option value="__inline__">Inline (edit in YAML)</option> : null}
-        </select>
-      </label>
-      <label className="form-control">
-        <span className="label py-0 text-sm">Response page</span>
         <select
-          className="select select-sm"
+          className="select select-bordered select-sm w-full"
           value={trigger.response ?? ""}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, response: e.target.value })}
@@ -232,7 +240,8 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
             <option value={trigger.response}>{trigger.response}</option>
           ) : null}
         </select>
-      </label>
+      </Field>
+
       <FailureAlertFields
         trigger={trigger}
         disabled={disabled}
@@ -243,6 +252,165 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
   );
 }
 
+/**
+ * Searchable dropdown: pick an auth to add; chips with X to remove.
+ * YAML stores profile UUIDs; UI shows names.
+ */
+function AuthPicker({ auths, selectedIds, inlineCount, disabled, onChange }) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const byId = useMemo(() => new Map(auths.map((a) => [a.id, a])), [auths]);
+
+  const available = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return auths
+      .filter((a) => !selectedSet.has(a.id))
+      .filter((a) => {
+        if (!q) return true;
+        return (
+          a.name.toLowerCase().includes(q) ||
+          String(a.type).toLowerCase().includes(q) ||
+          a.id.toLowerCase().includes(q)
+        );
+      });
+  }, [auths, selectedSet, query]);
+
+  useEffect(() => {
+    if (!open) return;
+    function onDoc(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  function addAuth(id) {
+    if (selectedSet.has(id)) return;
+    onChange([...selectedIds, id]);
+    setQuery("");
+    setOpen(false);
+  }
+
+  function removeAuth(id) {
+    onChange(selectedIds.filter((x) => x !== id));
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-1" ref={rootRef}>
+      <span className="text-sm font-medium opacity-80">Auth (any of)</span>
+
+      {selectedIds.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {selectedIds.map((id) => {
+            const auth = byId.get(id);
+            return (
+              <span
+                key={id}
+                className="badge badge-outline gap-1 h-7 px-2 font-normal"
+                title={id}
+              >
+                <span className="max-w-[10rem] truncate">
+                  {auth ? (
+                    <>
+                      {auth.name}
+                      <span className="opacity-60"> · {auth.type}</span>
+                    </>
+                  ) : (
+                    <span className="opacity-60">missing</span>
+                  )}
+                </span>
+                <button
+                  type="button"
+                  className="btn btn-ghost btn-xs btn-square -mr-1"
+                  title="Remove"
+                  aria-label={`Remove ${auth?.name ?? id}`}
+                  disabled={disabled}
+                  onClick={() => removeAuth(id)}
+                >
+                  <LuX className="size-3.5" />
+                </button>
+              </span>
+            );
+          })}
+        </div>
+      ) : null}
+
+      <div className="relative w-full">
+        <div className="join w-full">
+          <input
+            ref={inputRef}
+            type="search"
+            className="input input-bordered input-sm join-item w-full min-w-0"
+            placeholder={auths.length === 0 ? "No auth profiles yet" : "Add auth…"}
+            value={query}
+            disabled={disabled || auths.length === 0}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setOpen(true);
+            }}
+            onFocus={() => setOpen(true)}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setOpen(false);
+                setQuery("");
+                inputRef.current?.blur();
+              }
+              if (e.key === "Enter") {
+                e.preventDefault();
+                if (available[0]) addAuth(available[0].id);
+              }
+            }}
+          />
+          <button
+            type="button"
+            className="btn btn-sm join-item btn-square"
+            disabled={disabled || auths.length === 0}
+            aria-label="Open auth list"
+            onClick={() => {
+              setOpen((v) => !v);
+              if (!open) inputRef.current?.focus();
+            }}
+          >
+            <LuChevronDown className={`size-4 transition-transform ${open ? "rotate-180" : ""}`} />
+          </button>
+        </div>
+        {open && !disabled && auths.length > 0 ? (
+          <ul className="menu menu-sm absolute z-50 mt-1 max-h-48 w-full overflow-y-auto rounded-box border border-base-300 bg-base-100 shadow-lg p-1">
+            {available.length === 0 ? (
+              <li className="disabled">
+                <span className="opacity-60">
+                  {query.trim() ? "No matches" : "All profiles selected"}
+                </span>
+              </li>
+            ) : (
+              available.map((a) => (
+                <li key={a.id}>
+                  <button type="button" onClick={() => addAuth(a.id)}>
+                    <span className="font-mono text-sm">{a.name}</span>
+                    <span className="opacity-60 text-xs">{a.type}</span>
+                  </button>
+                </li>
+              ))
+            )}
+          </ul>
+        ) : null}
+      </div>
+
+      {inlineCount > 0 ? (
+        <span className="text-xs opacity-60">
+          + {inlineCount} inline auth{inlineCount === 1 ? "" : "s"} (edit in YAML)
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
 function CronFields({ trigger, disabled, onChange, alertDestinations }) {
   const preset = matchCronPreset(trigger.schedule);
   let human = "";
@@ -302,12 +470,11 @@ function CronFields({ trigger, disabled, onChange, alertDestinations }) {
 
 function FailureAlertFields({ trigger, disabled, onChange, alertDestinations }) {
   return (
-    <div className="space-y-2 border-t border-base-300 pt-3">
+    <div className="space-y-3 border-t border-base-300 pt-3">
-      <p className="text-xs font-medium opacity-80">Failure alert</p>
+      <p className="text-sm font-medium opacity-80">Failure alert</p>
-      <label className="form-control">
+      <Field label="Consecutive failures">
-        <span className="label py-0 text-sm">Consecutive failures</span>
         <input
-          className="input input-sm"
+          className="input input-bordered input-sm w-full"
           type="number"
           min="1"
           step="1"
@@ -318,11 +485,19 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
           }
           placeholder="e.g. 3"
         />
-      </label>
+      </Field>
-      <label className="form-control">
+      <Field
-        <span className="label py-0 text-sm">On failure, start</span>
+        label="On failure, start"
+        hint={
+          <>
+            After this many sequential failed runs for this trigger, JerapahFlow starts the
+            selected workflow (it must declare a <span className="font-mono">workflow</span>{" "}
+            trigger).
+          </>
+        }
+      >
         <select
-          className="select select-sm"
+          className="select select-bordered select-sm w-full"
           value={trigger.onFailureWorkflow ?? ""}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, onFailureWorkflow: e.target.value })}
@@ -340,12 +515,7 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
             <option value={trigger.onFailureWorkflow}>{trigger.onFailureWorkflow}</option>
           ) : null}
         </select>
-      </label>
+      </Field>
-      <p className="text-xs opacity-60">
-        After this many sequential failed runs for this trigger, JerapahFlow starts the
-        selected workflow (it must declare a <span className="font-mono">workflow</span>{" "}
-        trigger).
-      </p>
     </div>
   );
 }

packages/web/src/lib/workflow-doc.js

@@ -291,7 +291,7 @@ function normalizeTrigger(raw) {
         ? ""
         : String(raw.onConsecutiveFailures),
     onFailureWorkflow: readOnFailureWorkflow(raw),
-    auth: raw.auth ?? null,
+    auth: Array.isArray(raw.auth) ? raw.auth : null,
     response: typeof raw.response === "string" ? raw.response : "",
     unauthorized: raw.unauthorized ?? null,
     extra: Object.keys(extra).length ? extra : undefined,
@@ -345,7 +345,7 @@ function dumpTrigger(t) {
       method: t.method || "POST",
       path: t.path || "/",
     };
-    if (t.auth != null && t.auth !== false && t.auth !== "") out.auth = t.auth;
+    if (Array.isArray(t.auth) && t.auth.length > 0) out.auth = t.auth;
     if (t.response) out.response = t.response;
     if (t.unauthorized != null && t.unauthorized !== "") out.unauthorized = t.unauthorized;
     dumpFailureTriggerFields(t, out);

packages/web/src/pages/AuthProfilesPage.jsx

@@ -1,163 +1,16 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { LuEye, LuEyeOff, LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { LuEye, LuEyeOff, LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
 import {
   fetchHttpAuthLiterals,
   useDeleteHttpAuth,
   useHttpAuths,
-  useHttpPages,
-  useUpsertHttpAuth,
 } from "../api/hooks.js";
+import { AuthEditorModal } from "../components/AuthEditorModal.jsx";
 import { formatTime } from "../lib/format.jsx";
 
-function emptyCred(source = "literal") {
+function CredDisplay({ field, fieldKey, authId, cache, onRevealed }) {
-  return { source, value: "", kv: "", namespace: "", secret: "" };
-}
-
-function credFromPublic(field, literalValue) {
-  if (!field || field.source === "missing") return emptyCred("literal");
-  if (field.source === "kv") {
-    return {
-      source: "kv",
-      value: "",
-      kv: field.kv ?? "",
-      namespace: field.namespace ?? "",
-      secret: "",
-    };
-  }
-  if (field.source === "secret") {
-    return {
-      source: "secret",
-      value: "",
-      kv: "",
-      namespace: "",
-      secret: field.secret ?? "",
-    };
-  }
-  // literal — prefer revealed value when available
-  if (typeof literalValue === "string") {
-    return {
-      source: "literal",
-      value: literalValue,
-      kv: "",
-      namespace: "",
-      secret: "",
-      keep: true,
-    };
-  }
-  return {
-    source: "literal",
-    value: "",
-    kv: "",
-    namespace: "",
-    secret: "",
-    keep: field.set === true,
-  };
-}
-
-function toApiField(cred, { required = true } = {}) {
-  if (cred.source === "kv") {
-    const out = { kv: cred.kv };
-    if (cred.namespace) out.namespace = cred.namespace;
-    return out;
-  }
-  if (cred.source === "secret") {
-    return { secret: cred.secret };
-  }
-  if (cred.value) return cred.value;
-  if (cred.keep) return { keep: true };
-  if (!required) return "";
-  return null;
-}
-
-function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
-  const [show, setShow] = useState(false);
-
-  return (
-    <div className="space-y-1 border-base-300 border rounded-box p-3">
-      <label className="label py-0">{label}</label>
-      <select
-        className="select select-sm w-full"
-        value={cred.source}
-        onChange={(e) => onChange({ ...cred, source: e.target.value, keep: false })}
-      >
-        <option value="literal">Plain text</option>
-        <option value="kv">From KV</option>
-        <option value="secret">From secret</option>
-      </select>
-      {cred.source === "literal" ? (
-        <>
-          <div className="flex gap-1 items-center">
-            <input
-              type={masked && !show ? "password" : "text"}
-              className="input input-sm w-full font-mono"
-              value={cred.value}
-              onChange={(e) => onChange({ ...cred, value: e.target.value, keep: false })}
-              placeholder={
-                cred.keep && !cred.value ? "(unchanged — leave blank to keep)" : ""
-              }
-              required={!allowEmpty && !cred.keep && !cred.value}
-              autoComplete="off"
-            />
-            {masked ? (
-              <button
-                type="button"
-                className="btn btn-ghost btn-sm btn-square"
-                title={show ? "Hide" : "Reveal"}
-                aria-label={show ? "Hide value" : "Reveal value"}
-                onClick={() => setShow((v) => !v)}
-              >
-                {show ? <LuEyeOff className="size-4" /> : <LuEye className="size-4" />}
-              </button>
-            ) : null}
-          </div>
-          {cred.keep && !cred.value ? (
-            <p className="text-xs opacity-60">
-              A value is already set. Enter a new one to replace it.
-            </p>
-          ) : null}
-        </>
-      ) : null}
-      {cred.source === "kv" ? (
-        <div className="flex flex-col sm:flex-row gap-2">
-          <input
-            className="input input-sm w-full font-mono"
-            placeholder="namespace (optional)"
-            value={cred.namespace}
-            onChange={(e) => onChange({ ...cred, namespace: e.target.value })}
-          />
-          <input
-            className="input input-sm w-full font-mono"
-            placeholder="key"
-            value={cred.kv}
-            onChange={(e) => onChange({ ...cred, kv: e.target.value })}
-            required
-          />
-        </div>
-      ) : null}
-      {cred.source === "secret" ? (
-        <>
-          <input
-            className="input input-sm w-full font-mono"
-            placeholder="secret name"
-            value={cred.secret}
-            onChange={(e) => onChange({ ...cred, secret: e.target.value })}
-            required
-            pattern="[A-Za-z0-9._-]+"
-          />
-          <p className="text-xs opacity-60">
-            Encrypted secret — value is never shown here. Manage it on the Secrets page.
-          </p>
-        </>
-      ) : null}
-    </div>
-  );
-}
-
-/**
- * List cell: literals show *** with reveal; secrets never reveal; kv shows ref only.
- */
-function CredDisplay({ field, fieldKey, authName, cache, onRevealed }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -181,7 +34,6 @@ function CredDisplay({ field, fieldKey, authName, cache, onRevealed }) {
     return <span className="font-mono text-xs">{ref}</span>;
   }
 
-  // literal
   const revealed = cache?.[fieldKey];
   const shown = open && typeof revealed === "string";
 
@@ -197,7 +49,7 @@ function CredDisplay({ field, fieldKey, authName, cache, onRevealed }) {
     setLoading(true);
     setError(null);
     try {
-      const data = await fetchHttpAuthLiterals(authName);
+      const data = await fetchHttpAuthLiterals(authId);
       onRevealed?.(data.literals ?? {});
       setOpen(true);
     } catch (err) {
@@ -241,7 +93,7 @@ function CredentialsCell({ auth, cache, onRevealed }) {
       <CredDisplay
         field={cfg.token}
         fieldKey="token"
-        authName={auth.name}
+        authId={auth.id}
         cache={cache}
         onRevealed={onRevealed}
       />
@@ -255,7 +107,7 @@ function CredentialsCell({ auth, cache, onRevealed }) {
           <CredDisplay
             field={cfg.user}
             fieldKey="user"
-            authName={auth.name}
+            authId={auth.id}
             cache={cache}
             onRevealed={onRevealed}
           />
@@ -265,7 +117,7 @@ function CredentialsCell({ auth, cache, onRevealed }) {
           <CredDisplay
             field={cfg.password}
             fieldKey="password"
-            authName={auth.name}
+            authId={auth.id}
             cache={cache}
             onRevealed={onRevealed}
           />
@@ -279,7 +131,7 @@ function CredentialsCell({ auth, cache, onRevealed }) {
       <CredDisplay
         field={cfg.value}
         fieldKey="value"
-        authName={auth.name}
+        authId={auth.id}
         cache={cache}
         onRevealed={onRevealed}
       />
@@ -287,122 +139,70 @@ function CredentialsCell({ auth, cache, onRevealed }) {
   );
 }
 
-const emptyForm = () => ({
-  name: "",
-  type: "bearer",
-  token: emptyCred(),
-  user: emptyCred(),
-  password: emptyCred(),
-  header: "",
-  value: emptyCred(),
-  unauthorized_status: "",
-  unauthorized_response: "",
-});
-
 export function AuthProfilesPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { name: routeName } = useParams();
+  const isNewRoute = /\/auth\/new\/?$/.test(location.pathname);
+  const isEditRoute = Boolean(routeName) && !isNewRoute;
+
   const { data: auths = [], isLoading } = useHttpAuths();
-  const { data: pages = [] } = useHttpPages();
-  const upsert = useUpsertHttpAuth();
   const del = useDeleteHttpAuth();
-  const [mode, setMode] = useState(null);
+  const [editor, setEditor] = useState(null);
-  const [form, setForm] = useState(emptyForm);
   const [confirmDelete, setConfirmDelete] = useState(null);
   /** @type {[Record<string, Record<string, string>>, Function]} */
   const [revealCache, setRevealCache] = useState({});
-  const [editLoading, setEditLoading] = useState(false);
+  const openedRouteKey = useRef(null);
 
-  function openAdd() {
+  function closeEditor() {
-    setMode("add");
+    setEditor(null);
-    setForm(emptyForm());
+    openedRouteKey.current = null;
+    if (isNewRoute || isEditRoute) {
+      navigate("/auth", { replace: true });
+    }
   }
 
-  async function openEdit(a) {
+  useEffect(() => {
-    setEditLoading(true);
+    if (!isNewRoute) return;
-    /** @type {Record<string, string>} */
+    if (openedRouteKey.current === "new") return;
-    let literals = {};
+    openedRouteKey.current = "new";
-    try {
+    setEditor({ mode: "add" });
-      const data = await fetchHttpAuthLiterals(a.name);
+  }, [isNewRoute]);
-      literals = data.literals ?? {};
-      setRevealCache((prev) => ({ ...prev, [a.name]: literals }));
-    } catch {
-      // keep empty; form still works with keep markers
-    } finally {
-      setEditLoading(false);
-    }
-    const cfg = a.config ?? {};
-    setMode("edit");
-    setForm({
-      name: a.name,
-      type: a.type,
-      token: credFromPublic(cfg.token, literals.token),
-      user: credFromPublic(cfg.user, literals.user),
-      password: credFromPublic(cfg.password, literals.password),
-      header: cfg.header ?? "",
-      value: credFromPublic(cfg.value, literals.value),
-      unauthorized_status: a.unauthorized_status ?? "",
-      unauthorized_response: a.unauthorized_response ?? "",
-    });
-  }
 
-  function closeForm() {
+  useEffect(() => {
-    setMode(null);
+    if (!isEditRoute) {
-    setForm(emptyForm());
+      if (!isNewRoute) openedRouteKey.current = null;
+      return;
     }
-
+    if (isLoading) return;
-  function onSubmit(e) {
+    const key = `edit:${routeName}`;
-    e.preventDefault();
+    if (openedRouteKey.current === key) return;
-    /** @type {Record<string, unknown>} */
+    openedRouteKey.current = key;
-    let config = {};
+    const auth = auths.find((a) => a.name === routeName);
-    if (form.type === "bearer") {
+    if (!auth) {
-      const token = toApiField(form.token);
+      setEditor({ mode: "add" });
-      if (token == null) return;
+      return;
-      config = { token };
-    } else if (form.type === "basic") {
-      const user = toApiField(form.user);
-      if (user == null) return;
-      const password = toApiField(form.password, { required: false });
-      config = { user, password: password ?? "" };
-    } else {
-      const value = toApiField(form.value);
-      if (value == null) return;
-      config = { header: form.header, value };
-    }
-
-    upsert.mutate(
-      {
-        name: form.name,
-        type: form.type,
-        config,
-        unauthorized_status:
-          form.unauthorized_status === "" ? null : Number(form.unauthorized_status),
-        unauthorized_response: form.unauthorized_response || null,
-      },
-      {
-        onSuccess: () => {
-          setRevealCache((prev) => {
-            const next = { ...prev };
-            delete next[form.name];
-            return next;
-          });
-          closeForm();
-        },
-      },
-    );
     }
+    setEditor({ mode: "edit", auth });
+  }, [isEditRoute, isNewRoute, routeName, isLoading, auths]);
 
   return (
     <div className="space-y-4">
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
         <h1 className="text-xl font-semibold">Auth</h1>
-        <button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
+        <button
+          type="button"
+          className="btn btn-primary btn-sm"
+          onClick={() => navigate("/auth/new")}
+        >
           <LuPlus className="size-4" />
           Add
         </button>
       </div>
       <p className="text-sm opacity-70">
-        Named HTTP trigger auth profiles. Reference in YAML as{" "}
+        HTTP trigger auth profiles. Rename freely — workflows keep working via a stable id.
-        <code className="font-mono text-xs">auth: name</code>. Secrets are managed on the Secrets
+        Add them to a trigger from the workflow editor dropdown. Secrets are managed on the
-        page; KV values stay in KV.
+        Secrets page; KV values stay in KV.
       </p>
 
       {isLoading ? (
@@ -429,9 +229,9 @@ export function AuthProfilesPage() {
                   <td>
                     <CredentialsCell
                       auth={a}
-                      cache={revealCache[a.name]}
+                      cache={revealCache[a.id]}
                       onRevealed={(literals) =>
-                        setRevealCache((prev) => ({ ...prev, [a.name]: literals }))
+                        setRevealCache((prev) => ({ ...prev, [a.id]: literals }))
                       }
                     />
                   </td>
@@ -441,8 +241,7 @@ export function AuthProfilesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Edit"
-                      disabled={editLoading}
+                      onClick={() => navigate(`/auth/${encodeURIComponent(a.name)}/edit`)}
-                      onClick={() => openEdit(a)}
                     >
                       <LuPencil className="size-4" />
                     </button>
@@ -462,116 +261,21 @@ export function AuthProfilesPage() {
         </div>
       )}
 
-      {mode ? (
+      {editor ? (
-        <form
+        <AuthEditorModal
-          onSubmit={onSubmit}
+          mode={editor.mode}
-          className="fieldset bg-base-100 border-base-300 rounded-box max-w-xl border p-4 space-y-2"
+          auth={editor.auth}
-        >
+          onClose={closeEditor}
-          <div className="flex items-center justify-between">
+          onSaved={(saved) => {
-            <legend className="fieldset-legend">
+            const id = saved?.id || editor.auth?.id;
-              {mode === "add" ? "New auth profile" : `Edit ${form.name}`}
+            if (!id) return;
-            </legend>
+            setRevealCache((prev) => {
-            <button
+              const next = { ...prev };
-              type="button"
+              delete next[id];
-              className="btn btn-ghost btn-sm btn-square"
+              return next;
-              onClick={closeForm}
+            });
-              aria-label="Close"
+          }}
-            >
-              <LuX className="size-4" />
-            </button>
-          </div>
-          <label className="label">Name</label>
-          <input
-            className="input w-full font-mono"
-            value={form.name}
-            onChange={(e) => setForm({ ...form, name: e.target.value })}
-            required
-            pattern="[A-Za-z0-9._-]+"
-            disabled={mode === "edit"}
         />
-          <label className="label">Type</label>
-          <select
-            className="select w-full"
-            value={form.type}
-            onChange={(e) => setForm({ ...form, type: e.target.value })}
-          >
-            <option value="bearer">bearer</option>
-            <option value="basic">basic</option>
-            <option value="header">header</option>
-          </select>
-
-          {form.type === "bearer" ? (
-            <CredentialFields
-              label="Token"
-              cred={form.token}
-              onChange={(token) => setForm({ ...form, token })}
-            />
-          ) : null}
-          {form.type === "basic" ? (
-            <>
-              <CredentialFields
-                label="User"
-                cred={form.user}
-                onChange={(user) => setForm({ ...form, user })}
-              />
-              <CredentialFields
-                label="Password"
-                cred={form.password}
-                onChange={(password) => setForm({ ...form, password })}
-                allowEmpty
-                masked
-              />
-            </>
-          ) : null}
-          {form.type === "header" ? (
-            <>
-              <label className="label">Header name</label>
-              <input
-                className="input w-full font-mono"
-                value={form.header}
-                onChange={(e) => setForm({ ...form, header: e.target.value })}
-                required
-                placeholder="X-Webhook-Secret"
-              />
-              <CredentialFields
-                label="Header value"
-                cred={form.value}
-                onChange={(value) => setForm({ ...form, value })}
-              />
-            </>
-          ) : null}
-
-          <label className="label">Unauthorized status (optional)</label>
-          <input
-            type="number"
-            className="input w-full"
-            value={form.unauthorized_status}
-            onChange={(e) => setForm({ ...form, unauthorized_status: e.target.value })}
-            min={100}
-            max={599}
-            placeholder="401"
-          />
-          <label className="label">Unauthorized response page (optional)</label>
-          <select
-            className="select w-full"
-            value={form.unauthorized_response}
-            onChange={(e) => setForm({ ...form, unauthorized_response: e.target.value })}
-          >
-            <option value="">(default JSON)</option>
-            {pages.map((p) => (
-              <option key={p.id} value={p.name}>
-                {p.name}
-              </option>
-            ))}
-          </select>
-
-          {upsert.isError ? (
-            <p className="text-error text-sm">{errorMessage(upsert.error)}</p>
-          ) : null}
-          <button type="submit" className="btn btn-primary mt-2" disabled={upsert.isPending}>
-            Save
-          </button>
-        </form>
       ) : null}
 
       {confirmDelete ? (