@pablozaiden/webapp 0.3.6 → 0.3.8

package/docs/auth.md

@@ -40,6 +40,8 @@ PATCH: (_req, ctx) => {
 
 API keys are user-owned bearer tokens for scripts and agents. They are stored hashed in SQLite and shown only once at creation. Route `scopes` are enforced for API-key requests; `*` grants all scopes.
 
+Expired API keys do not authenticate, are omitted from user-facing lists, and are purged when key lists or expired keys are encountered.
+
 Same-origin checks are skipped for API-key and device bearer requests unless a route sets `sameOrigin: "always"`, because non-browser clients usually do not send `Origin`.
 
 ## Device auth
@@ -52,7 +54,7 @@ Device auth is included in V1:
 4. Client exchanges the approved code at `/api/auth/token`.
 5. Access tokens are JWT bearer tokens whose `sub` is the approving user id; refresh tokens rotate on every refresh.
 
-Device codes are one-use. Device sessions are self-only in Settings. Reusing a consumed device code or stale refresh token returns `invalid_grant`.
+Device codes are one-use. Device sessions are self-only in Settings, and only active refresh-token sessions are listed. Revoked or expired sessions are hidden; expired sessions are purged, while revoked session records can remain stored to detect stale refresh-token reuse. Reusing a consumed device code or stale refresh token returns `invalid_grant`.
 
 ## Same-origin policy
 

package/docs/settings.md

@@ -11,6 +11,8 @@ Settings is framework-owned so apps stay consistent. It includes:
 - Admin server kill
 - Version/about
 
+Security lists only show useful active credentials. Expired API keys are purged before listing, and revoked or expired device-auth refresh sessions are not shown. Revoked refresh sessions may remain in storage when needed for token-reuse protection, but they are hidden from Settings.
+
 Destructive actions in Settings use the framework `ConfirmDialog` before mutating. This includes deleting users, deleting API keys, deleting passkeys, revoking device-auth sessions, and killing the server.
 
 The server kill control follows the normal Settings row layout: explanation on the left, action on the right. After confirmation and a successful response, Settings shows a 15-second shutdown countdown progress bar that visibly drains before reloading the page.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/contracts/index.ts

@@ -108,6 +108,7 @@ export interface AuthSessionSummary {
   expiresAt: string;
   lastUsedAt?: string;
   revokedAt?: string;
+  /** Built-in session lists only expose active sessions; retained for API compatibility. */
   active: boolean;
 }
 

package/src/server/auth/api-keys.ts

@@ -16,7 +16,10 @@ function summarize(record: { tokenHash?: string } & ApiKeySummary): ApiKeySummar
 }
 
 export function listApiKeys(store: WebAppStore, userId: string): ApiKeySummary[] {
-  return store.listApiKeys(userId).map(summarize);
+  store.deleteExpiredApiKeys?.(nowIso());
+  return store.listApiKeys(userId)
+    .filter((record) => !record.expiresAt || !isExpired(record.expiresAt))
+    .map(summarize);
 }
 
 export function createApiKey(store: WebAppStore, user: CurrentUser, input: { name?: string; scopes?: string[]; prefix?: string; expiresAt?: string }): CreatedApiKeyResponse {
@@ -44,6 +47,9 @@ export function authenticateApiKey(store: WebAppStore, token: string): { user: C
   const tokenHash = sha256(token);
   const record = store.getApiKeyByHash(tokenHash);
   if (!record || !secureEqual(record.tokenHash, tokenHash) || (record.expiresAt && isExpired(record.expiresAt))) {
+    if (record?.expiresAt && isExpired(record.expiresAt)) {
+      store.deleteApiKey(record.id);
+    }
     return undefined;
   }
   const user = store.getUserById(record.userId);

package/src/server/auth/device-auth.ts

@@ -123,6 +123,7 @@ function tokenSet(accessToken: string, refreshToken: string, scope: string): Tok
 }
 
 export function createDeviceAuthorization(req: Request, store: WebAppStore, config: RuntimeConfig, input: { clientId?: string; scope?: string } = {}): DeviceAuthorizationResponse {
+  store.deleteExpiredDeviceAuthRequests(nowIso());
   const deviceCode = randomToken(32);
   let userCode = generateUserCode();
   while (store.getDeviceAuthByUserCode(userCode)) {
@@ -151,6 +152,7 @@ export function createDeviceAuthorization(req: Request, store: WebAppStore, conf
 }
 
 export function getDeviceVerificationDetails(store: WebAppStore, userCode: string, passkeyRequired: boolean): DeviceVerificationDetails {
+  store.deleteExpiredDeviceAuthRequests(nowIso());
   const record = store.getDeviceAuthByUserCode(userCode);
   if (!record || isExpired(record.expiresAt)) {
     throw new AuthError("invalid_user_code", "Device authorization code is invalid or expired", 404);
@@ -207,6 +209,7 @@ function createRefreshRecord(userId: string, clientId: string, scope: string, fa
 }
 
 export async function exchangeDeviceCode(store: WebAppStore, config: RuntimeConfig, deviceCode: string, clientId?: string): Promise<TokenResponse> {
+  store.deleteExpiredDeviceAuthRequests(nowIso());
   const record = store.getDeviceAuthByDeviceCodeHash(sha256(deviceCode));
   if (!record) {
     throw new AuthError("invalid_grant", "Device code is invalid", 400);
@@ -301,17 +304,20 @@ export async function verifyAccessToken(store: WebAppStore, config: RuntimeConfi
 }
 
 export function listAuthSessions(store: WebAppStore, userId: string): AuthSessionSummary[] {
-  return store.listRefreshSessions(userId).map((session) => ({
-    id: session.id,
-    clientId: session.clientId,
-    scope: session.scope,
-    createdAt: session.createdAt,
-    updatedAt: session.updatedAt,
-    expiresAt: session.expiresAt,
-    lastUsedAt: session.lastUsedAt,
-    revokedAt: session.revokedAt,
-    active: !session.revokedAt && !isExpired(session.expiresAt),
-  }));
+  store.deleteExpiredRefreshSessions?.(nowIso());
+  return store.listRefreshSessions(userId)
+    .filter((session) => !session.revokedAt && !isExpired(session.expiresAt))
+    .map((session) => ({
+      id: session.id,
+      clientId: session.clientId,
+      scope: session.scope,
+      createdAt: session.createdAt,
+      updatedAt: session.updatedAt,
+      expiresAt: session.expiresAt,
+      lastUsedAt: session.lastUsedAt,
+      revokedAt: session.revokedAt,
+      active: true,
+    }));
 }
 
 export function revokeAuthSession(store: WebAppStore, userId: string, id: string): boolean {

package/src/server/auth/sqlite-store.ts

@@ -560,6 +560,9 @@ export function sqliteWebAppStore(options: { dataDir?: string; fileName?: string
     deleteApiKeysForUser: (userId) => {
       db.query("DELETE FROM webapp_api_keys WHERE user_id = ?").run(userId);
     },
+    deleteExpiredApiKeys: (now) => {
+      db.query("DELETE FROM webapp_api_keys WHERE expires_at IS NOT NULL AND expires_at <= ?").run(now);
+    },
 
     saveDeviceAuthRequest: (record) => {
       db.query(`
@@ -646,5 +649,8 @@ export function sqliteWebAppStore(options: { dataDir?: string; fileName?: string
     revokeRefreshSessionsForUser: (userId, revokedAt) => {
       db.query("UPDATE webapp_refresh_sessions SET revoked_at = ?, updated_at = ? WHERE user_id = ? AND revoked_at IS NULL").run(revokedAt, revokedAt, userId);
     },
+    deleteExpiredRefreshSessions: (now) => {
+      db.query("DELETE FROM webapp_refresh_sessions WHERE expires_at <= ?").run(now);
+    },
   };
 }

package/src/server/auth/store.ts

@@ -115,6 +115,7 @@ export interface WebAppStore {
   touchApiKey(id: string, lastUsedAt: string): void;
   deleteApiKey(id: string, userId?: string): boolean;
   deleteApiKeysForUser(userId: string): void;
+  deleteExpiredApiKeys?(nowIso: string): void;
 
   saveDeviceAuthRequest(record: DeviceAuthRequestRecord): void;
   getDeviceAuthByUserCode(userCode: string): DeviceAuthRequestRecord | undefined;
@@ -132,4 +133,5 @@ export interface WebAppStore {
   revokeRefreshSession(id: string, revokedAt: string, userId?: string): boolean;
   revokeRefreshFamily(familyId: string, revokedAt: string): void;
   revokeRefreshSessionsForUser(userId: string, revokedAt: string): void;
+  deleteExpiredRefreshSessions?(nowIso: string): void;
 }

package/src/web/WebAppRoot.tsx

@@ -531,6 +531,17 @@ function DeviceVerificationScreen() {
 
 type SidebarTreeParentKind = "root" | "section" | "item";
 
+type SidebarTreeProps = {
+  nodes: SidebarNode[];
+  route: WebAppRoute;
+  navigate: (route: WebAppRoute) => void;
+  collapsed: SidebarCollapsedState;
+  toggleCollapsed: (id: string, isCollapsed: boolean) => void;
+  searchActive: boolean;
+  level?: number;
+  parentKind?: SidebarTreeParentKind;
+};
+
 function sidebarIndentStyle(level: number, parentKind: SidebarTreeParentKind): { marginLeft?: string } | undefined {
   if (level <= 0) {
     return undefined;
@@ -540,19 +551,26 @@ function sidebarIndentStyle(level: number, parentKind: SidebarTreeParentKind): {
   return { marginLeft: `${baseIndentRem + nestedSectionIndentRem}rem` };
 }
 
-function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, level = 0, parentKind = "root" }: { nodes: SidebarNode[]; route: WebAppRoute; navigate: (route: WebAppRoute) => void; collapsed: SidebarCollapsedState; toggleCollapsed: (id: string, isCollapsed: boolean) => void; level?: number; parentKind?: SidebarTreeParentKind }) {
+function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, searchActive, level = 0, parentKind = "root" }: SidebarTreeProps) {
   const [contextMenu, setContextMenu] = useState<{ position: ContextMenuPosition; items: ActionMenuItem[]; title: string } | null>(null);
   return (
     <>
       {nodes.map((node) => {
         const hasChildren = Boolean(node.children?.length);
-        const isCollapsed = collapsed[node.id] ?? node.defaultCollapsed ?? false;
+        const storedIsCollapsed = collapsed[node.id] ?? node.defaultCollapsed ?? false;
+        const isCollapsed = searchActive && hasChildren ? false : storedIsCollapsed;
+        const toggleAriaLabel = searchActive ? `Toggling unavailable during search for ${node.title}` : `${isCollapsed ? "Expand" : "Collapse"} ${node.title}`;
+        const toggleNodeCollapsed = () => {
+          if (!searchActive) {
+            toggleCollapsed(node.id, storedIsCollapsed);
+          }
+        };
         if (node.type === "section") {
           return (
             <section className={`wapp-sidebar-section ${level === 0 ? "top" : "nested"}`} key={node.id}>
               <div className="wapp-sidebar-section-title" style={sidebarIndentStyle(level, parentKind)}>
                 {hasChildren ? (
-                  <button type="button" aria-expanded={!isCollapsed} aria-label={`${isCollapsed ? "Expand" : "Collapse"} ${node.title}`} onClick={() => toggleCollapsed(node.id, isCollapsed)}>
+                  <button type="button" aria-expanded={!isCollapsed} aria-label={toggleAriaLabel} disabled={searchActive} onClick={toggleNodeCollapsed}>
                     <span>{isCollapsed ? "▶" : "▼"}</span>{node.title}
                   </button>
                 ) : (
@@ -560,7 +578,7 @@ function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, level
                 )}
                 {node.action ? <button type="button" className="wapp-sidebar-action" title={node.action.title} aria-label={node.action.title} onClick={node.action.onAction ?? (() => node.action?.route && navigate(node.action.route))}>{node.action.label ?? "New"}</button> : null}
               </div>
-              {!isCollapsed && hasChildren ? <SidebarTree nodes={node.children ?? []} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} level={level + 1} parentKind="section" /> : null}
+              {!isCollapsed && hasChildren ? <SidebarTree nodes={node.children ?? []} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} searchActive={searchActive} level={level + 1} parentKind="section" /> : null}
               {!isCollapsed && !hasChildren && level === 0 ? <div className="wapp-sidebar-empty">No items.</div> : null}
             </section>
           );
@@ -568,7 +586,7 @@ function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, level
         const active = node.route?.view === route.view && Object.entries(node.route).every(([key, value]) => key === "view" || route[key] === value);
         return (
           <div className={`wapp-sidebar-item-wrap ${hasChildren ? "has-toggle" : ""}`} key={node.id} style={sidebarIndentStyle(level, parentKind)}>
-            {hasChildren ? <button type="button" className="wapp-tree-toggle" aria-expanded={!isCollapsed} aria-label={`${isCollapsed ? "Expand" : "Collapse"} ${node.title}`} onClick={() => toggleCollapsed(node.id, isCollapsed)}>{isCollapsed ? "▶" : "▼"}</button> : null}
+            {hasChildren ? <button type="button" className="wapp-tree-toggle" aria-expanded={!isCollapsed} aria-label={toggleAriaLabel} disabled={searchActive} onClick={toggleNodeCollapsed}>{isCollapsed ? "▶" : "▼"}</button> : null}
             <button
               type="button"
               className={`wapp-sidebar-item ${active ? "active" : ""}`}
@@ -585,7 +603,7 @@ function SidebarTree({ nodes, route, navigate, collapsed, toggleCollapsed, level
               </span>
               {node.badge ? <Badge variant={node.badgeVariant} className="wapp-sidebar-badge" title={node.badge} aria-label={node.badge}> </Badge> : null}
             </button>
-            {!isCollapsed && node.children ? <div className="wapp-sidebar-children"><SidebarTree nodes={node.children} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} level={level + 1} parentKind="item" /></div> : null}
+            {!isCollapsed && node.children ? <div className="wapp-sidebar-children"><SidebarTree nodes={node.children} route={route} navigate={navigate} collapsed={collapsed} toggleCollapsed={toggleCollapsed} searchActive={searchActive} level={level + 1} parentKind="item" /></div> : null}
           </div>
         );
       })}
@@ -949,8 +967,8 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
             <div className="wapp-list">
               {authSessions.length ? authSessions.map((session) => (
                 <div className="wapp-list-row" key={session.id}>
-                  <span><strong>{session.clientId}</strong><small>{session.scope} · {session.active ? "active" : "inactive"} · {session.updatedAt}</small></span>
-                  <Button type="button" variant="danger" disabled={!session.active} onClick={() => setAuthSessionToRevoke(session)}>Revoke</Button>
+                  <span><strong>{session.clientId}</strong><small>{session.scope} · {session.updatedAt}</small></span>
+                  <Button type="button" variant="danger" onClick={() => setAuthSessionToRevoke(session)}>Revoke</Button>
                 </div>
               )) : <EmptyState title="No device sessions" />}
             </div>
@@ -1040,10 +1058,12 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
     });
   }, []);
   const sidebarSearchEnabled = sidebar.search !== false;
+  const normalizedSidebarSearch = sidebarSearchEnabled ? search.trim() : "";
+  const sidebarSearchActive = normalizedSidebarSearch.length > 0;
   const pinningEnabled = sidebar.pinning !== false;
   const sidebarPins = useSidebarPins(appName, sidebar.pinning ? sidebar.pinning.storageKey : undefined);
   const baseNodes = useMemo(() => sidebar.getNodes({ search: "" }), [sidebar]);
-  const filteredNodes = useMemo(() => sidebar.getNodes({ search: sidebarSearchEnabled ? search : "" }), [sidebar, search, sidebarSearchEnabled]);
+  const filteredNodes = useMemo(() => sidebar.getNodes({ search: normalizedSidebarSearch }), [sidebar, normalizedSidebarSearch]);
   const allPinnableItems = useMemo(() => flattenSidebarItems(baseNodes).filter((node) => node.pinnable && node.route), [baseNodes]);
   const currentPins = useMemo(() => {
     const byId = new Map(allPinnableItems.map((node) => [node.pinId ?? node.id, node]));
@@ -1071,7 +1091,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
   }), [pinningActionFor]);
   const nodes = useMemo(() => {
     const augmented = augmentPinningActions(filteredNodes);
-    if (!pinningEnabled || (sidebarSearchEnabled && search.trim()) || currentPins.length === 0) return augmented;
+    if (!pinningEnabled || sidebarSearchActive || currentPins.length === 0) return augmented;
     const augmentedByPinId = new Map(flattenSidebarItems(augmentPinningActions(baseNodes)).map((node) => [node.pinId ?? node.id, node]));
     const pinnedChildren = currentPins.map((pin) => ({
       ...(augmentedByPinId.get(pin.id) ?? {
@@ -1091,7 +1111,7 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
       { type: "section" as const, id: "framework:pinned", title: sidebar.pinning ? sidebar.pinning.sectionTitle ?? "Pinned" : "Pinned", children: pinnedChildren },
       ...augmented,
     ];
-  }, [augmentPinningActions, baseNodes, currentPins, filteredNodes, pinningEnabled, search, sidebar.pinning, sidebarSearchEnabled]);
+  }, [augmentPinningActions, baseNodes, currentPins, filteredNodes, pinningEnabled, sidebar.pinning, sidebarSearchActive]);
 
   useEffect(() => {
     if (!config?.currentUser) return;
@@ -1192,8 +1212,8 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
           </div>
         </div>
         <div className="wapp-sidebar-scroll">
-          {sidebarSearchEnabled ? <label className="wapp-search"><span className="sr-only">Search</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search" /></label> : null}
-          <SidebarTree nodes={nodes} route={route} navigate={(next) => { navigate(next); setSidebarOpen(false); }} collapsed={sidebarTreeState.collapsed} toggleCollapsed={sidebarTreeState.toggleCollapsed} />
+          {sidebarSearchEnabled ? <label className="wapp-search"><span className="sr-only">Search</span><input value={search} onInput={(event) => setSearch(event.currentTarget.value)} placeholder="Search" /></label> : null}
+          <SidebarTree nodes={nodes} route={route} navigate={(next) => { navigate(next); setSidebarOpen(false); }} collapsed={sidebarTreeState.collapsed} toggleCollapsed={sidebarTreeState.toggleCollapsed} searchActive={sidebarSearchActive} />
           <div className="wapp-sidebar-footer">v{effectiveVersion}<button type="button" aria-label="Reload" onClick={() => window.location.reload()}><Icon name="refresh" /></button></div>
         </div>
       </aside>