zudoku 0.78.0 → 0.78.2

package/src/lib/authentication/session-handler.ts

@@ -0,0 +1,164 @@
+import { Hono } from "hono";
+import { deleteCookie, setCookie } from "hono/cookie";
+import type { CookieOptions } from "hono/utils/cookie";
+import type { VerifyAccessTokenResult } from "./authentication.js";
+import {
+  ACCESS_TOKEN_COOKIE,
+  AUTH_PROFILE_COOKIE,
+  REFRESH_TOKEN_COOKIE,
+} from "./cookies.js";
+
+export type VerifyAccessToken = (
+  token: string,
+) => Promise<VerifyAccessTokenResult>;
+
+const baseCookieOptions: Omit<CookieOptions, "maxAge"> = {
+  httpOnly: true,
+  path: "/",
+  sameSite: "Lax",
+  secure: import.meta.env.PROD,
+};
+
+const REFRESH_TOKEN_MAX_AGE = 60 * 60 * 24 * 30; // 30 days
+const DEFAULT_SESSION_MAX_AGE = 60 * 60; // 1 hour fallback when verifier omits expiresAt
+
+const cookieMaxAge = (
+  expiresAt: number | undefined,
+  fallback: number,
+): number => {
+  if (typeof expiresAt !== "number") return fallback;
+  const remaining = Math.floor(expiresAt - Date.now() / 1000);
+  return remaining > 0 ? Math.min(remaining, fallback) : fallback;
+};
+
+const MAX_COOKIE_SIZE = 3900; // Leave margin under 4096 browser limit
+const MAX_BODY_SIZE = 64 * 1024;
+
+const sameOriginCheck = (c: {
+  req: { header: (name: string) => string | undefined };
+}): boolean => {
+  // Sec-Fetch-Site is set by the browser and cannot be forged from JS, so
+  // prefer it. The Origin/Host comparison breaks behind any proxy/CDN that
+  // rewrites the Host header (CloudFront, etc.).
+  const fetchSite = c.req.header("Sec-Fetch-Site");
+  if (fetchSite) {
+    return fetchSite === "same-origin";
+  }
+
+  const origin = c.req.header("Origin");
+  const host = c.req.header("Host");
+  if (origin && host) {
+    try {
+      return new URL(origin).host === host;
+    } catch {
+      return false;
+    }
+  }
+
+  return false;
+};
+
+/**
+ * Build the Hono sub-app that manages SSR auth cookies.
+ *
+ * Profile is derived solely from `verify(token)`; a client-submitted profile
+ * is ignored. Callers must send only `{ accessToken, refreshToken? }`.
+ * `verify` is omitted when no provider supports SSR auth (→ 501).
+ */
+export const createSessionHandler = (verify: VerifyAccessToken | undefined) =>
+  new Hono()
+    .post("/", async (c) => {
+      if (!sameOriginCheck(c)) {
+        return c.json({ error: "CSRF check failed" }, 403);
+      }
+
+      if (!verify) {
+        return c.json(
+          { error: "SSR authentication is not supported for this provider" },
+          501,
+        );
+      }
+
+      const contentLength = Number(c.req.header("Content-Length") ?? 0);
+      if (contentLength > MAX_BODY_SIZE) {
+        return c.json({ error: "Request body too large" }, 413);
+      }
+      const raw = await c.req.text().catch(() => "");
+      if (raw.length > MAX_BODY_SIZE) {
+        return c.json({ error: "Request body too large" }, 413);
+      }
+      let body: { accessToken?: unknown; refreshToken?: unknown } | undefined;
+      try {
+        body = raw ? JSON.parse(raw) : undefined;
+      } catch {
+        body = undefined;
+      }
+
+      const accessToken =
+        typeof body?.accessToken === "string" ? body.accessToken : undefined;
+      if (!accessToken) {
+        return c.json({ error: "Missing access token" }, 400);
+      }
+      if (accessToken.length > MAX_COOKIE_SIZE) {
+        return c.json({ error: "Access token exceeds cookie size limit" }, 400);
+      }
+
+      const refreshToken =
+        typeof body?.refreshToken === "string" ? body.refreshToken : undefined;
+      if (refreshToken && refreshToken.length > MAX_COOKIE_SIZE) {
+        return c.json(
+          { error: "Refresh token exceeds cookie size limit" },
+          400,
+        );
+      }
+
+      let verified: VerifyAccessTokenResult;
+      try {
+        verified = await verify(accessToken);
+      } catch (e) {
+        // biome-ignore lint/suspicious/noConsole: Surface verifier failures
+        console.error("SSR auth verifier error:", e);
+        return c.json({ error: "Verifier error" }, 502);
+      }
+      if (!verified) {
+        return c.json({ error: "Invalid access token" }, 401);
+      }
+
+      const sessionOptions: CookieOptions = {
+        ...baseCookieOptions,
+        maxAge: cookieMaxAge(verified.expiresAt, DEFAULT_SESSION_MAX_AGE),
+      };
+      const refreshOptions: CookieOptions = {
+        ...baseCookieOptions,
+        maxAge: cookieMaxAge(verified.refreshExpiresAt, REFRESH_TOKEN_MAX_AGE),
+      };
+
+      let profileJson: string;
+      try {
+        profileJson = JSON.stringify(verified.profile);
+      } catch {
+        return c.json({ error: "Profile is not serializable" }, 500);
+      }
+      if (profileJson.length > MAX_COOKIE_SIZE) {
+        return c.json({ error: "Profile exceeds cookie size limit" }, 413);
+      }
+
+      setCookie(c, AUTH_PROFILE_COOKIE, profileJson, sessionOptions);
+      setCookie(c, ACCESS_TOKEN_COOKIE, accessToken, sessionOptions);
+      if (refreshToken) {
+        setCookie(c, REFRESH_TOKEN_COOKIE, refreshToken, refreshOptions);
+      }
+
+      return c.json({ ok: true });
+    })
+    .delete("/", (c) => {
+      if (!sameOriginCheck(c)) {
+        return c.json({ error: "CSRF check failed" }, 403);
+      }
+
+      deleteCookie(c, ACCESS_TOKEN_COOKIE, baseCookieOptions);
+      deleteCookie(c, REFRESH_TOKEN_COOKIE, baseCookieOptions);
+      deleteCookie(c, AUTH_PROFILE_COOKIE, baseCookieOptions);
+
+      return c.json({ ok: true });
+    });

package/src/lib/authentication/state.ts

@@ -1,5 +1,9 @@
 import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
+import {
+  createJSONStorage,
+  persist,
+  type StateStorage,
+} from "zustand/middleware";
 import { syncZustandState } from "../util/syncZustandState.js";
 
 /**
@@ -34,12 +38,29 @@ export interface AuthState {
   }) => void;
 }
 
+const noopStorage: StateStorage = {
+  getItem: () => null,
+  setItem: () => {},
+  removeItem: () => {},
+};
+
+// Seed from the SSR-injected signal. Object present = server checked;
+// `profile: null` = authoritative anon. Absent = fall back to pending.
+const ssrAuthInitial =
+  typeof window !== "undefined" ? window.ZUDOKU_SSR_AUTH : undefined;
+
+// SSR builds use cookies as the source of truth; SSG uses localStorage.
+// `import.meta.env` is missing when this module is loaded outside a Vite
+// build (e.g. esbuild bundling a vite.*.config.ts), so guard the access.
+const ssrMode =
+  typeof import.meta.env !== "undefined" && import.meta.env.ZUDOKU_HAS_SERVER;
+
 export const authState = create<AuthState>()(
   persist(
     (set) => ({
-      isAuthenticated: false,
-      isPending: true,
-      profile: null,
+      isAuthenticated: !!ssrAuthInitial?.profile,
+      isPending: ssrAuthInitial === undefined,
+      profile: ssrAuthInitial?.profile ?? null,
       providerData: null,
       setAuthenticationPending: () =>
         set(() => ({
@@ -72,7 +93,9 @@ export const authState = create<AuthState>()(
         };
       },
       name: "auth-state",
-      storage: createJSONStorage(() => localStorage),
+      storage: createJSONStorage(() =>
+        typeof window === "undefined" || ssrMode ? noopStorage : localStorage,
+      ),
     },
   ),
 );
@@ -102,3 +125,11 @@ export interface UserProfile {
   pictureUrl: string | undefined;
   [key: string]: CustomClaim;
 }
+
+// Injected by entry.server.tsx before </body>. Augment Window here so
+// packages that typecheck through this module (e.g. plugins) see the property.
+declare global {
+  interface Window {
+    ZUDOKU_SSR_AUTH?: { profile: UserProfile | null };
+  }
+}

package/src/lib/authentication/verify-cache.ts

@@ -0,0 +1,32 @@
+import QuickLRU from "quick-lru";
+
+// Cache verifier calls to prevent high-volume requests from overloading the identity provider.
+// 60s TTL means revoked tokens are rejected within a minute; the 1h cookie is the max window.
+const cache = new QuickLRU<string, unknown>({
+  maxSize: 1000,
+  maxAge: 60_000,
+});
+
+const hash = async (token: string) => {
+  const buf = await crypto.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(token),
+  );
+  return Array.from(new Uint8Array(buf), (b) =>
+    b.toString(16).padStart(2, "0"),
+  ).join("");
+};
+
+export const clearVerifyCache = () => cache.clear();
+
+export const cachedVerifyAccessToken = async <T>(
+  verify: (token: string) => Promise<T>,
+  token: string,
+): Promise<T> => {
+  const key = await hash(token);
+  if (cache.has(key)) return cache.get(key) as T;
+  const result = await verify(token);
+  cache.set(key, result);
+
+  return result;
+};

package/src/lib/components/Bootstrap.tsx

@@ -25,7 +25,7 @@ const queryClient = new QueryClient({
   },
 });
 
-const Bootstrap = ({
+export const BootstrapClient = ({
   router,
   hydrate = false,
 }: {
@@ -34,10 +34,11 @@ const Bootstrap = ({
 }) => (
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      {/* biome-ignore lint/suspicious/noExplicitAny: Allow any type */}
-      <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+      <HydrationBoundary state={hydrate ? window.ZUDOKU_DATA : undefined}>
         <HelmetProvider>
-          <RouterProvider router={router} />
+          <RenderContext value={{ status: 200, bypassProtection: false }}>
+            <RouterProvider router={router} />
+          </RenderContext>
         </HelmetProvider>
       </HydrationBoundary>
     </QueryClientProvider>
@@ -61,17 +62,22 @@ const BootstrapStatic = ({
 }) => (
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <HelmetProvider context={helmetContext}>
-        <RenderContext
-          value={
-            renderContext ?? { status: 200, bypassProtection: bypassProtection }
-          }
-        >
-          <StaticRouterProvider router={router} context={context} />
-        </RenderContext>
-      </HelmetProvider>
+      <HydrationBoundary state={undefined}>
+        <HelmetProvider context={helmetContext}>
+          <RenderContext
+            value={
+              renderContext ?? {
+                status: 200,
+                bypassProtection: bypassProtection,
+              }
+            }
+          >
+            <StaticRouterProvider router={router} context={context} />
+          </RenderContext>
+        </HelmetProvider>
+      </HydrationBoundary>
     </QueryClientProvider>
   </StrictMode>
 );
 
-export { Bootstrap, BootstrapStatic };
+export { BootstrapStatic };

package/src/lib/components/Header.tsx

@@ -21,7 +21,6 @@ import {
 import { cn } from "../util/cn.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
-import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { HeaderNavigation } from "./HeaderNavigation.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
@@ -63,66 +62,66 @@ const ProfileMenu = () => {
   const context = useZudoku();
   const profileItems = context.getProfileMenuItems();
   const auth = useAuth();
-  const { isAuthEnabled, isAuthenticated, profile } = auth;
+  const { isAuthEnabled, isPending, isAuthenticated, profile } = auth;
 
   if (!isAuthEnabled) return null;
 
-  return (
-    <ClientOnly fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}>
-      {!isAuthenticated ? (
-        <Button size="lg" variant="ghost" onClick={() => auth.login()}>
-          Login
+  if (isPending) {
+    return <Skeleton className="rounded-sm h-8 w-16" />;
+  }
+
+  return !isAuthenticated ? (
+    <Button size="lg" variant="ghost" onClick={() => auth.login()}>
+      Login
+    </Button>
+  ) : (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button size="lg" variant="ghost">
+          {profile?.name ?? "My Account"}
         </Button>
-      ) : (
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
-            <Button size="lg" variant="ghost">
-              {profile?.name ?? "My Account"}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>
-              {profile?.name ?? "My Account"}
-              {profile?.email && profile.email !== profile?.name && (
-                <div className="font-normal text-muted-foreground">
-                  {profile.email}
-                </div>
-              )}
-            </DropdownMenuLabel>
-            {profileItems.filter((i) => i.category === "top").length > 0 && (
-              <DropdownMenuSeparator />
-            )}
-            {profileItems
-              .filter((i) => i.category === "top")
-              .map((i) => (
-                <RecursiveMenu key={i.label} item={i} />
-              ))}
-            {profileItems.filter((i) => !i.category || i.category === "middle")
-              .length > 0 && <DropdownMenuSeparator />}
-            {profileItems
-              .filter((i) => !i.category || i.category === "middle")
-              .map((i) => (
-                <RecursiveMenu key={i.label} item={i} />
-              ))}
-            {profileItems.filter((i) => i.category === "bottom").length > 0 && (
-              <DropdownMenuSeparator />
-            )}
-            {profileItems
-              .filter((i) => i.category === "bottom")
-              .map((i) => (
-                <RecursiveMenu key={i.label} item={i} />
-              ))}
-            <DropdownMenuSeparator />
-            <Link to="/signout">
-              <DropdownMenuItem className="flex gap-2">
-                <LogOutIcon size={16} strokeWidth={1} absoluteStrokeWidth />
-                Logout
-              </DropdownMenuItem>
-            </Link>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    </ClientOnly>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>
+          {profile?.name ?? "My Account"}
+          {profile?.email && profile.email !== profile?.name && (
+            <div className="font-normal text-muted-foreground">
+              {profile.email}
+            </div>
+          )}
+        </DropdownMenuLabel>
+        {profileItems.filter((i) => i.category === "top").length > 0 && (
+          <DropdownMenuSeparator />
+        )}
+        {profileItems
+          .filter((i) => i.category === "top")
+          .map((i) => (
+            <RecursiveMenu key={i.label} item={i} />
+          ))}
+        {profileItems.filter((i) => !i.category || i.category === "middle")
+          .length > 0 && <DropdownMenuSeparator />}
+        {profileItems
+          .filter((i) => !i.category || i.category === "middle")
+          .map((i) => (
+            <RecursiveMenu key={i.label} item={i} />
+          ))}
+        {profileItems.filter((i) => i.category === "bottom").length > 0 && (
+          <DropdownMenuSeparator />
+        )}
+        {profileItems
+          .filter((i) => i.category === "bottom")
+          .map((i) => (
+            <RecursiveMenu key={i.label} item={i} />
+          ))}
+        <DropdownMenuSeparator />
+        <Link to="/signout">
+          <DropdownMenuItem className="flex gap-2">
+            <LogOutIcon size={16} strokeWidth={1} absoluteStrokeWidth />
+            Logout
+          </DropdownMenuItem>
+        </Link>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };
 export const Header = memo(function HeaderInner() {

package/src/lib/components/MobileTopNavigation.tsx

@@ -28,7 +28,6 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "../ui/Drawer.js";
-import { ClientOnly } from "./ClientOnly.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
 import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
@@ -130,7 +129,7 @@ export const MobileTopNavigation = () => {
   } = context;
   const headerNavigation = header?.navigation ?? [];
   const themeSwitcherEnabled = header?.themeSwitcher?.enabled ?? true;
-  const { isAuthenticated, profile, isAuthEnabled } = authState;
+  const { isAuthenticated, isPending, profile, isAuthEnabled } = authState;
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const accountItems = getProfileMenuItems();
@@ -191,75 +190,75 @@ export const MobileTopNavigation = () => {
                   </li>
                 );
               })}
-              {isAuthEnabled && isAuthenticated && (
-                <ClientOnly
-                  fallback={<Skeleton className="rounded-sm h-5 w-24" />}
-                >
-                  <Separator className="my-2" />
-                  <li className="py-2">
-                    <div className="text-base font-medium">
-                      {profile?.name ?? "My Account"}
-                    </div>
-                    {profile?.email && profile.email !== profile?.name && (
-                      <div className="text-sm text-muted-foreground">
-                        {profile.email}
-                      </div>
-                    )}
-                  </li>
-                  {accountItems.map((i) => (
-                    <li key={i.label}>
-                      <Link
-                        to={i.path ?? ""}
-                        target={i.target}
-                        rel={
-                          i.target === "_blank"
-                            ? "noopener noreferrer"
-                            : undefined
-                        }
-                        onClick={() => setDrawerOpen(false)}
-                        className="flex items-center py-2 text-base font-medium text-foreground/75 hover:text-foreground"
-                      >
-                        {i.label}
-                      </Link>
-                    </li>
-                  ))}
-                </ClientOnly>
-              )}
+              {isAuthEnabled &&
+                (isPending ? (
+                  <Skeleton className="rounded-sm h-5 w-24" />
+                ) : (
+                  isAuthenticated && (
+                    <>
+                      <Separator className="my-2" />
+                      <li className="py-2">
+                        <div className="text-base font-medium">
+                          {profile?.name ?? "My Account"}
+                        </div>
+                        {profile?.email && profile.email !== profile?.name && (
+                          <div className="text-sm text-muted-foreground">
+                            {profile.email}
+                          </div>
+                        )}
+                      </li>
+                      {accountItems.map((i) => (
+                        <li key={i.label}>
+                          <Link
+                            to={i.path ?? ""}
+                            target={i.target}
+                            rel={
+                              i.target === "_blank"
+                                ? "noopener noreferrer"
+                                : undefined
+                            }
+                            onClick={() => setDrawerOpen(false)}
+                            className="flex items-center py-2 text-base font-medium text-foreground/75 hover:text-foreground"
+                          >
+                            {i.label}
+                          </Link>
+                        </li>
+                      ))}
+                    </>
+                  )
+                ))}
             </ul>
           </div>
           <div className="border-t shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] px-4 pt-3 flex flex-col gap-2">
             <div className="flex items-center justify-between">
-              {isAuthEnabled && (
-                <ClientOnly
-                  fallback={<Skeleton className="rounded-sm h-8 w-16" />}
-                >
-                  {isAuthenticated ? (
-                    <Button asChild variant="outline">
-                      <Link
-                        to="/signout"
-                        onClick={() => setDrawerOpen(false)}
-                        className="flex items-center gap-2"
-                      >
-                        <LogOutIcon
-                          size={16}
-                          strokeWidth={1}
-                          absoluteStrokeWidth
-                        />
-                        Logout
-                      </Link>
-                    </Button>
-                  ) : (
-                    <Button asChild variant="outline">
-                      <Link
-                        to={`/signin?redirect=${encodeURIComponent(location.pathname)}`}
-                        onClick={() => setDrawerOpen(false)}
-                      >
-                        Login
-                      </Link>
-                    </Button>
-                  )}
-                </ClientOnly>
-              )}
+              {isAuthEnabled &&
+                (isPending ? (
+                  <Skeleton className="rounded-sm h-8 w-16" />
+                ) : isAuthenticated ? (
+                  <Button asChild variant="outline">
+                    <Link
+                      to="/signout"
+                      onClick={() => setDrawerOpen(false)}
+                      className="flex items-center gap-2"
+                    >
+                      <LogOutIcon
+                        size={16}
+                        strokeWidth={1}
+                        absoluteStrokeWidth
+                      />
+                      Logout
+                    </Link>
+                  </Button>
+                ) : (
+                  <Button asChild variant="outline">
+                    <Link
+                      to={`/signin?redirect=${encodeURIComponent(location.pathname)}`}
+                      onClick={() => setDrawerOpen(false)}
+                    >
+                      Login
+                    </Link>
+                  </Button>
+                ))}
               {themeSwitcherEnabled && <ThemeSwitch />}
             </div>
             {site?.showPoweredBy !== false && (

package/src/lib/components/Zudoku.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from "next-themes";
 import {
   memo,
   type PropsWithChildren,
+  use,
   useEffect,
   useMemo,
   useState,
@@ -17,6 +18,7 @@ import {
 } from "../core/ZudokuContext.js";
 import { TopLevelError } from "../errors/TopLevelError.js";
 import { MdxComponents } from "../util/MdxComponents.js";
+import { RenderContext } from "./context/RenderContext.js";
 import { RouterEventsEmitter } from "./context/RouterEventsEmitter.js";
 import { SlotProvider } from "./context/SlotProvider.js";
 import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
@@ -61,7 +63,18 @@ const ZudokuInner = memo(
       setDidNavigate(true);
     }, [didNavigate, navigation.location]);
 
-    zudokuContext ??= new ZudokuContext(props, queryClient, env);
+    const renderContext = use(RenderContext);
+    if (typeof window === "undefined") {
+      // Fresh context per SSR request to avoid leaking
+      zudokuContext = new ZudokuContext(
+        props,
+        queryClient,
+        env,
+        renderContext.ssrAuth,
+      );
+    } else {
+      zudokuContext ??= new ZudokuContext(props, queryClient, env);
+    }
 
     return (
       <>

package/src/lib/components/context/RenderContext.ts

@@ -1,8 +1,16 @@
 import { createContext } from "react";
+import type { UserProfile } from "../../authentication/state.js";
+
+export type SSRAuthState = {
+  accessToken?: string;
+  // `null` means the user is logged out; undefined means auth isn't configured.
+  profile: UserProfile | null;
+};
 
 export type RenderContextValue = {
   status: number;
   bypassProtection: boolean;
+  ssrAuth?: SSRAuthState;
 };
 
 export const RenderContext = createContext<RenderContextValue>({