Skip to content

Replace the web UI's sign-in form with auth-gate states #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
16francej merged 1 commit into from
Jul 30, 2026
Merged

Replace the web UI's sign-in form with auth-gate states #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions plugins/web-ui/server/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ const PUBLIC_URL = (process.env.WEB_UI_PUBLIC_URL ?? `http://localhost:${PORT}`)
const WEB_UI_DEV = process.env.WEB_UI_DEV === "1";
const ALLOW_UNSIGNED_TEST_IDENTITY =
process.env.NODE_ENV === "test" && process.env.ALLOW_UNSIGNED_TEST_IDENTITY === "1";
const COOKIE_AUTH = !CORE_SIGNING_SECRET || ALLOW_UNSIGNED_TEST_IDENTITY;
const AUTH_MODE = COOKIE_AUTH ? "dev" : "portal";
const ALLOW = (process.env.WEB_UI_PRINCIPALS ?? "")
.split(",")
.map((s) => s.trim())
Expand Down Expand Up @@ -252,7 +254,7 @@ function resolveIdentity(
name = claims.n ?? null;
impersonator = claims.imp ?? null;
} else {
if (CORE_SIGNING_SECRET && !ALLOW_UNSIGNED_TEST_IDENTITY) return null;
if (!COOKIE_AUTH) return null;
user = cookie(req, "webuiuser");
name = cookie(req, "webuiuser_name");
impersonator = cookie(req, "webui_impersonator");
Expand Down Expand Up @@ -701,6 +703,7 @@ const routeRequest = async (req: IncomingMessage, res: ServerResponse) => {
}

if (method === "POST" && path === "/signin") {
if (!COOKIE_AUTH) return json(res, 404, { error: "not_found" });
const body = await readBody(req);
const id = (() => {
try {
Expand All @@ -709,7 +712,12 @@ const routeRequest = async (req: IncomingMessage, res: ServerResponse) => {
return "";
}
})();
if (!id || (ALLOW.length > 0 && !ALLOW.includes(id))) return json(res, 403, { error: "not allowed" });
if (!id) return json(res, 400, { error: "bad_request", message: "Enter a principal to sign in as." });
if (ALLOW.length > 0 && !ALLOW.includes(id))
return json(res, 403, {
error: "not_allowed",
message: `${id.slice(0, 120)} isn't in this instance's allowed principals. Add it to WEB_UI_PRINCIPALS, or leave that unset to allow any principal.`,
});
res.writeHead(200, {
"set-cookie": sessionCookie(id),
"content-type": "application/json",
Expand Down Expand Up @@ -741,14 +749,15 @@ const routeRequest = async (req: IncomingMessage, res: ServerResponse) => {

if (path === "/me" || path.startsWith("/api/")) {
const user = cookieUser(req);
if (!user) return json(res, 401, { error: "sign in" });
if (!user) return json(res, 401, { error: "sign in", mode: AUTH_MODE });

if (path === "/me") {
res.setHeader("set-cookie", sessionCookie(user));
const permissions = await userPermissions();
return json(res, 200, {
user,
org: ORG,
mode: AUTH_MODE,
slackWorkspaceUrl: await slackWorkspaceUrl(),
impersonatedBy: resolveIdentity(req)?.impersonator ?? null,
permissions,
Expand Down Expand Up @@ -1824,7 +1833,7 @@ const routeRequest = async (req: IncomingMessage, res: ServerResponse) => {

if (method === "GET" && path.startsWith("/deployments/")) {
const user = cookieUser(req);
if (!user) return json(res, 401, { error: "sign in" });
if (!user) return json(res, 401, { error: "sign in", mode: AUTH_MODE });
const rest = path.slice("/deployments/".length);
const slash = rest.indexOf("/");
const id = decodeURIComponent(slash === -1 ? rest : rest.slice(0, slash));
Expand Down Expand Up @@ -1896,7 +1905,7 @@ if (process.argv[1] && fileURLToPath(import.meta.url) === process.argv[1]) {
);
if (!WEB_UI_DEV && !existsSync(join(DIST, "index.html")))
console.warn("[web-ui] dist-web/ not built — run `npm run build`");
if (ALLOW.length === 0)
if (COOKIE_AUTH && ALLOW.length === 0)
console.warn("[web-ui] WEB_UI_PRINCIPALS unset — any principal id may sign in (dev only)");
const t = setInterval(() => void drainWebDeliveries(), WEB_DELIVERY_POLL_MS);
t.unref?.();
Expand Down
8 changes: 6 additions & 2 deletions plugins/web-ui/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import "dockview-core/dist/styles/dockview.css";
import "./shell.css";
import { boot } from "./shell";
import { swallow } from "../../chassis/src/errors";
import { appState, boot, renderAuthGate } from "./shell";
import { closeFormMenus } from "./ui";
import { drawActiveChat } from "./chat";
import { composerState, slashQuery } from "./composer";
Expand Down Expand Up @@ -44,4 +45,7 @@ document.addEventListener("keydown", (e) => {
if (changed) drawActiveChat();
});

void boot();
void boot().catch((e: unknown) => {
if (appState.me) swallow("web-ui: boot", e);
else renderAuthGate({ kind: "unreachable" });
});
3 changes: 3 additions & 0 deletions plugins/web-ui/src/shell-state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
export type AuthMode = "portal" | "dev";

export interface Me {
user: string;
org: string;
mode?: AuthMode;
slackWorkspaceUrl?: string | null;
impersonatedBy?: string | null;
permissions?: string[];
Expand Down
57 changes: 48 additions & 9 deletions plugins/web-ui/src/shell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

:root {
--app-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--app-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
--sidebar-w: 280px;
--content-w: 820px;
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 16px;
--chat-pad: 22px;
--brand-accent: #4f46e5;
--dev-accent: #8a5a00;
--brand-mark: "A";
}

Expand Down Expand Up @@ -2468,7 +2468,7 @@ body.resizing-sidebar {
grid-template-rows: auto auto minmax(0, 1fr);
}

.impersonation-banner {
.top-banner {
position: fixed;
top: 0;
left: 0;
Expand All @@ -2486,10 +2486,13 @@ body.resizing-sidebar {
font-size: 13px;
font-weight: 500;
}
.impersonation-banner b {
.top-banner.dev {
background: var(--dev-accent);
}
.top-banner b {
font-weight: 700;
}
.impersonation-banner-exit {
.top-banner-action {
font: inherit;
font-weight: 600;
cursor: pointer;
Expand All @@ -2499,10 +2502,10 @@ body.resizing-sidebar {
border-radius: 6px;
padding: 4px 12px;
}
.impersonation-banner-exit:hover {
.top-banner-action:hover {
background: rgba(0, 0, 0, 0.3);
}
.layout.impersonating {
.layout.bannered {
--surface-safe-top: 0px;
height: calc(100vh - 38px - env(safe-area-inset-top));
height: calc(100dvh - 38px - env(safe-area-inset-top));
Expand Down Expand Up @@ -3887,13 +3890,17 @@ body.resizing-sidebar {
padding: 24px;
box-sizing: border-box;
}
.signin-panel,
.signin form {
display: flex;
flex-direction: column;
gap: 12px;
width: 340px;
max-width: 100%;
}
.signin form {
width: auto;
}
.signin-brand {
display: flex;
align-items: center;
Expand All @@ -3903,17 +3910,46 @@ body.resizing-sidebar {
letter-spacing: 0;
margin-bottom: 4px;
}
.signin-brand .dev-chip {
margin-left: auto;
padding: 2px 6px;
border-radius: 4px;
background: var(--dev-accent);
color: #fff;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
}
.signin-body {
font-size: 13.5px;
color: var(--muted-foreground);
line-height: 1.5;
margin: -4px 0 2px;
}
.signin-body b {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 0.9em;
font-weight: 600;
color: var(--foreground);
}
.signin label {
font-size: 12px;
font-weight: 600;
color: var(--muted-foreground);
margin-bottom: -6px;
}
.signin-brand .brand-mark {
width: 22px;
height: 22px;
flex-basis: 22px;
font-size: 16px;
}
.signin h1 {
font-family: var(--app-serif);
font-size: 26px;
font-weight: 500;
font-size: 22px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
margin: 0 0 2px;
}
.signin input {
Expand All @@ -3935,6 +3971,9 @@ body.resizing-sidebar {
color: var(--muted-foreground);
line-height: 1.45;
}
.signin .hint.error {
color: var(--destructive, #c00);
}

@media (max-width: 860px) {
:root {
Expand Down
Loading