Files
Epicure/apps/web/components/settings/disable-developer-access-button.tsx
T
Arnaud 8d5787e56e feat: self-serve developer access for paid tiers, split BYOK into its own permission (v0.72.0)
Splits what was one isDeveloper flag (gating webhooks, API keys, AND
BYOK together) into two independent permissions:

- isDeveloper (webhooks + self-serve API keys): admin-toggled as
  before, but now ALSO self-serve -- PATCH /api/v1/users/me/developer-access
  lets any paid-tier (tier !== "free") user turn it on themselves, no
  added fee. Free tier still needs an admin grant. Turning it off is
  always self-serve regardless of tier, since revoking your own
  access needs no gatekeeping. canSelfServeDeveloperAccess() in
  lib/permissions.ts is the single check for "is this tier eligible."

- isByokEnabled (BYOK AI provider keys): new column, admin-only, no
  self-serve path at all -- routing real AI provider spend through
  Epicure on the user's own key warrants a manual admin check-in that
  webhooks/API access don't need. requireByok() replaces
  requireDeveloper() on the three ai-keys routes.

Migration adds is_byok_enabled and grandfathers in anyone who already
has a BYOK key configured (the earlier grandfather migration only
covered the combined isDeveloper flag, which BYOK no longer reads).

Settings UI: webhooks/API-keys pages show a self-serve "Enable"
toggle for paid-tier non-developers instead of the locked notice
(still shown to free-tier users), plus a "Disable developer access"
link once enabled. Settings -> AI's BYOK section now checks
isByokEnabled instead of isDeveloper -- unaffected by the self-serve
change, still fully admin-gated.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-23 09:31:04 +02:00

41 lines
1.1 KiB
TypeScript

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
/** Turning developer access off is always self-serve regardless of tier
* or who granted it — only turning it back on (for a free-tier user)
* requires an admin. */
export function DisableDeveloperAccessButton() {
const router = useRouter();
const [disabling, setDisabling] = useState(false);
async function disable() {
setDisabling(true);
try {
const res = await fetch("/api/v1/users/me/developer-access", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ enabled: false }),
});
if (!res.ok) throw new Error();
router.refresh();
} catch {
toast.error("Couldn't disable developer access");
setDisabling(false);
}
}
return (
<button
type="button"
disabled={disabling}
onClick={() => { void disable(); }}
className="text-xs text-muted-foreground hover:text-destructive underline underline-offset-2"
>
{disabling ? "Disabling…" : "Disable developer access"}
</button>
);
}