@pramen/cms-editor 0.0.24 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {

package/src/api.ts

@@ -20,6 +20,20 @@ export class ApiError extends Error {
   }
 }
 
+/** Decode a JWT's `exp` claim (seconds) and report whether it has passed. A non-JWT token or
+ * one without `exp` is treated as NOT expired (fail open) — the server is the real authority.
+ * Used to bounce an expired session to sign-in before/instead of firing doomed requests. */
+export function isTokenExpired(token: string): boolean {
+  try {
+    const seg = String(token).split(".")[1];
+    if (!seg) return false;
+    const payload = JSON.parse(atob(seg.replace(/-/g, "+").replace(/_/g, "/")));
+    return typeof payload.exp === "number" && Date.now() >= payload.exp * 1000;
+  } catch {
+    return false;
+  }
+}
+
 const LS = "pramen.cmsEditor";
 export function loadConfig(): Config {
   try {
@@ -33,9 +47,21 @@ export function loadConfig(): Config {
 export function saveConfig(cfg: Config): void {
   localStorage.setItem(LS, JSON.stringify(cfg));
 }
+/** Drop the persisted session (used when handing off to an external sign-in page). */
+export function clearConfig(): void {
+  try {
+    localStorage.removeItem(LS);
+  } catch {
+    /* ignore */
+  }
+}
 
 export class Api {
-  constructor(private cfg: Config) {}
+  /** `onExpired` fires when a call is attempted with a locally-expired token — the app wires
+   * it to redirect to sign-in. We can't key off HTTP status: an expired token is rejected as
+   * anonymous and a role-gated handler then returns 403, indistinguishable from a valid token
+   * that merely lacks the role. So expiry is detected client-side from the token's `exp`. */
+  constructor(private cfg: Config, private onExpired?: () => void) {}
 
   setConfig(cfg: Config): void {
     this.cfg = cfg;
@@ -47,6 +73,12 @@ export class Api {
 
   /** Call a CMS RPC handler. Throws ApiError on a non-`ok` envelope. */
   async call<T = unknown>(name: string, input?: unknown): Promise<T> {
+    // Expired token: hand off to sign-in instead of firing a request that will 403 into an
+    // error banner. The returned promise never settles — navigation is already underway.
+    if (this.onExpired && this.cfg.token && isTokenExpired(this.cfg.token)) {
+      this.onExpired();
+      return new Promise<T>(() => {});
+    }
     const res = await fetch(`${this.base()}/rpc/${name}`, {
       method: "POST",
       headers: {

package/src/app-context.tsx

@@ -5,7 +5,29 @@
 
 import { Button, Input } from "@podoba/react";
 import { createContext, use, useEffect, useMemo, useState } from "react";
-import { Api, loadConfig, saveConfig, type Config } from "./api";
+import { Api, clearConfig, isTokenExpired, loadConfig, saveConfig, type Config } from "./api";
+
+declare global {
+  interface Window {
+    /** Runtime config set by the host's /config.js (see @pramen/cms-editor build). */
+    PRAMEN_CMS_EDITOR?: { signInUrl?: string };
+  }
+}
+
+/** External sign-in URL, if the host configured one via /config.js. When set, an
+ * unauthenticated OR expired session is redirected here instead of the built-in Setup
+ * screen — for deployments whose auth (magic-link, SSO, …) lives on a separate page.
+ *
+ * `?setup=1` forces the built-in Setup screen even when a sign-in URL is configured — the
+ * bootstrap escape hatch for pasting a first-admin JWT before any account exists. */
+const SIGN_IN_URL: string | undefined =
+  typeof window !== "undefined" && !new URLSearchParams(window.location.search).has("setup") ? window.PRAMEN_CMS_EDITOR?.signInUrl : undefined;
+
+/** Drop the stale session and hand off to the external sign-in page. */
+function redirectToSignIn(): void {
+  clearConfig();
+  location.replace(SIGN_IN_URL!);
+}
 
 export interface Me {
   userId?: string;
@@ -36,17 +58,40 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
   const [cfg, setCfg] = useState<Config>(loadConfig());
   const [me, setMe] = useState<Me | null>(null);
   const [error, setError] = useState("");
-  const api = useMemo(() => new Api(cfg), [cfg]);
-  const configured = Boolean(cfg.baseUrl && cfg.token);
+  // A usable session = a base URL + a token that is NOT expired. An expired token counts as
+  // no session: otherwise the editor mounts and every RPC 403s into an error banner.
+  const authValid = Boolean(cfg.baseUrl && cfg.token) && !isTokenExpired(cfg.token);
+  const api = useMemo(() => new Api(cfg, SIGN_IN_URL ? redirectToSignIn : undefined), [cfg]);
+
+  // When an external sign-in page is configured, bounce there on boot AND the moment the
+  // token expires mid-session (poll + on tab focus), so an idle editor never sits on a dead
+  // session showing errors. Keyed on the token's own `exp` — the server can't distinguish an
+  // expired token (rejected as anonymous → 403) from a valid token lacking a role.
+  useEffect(() => {
+    if (!SIGN_IN_URL) return;
+    const check = () => { if (!cfg.token || isTokenExpired(cfg.token)) redirectToSignIn(); };
+    check();
+    const onVisible = () => { if (!document.hidden) check(); };
+    const id = window.setInterval(check, 30000);
+    window.addEventListener("visibilitychange", onVisible);
+    window.addEventListener("focus", check);
+    return () => {
+      window.clearInterval(id);
+      window.removeEventListener("visibilitychange", onVisible);
+      window.removeEventListener("focus", check);
+    };
+  }, [cfg.token]);
 
   useEffect(() => {
-    if (!configured) return;
+    if (!authValid) return;
     // `me` gates the Users tab + drives Settings — a failing call is fine (leaves it {}).
     api.call<Me>("me").then(setMe).catch(() => setMe({}));
-  }, [api, configured]);
+  }, [api, authValid]);
 
-  if (!configured) {
-    return <Setup cfg={cfg} onSave={(c) => { saveConfig(c); setCfg(c); }} />;
+  if (!authValid) {
+    // Configured external sign-in → hand off (the boot effect above navigates). Otherwise
+    // fall back to the built-in Setup screen (paste a JWT).
+    return SIGN_IN_URL ? null : <Setup cfg={cfg} onSave={(c) => { saveConfig(c); setCfg(c); }} />;
   }
 
   const value: AppContextValue = {
@@ -56,7 +101,10 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     isAdmin: (me?.roles ?? []).includes("admin"),
     error,
     setError,
-    reconfigure: () => { setMe(null); setError(""); setCfg({ ...cfg, token: "" }); },
+    reconfigure: () => {
+      if (SIGN_IN_URL) { redirectToSignIn(); return; }
+      setMe(null); setError(""); setCfg({ ...cfg, token: "" });
+    },
   };
   return <AppContext value={value}>{children}</AppContext>;
 }