zudoku 0.78.0 → 0.78.2

package/src/lib/authentication/authentication.ts

@@ -1,8 +1,12 @@
 import type { NavigateFunction } from "react-router";
 import type { ZudokuContext } from "../core/ZudokuContext.js";
+import type { UserProfile } from "./state.js";
 
 export type AuthActionContext = { navigate: NavigateFunction };
 export type AuthActionOptions = { redirectTo?: string; replace?: boolean };
+export type VerifyAccessTokenResult =
+  | { profile: UserProfile; expiresAt?: number; refreshExpiresAt?: number }
+  | undefined;
 
 export interface AuthenticationPlugin {
   // Hides Register UI; real enforcement still belongs at the IdP.
@@ -44,6 +48,17 @@ export interface AuthenticationPlugin {
    * @deprecated use the navigate function from the AuthActionContext instead
    */
   setNavigate?(navigate: NavigateFunction): void;
+
+  /**
+   * Server-side verification of a client-submitted access token, called by
+   * the session-handler before setting the SSR auth cookies. Implementations
+   * MUST validate against the IdP (signature, issuer, audience, expiry) and
+   * return the verified profile. Return undefined for a rejected token
+   * (→ 401); throw for misconfig / upstream failure (→ 502). `expiresAt` /
+   * `refreshExpiresAt` are unix seconds used to bound cookie lifetimes so
+   * SSR can't outlive a revoked token. Omit to opt out of SSR auth (→ 501).
+   */
+  verifyAccessToken?(token: string): Promise<VerifyAccessTokenResult>;
 }
 
 export type AuthenticationProviderInitializer<TConfig> = (

package/src/lib/authentication/cookie-sync.ts

@@ -0,0 +1,90 @@
+import type { StoreApi } from "zustand";
+import type { AuthState } from "./state.js";
+
+type TokenBearer = { accessToken?: string; refreshToken?: string };
+
+const readTokens = (providerData: unknown): TokenBearer => {
+  if (!providerData || typeof providerData !== "object") return {};
+  const data = providerData as Record<string, unknown>;
+  return {
+    accessToken:
+      typeof data.accessToken === "string" ? data.accessToken : undefined,
+    refreshToken:
+      typeof data.refreshToken === "string" ? data.refreshToken : undefined,
+  };
+};
+
+// Mirror client auth state to SSR cookies so the next HTML render is authed
+// on first paint. Reads tokens off providerData. No-op on the server.
+export const setupCookieSync = (
+  store: StoreApi<
+    Pick<AuthState, "isAuthenticated" | "profile" | "providerData">
+  >,
+  sessionEndpoint: string,
+) => {
+  if (typeof window === "undefined") return;
+
+  // In-flight controller so a later auth event can abort an earlier request.
+  // Without this, a logout can race a slow login and the late POST would
+  // re-establish the session after the user explicitly signed out.
+  let inflight: AbortController | undefined;
+
+  const send = (init: RequestInit) => {
+    inflight?.abort();
+    inflight = new AbortController();
+    return fetch(sessionEndpoint, { ...init, signal: inflight.signal });
+  };
+
+  const postSession = async (providerData: unknown) => {
+    const { accessToken, refreshToken } = readTokens(providerData);
+    if (!accessToken) return;
+
+    try {
+      const r = await send({
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ accessToken, refreshToken }),
+      });
+      // 501 = provider opted out of SSR auth; any other failure is surfaced.
+      if (!r.ok && r.status !== 501) {
+        // biome-ignore lint/suspicious/noConsole: Surface SSR auth failures
+        console.error("SSR auth cookie sync failed:", r.status);
+      }
+    } catch (e) {
+      if ((e as Error)?.name === "AbortError") return;
+      // biome-ignore lint/suspicious/noConsole: Surface SSR auth failures
+      console.error("SSR auth cookie sync error:", e);
+    }
+  };
+
+  const clearSession = async () => {
+    try {
+      await send({ method: "DELETE" });
+    } catch (e) {
+      if ((e as Error)?.name === "AbortError") return;
+      // biome-ignore lint/suspicious/noConsole: Surface SSR auth failures
+      console.error("SSR auth cookie clear failed:", e);
+    }
+  };
+
+  store.subscribe((next, prev) => {
+    if (next.isAuthenticated && next.profile) {
+      if (!prev.isAuthenticated || next.providerData !== prev.providerData) {
+        void postSession(next.providerData);
+      }
+    } else if (!next.isAuthenticated && prev.isAuthenticated) {
+      void clearSession();
+    }
+  });
+
+  // If persist rehydrated an authed session that SSR didn't see, push tokens
+  // up so the next navigation is server-authed.
+  const state = store.getState();
+  if (
+    state.isAuthenticated &&
+    state.profile &&
+    !window.ZUDOKU_SSR_AUTH?.profile
+  ) {
+    void postSession(state.providerData);
+  }
+};

package/src/lib/authentication/cookies.ts

@@ -0,0 +1,54 @@
+import type { UserProfile } from "./state.js";
+
+export const ACCESS_TOKEN_COOKIE = "zudoku-access-token";
+export const REFRESH_TOKEN_COOKIE = "zudoku-refresh-token";
+export const AUTH_PROFILE_COOKIE = "zudoku-auth-profile";
+
+export type AuthCookies = {
+  accessToken: string | undefined;
+  refreshToken: string | undefined;
+  profile: UserProfile | undefined;
+};
+
+const safeDecode = (value: string): string | undefined => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return undefined;
+  }
+};
+
+export const parseCookies = (request: Request): AuthCookies => {
+  const header = request.headers.get("Cookie") ?? "";
+
+  if (!header) {
+    return {
+      accessToken: undefined,
+      refreshToken: undefined,
+      profile: undefined,
+    };
+  }
+
+  const cookies: Record<string, string> = {};
+  for (const part of header.split(";")) {
+    const [key, ...rest] = part.trim().split("=");
+    if (!key) continue;
+    const decoded = safeDecode(rest.join("="));
+    if (decoded !== undefined) cookies[key] = decoded;
+  }
+
+  let profile: UserProfile | undefined;
+  try {
+    if (cookies[AUTH_PROFILE_COOKIE]) {
+      profile = JSON.parse(cookies[AUTH_PROFILE_COOKIE]);
+    }
+  } catch {
+    // ignore malformed cookie
+  }
+
+  return {
+    accessToken: cookies[ACCESS_TOKEN_COOKIE] || undefined,
+    refreshToken: cookies[REFRESH_TOKEN_COOKIE] || undefined,
+    profile,
+  };
+};

package/src/lib/authentication/hook.ts

@@ -1,5 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
+import { use } from "react";
 import { useNavigate } from "react-router";
+import { RenderContext } from "../components/context/RenderContext.js";
 import { useZudoku } from "../components/context/ZudokuContext.js";
 import type { AuthActionOptions } from "./authentication.js";
 import { useAuthState } from "./state.js";
@@ -74,10 +76,21 @@ export const useAuth = () => {
 
   useRefreshUserProfile();
 
+  // On the server, the zustand store can't read window.ZUDOKU_SSR_AUTH, so
+  // override from RenderContext which carries the per-request auth state.
+  const { ssrAuth } = use(RenderContext);
+  const isSSR = typeof window === "undefined";
+
   return {
     isAuthEnabled,
     disableSignUp: authentication?.disableSignUp ?? false,
     ...authState,
+    ...(isSSR &&
+      ssrAuth && {
+        isAuthenticated: !!ssrAuth.profile,
+        isPending: false,
+        profile: ssrAuth.profile,
+      }),
 
     login: async (options?: AuthActionOptions) => {
       if (!isAuthEnabled) {

package/src/lib/authentication/providers/azureb2c.tsx

@@ -8,6 +8,7 @@ import type {
   AuthActionContext,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
+  VerifyAccessTokenResult,
 } from "../authentication.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
@@ -43,6 +44,10 @@ export class AzureB2CAuthPlugin
   private readonly redirectToAfterSignOut: string;
   private readonly signUpConfig?: AzureB2CAuthenticationConfig["signUp"];
   public readonly disableSignUp: boolean;
+  private readonly authority: string;
+  // The issuer carries the tenant GUID we don't know up-front, so discover.
+  private discoveryPromise?: Promise<{ issuer: string; jwks_uri: string }>;
+  private jwks?: ReturnType<typeof import("jose").createRemoteJWKSet>;
 
   constructor({
     clientId,
@@ -64,13 +69,13 @@ export class AzureB2CAuthPlugin
     this.signUpConfig = signUp;
     this.disableSignUp = disableSignUp ?? false;
 
-    const authority = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${policyName}`;
+    this.authority = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${policyName}`;
     const redirectUri = joinUrl(basePath, AZUREB2C_CALLBACK_PATH);
 
     this.msalInstance = new PublicClientApplication({
       auth: {
         clientId,
-        authority,
+        authority: this.authority,
         redirectUri,
         knownAuthorities: [`${tenantName}.b2clogin.com`],
       },
@@ -192,6 +197,69 @@ export class AzureB2CAuthPlugin
     return request;
   };
 
+  private async getDiscovery() {
+    this.discoveryPromise ??= fetch(
+      `${this.authority}/v2.0/.well-known/openid-configuration`,
+    ).then(async (response) => {
+      if (!response.ok) {
+        throw new Error(
+          `Azure B2C discovery failed: ${response.status} ${response.statusText}`,
+        );
+      }
+      return (await response.json()) as { issuer: string; jwks_uri: string };
+    });
+    return this.discoveryPromise;
+  }
+
+  async verifyAccessToken(token: string): Promise<VerifyAccessTokenResult> {
+    const jose = await import("jose");
+    const { issuer, jwks_uri } = await this.getDiscovery();
+    if (!this.jwks) {
+      this.jwks = jose.createRemoteJWKSet(new URL(jwks_uri));
+    }
+    try {
+      const { payload } = await jose.jwtVerify(token, this.jwks, { issuer });
+      // Match client-side sub (handleAuthResponse uses account.localAccountId, which is oid).
+      const sub =
+        typeof payload.oid === "string"
+          ? payload.oid
+          : typeof payload.sub === "string"
+            ? payload.sub
+            : undefined;
+      if (!sub) return undefined;
+
+      const emails = Array.isArray(payload.emails) ? payload.emails : [];
+      const email =
+        typeof payload.email === "string"
+          ? payload.email
+          : typeof emails[0] === "string"
+            ? emails[0]
+            : undefined;
+
+      const fullName = [payload.given_name, payload.family_name]
+        .filter((s): s is string => typeof s === "string" && s.length > 0)
+        .join(" ");
+      const name =
+        typeof payload.name === "string" ? payload.name : fullName || undefined;
+
+      return {
+        profile: {
+          sub,
+          email,
+          name,
+          emailVerified: true,
+          pictureUrl: undefined,
+        },
+        expiresAt: typeof payload.exp === "number" ? payload.exp : undefined,
+      };
+    } catch (e) {
+      // JOSEError = invalid token (→ 401). Rethrow anything else so the
+      // handler can surface 502 for misconfig / JWKS fetch failures.
+      if (e instanceof jose.errors.JOSEError) return undefined;
+      throw e;
+    }
+  }
+
   signOut = async (_: AuthActionContext) => {
     const account = this.msalInstance.getAllAccounts()[0];
     if (account) {

package/src/lib/authentication/providers/clerk.tsx

@@ -4,6 +4,7 @@ import type {
   AuthActionContext,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
+  VerifyAccessTokenResult,
 } from "../authentication.js";
 import { SignIn } from "../components/SignIn.js";
 import { SignOut } from "../components/SignOut.js";
@@ -46,6 +47,7 @@ type Clerk = {
 export type ClerkProviderData = {
   type: "clerk";
   user: ClerkUser | undefined;
+  accessToken?: string;
 };
 
 declare module "../state.js" {
@@ -103,6 +105,13 @@ const clerkAuth: AuthenticationProviderInitializer<
     return loadClerk(clerkPubKey);
   };
 
+  let cachedIssuer: string | undefined;
+  const getIssuer = () => {
+    cachedIssuer ??= `https://${getClerkFrontendApi(clerkPubKey)}`;
+    return cachedIssuer;
+  };
+  let jwks: ReturnType<typeof import("jose").createRemoteJWKSet> | undefined;
+
   async function getAccessToken() {
     const clerk = await getClerk();
 
@@ -156,6 +165,8 @@ const clerkAuth: AuthenticationProviderInitializer<
       return false;
     }
 
+    const accessToken = await getAccessToken().catch(() => undefined);
+
     useAuthState.setState({
       isAuthenticated: true,
       isPending: false,
@@ -163,6 +174,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       providerData: {
         type: "clerk",
         user: clerk.session?.user,
+        accessToken,
       },
     });
 
@@ -175,6 +187,39 @@ const clerkAuth: AuthenticationProviderInitializer<
     return request;
   }
 
+  async function verifyAccessToken(
+    token: string,
+  ): Promise<VerifyAccessTokenResult> {
+    const jose = await import("jose");
+    const issuer = getIssuer();
+    if (!jwks) {
+      jwks = jose.createRemoteJWKSet(
+        new URL(`${issuer}/.well-known/jwks.json`),
+      );
+    }
+    try {
+      const { payload } = await jose.jwtVerify(token, jwks, { issuer });
+      if (!payload.sub) return undefined;
+      return {
+        profile: {
+          sub: String(payload.sub),
+          email: (payload.email ?? payload.email_address) as string | undefined,
+          name: payload.name as string | undefined,
+          emailVerified: Boolean(payload.email_verified),
+          pictureUrl: (payload.picture ?? payload.image_url) as
+            | string
+            | undefined,
+        },
+        expiresAt: typeof payload.exp === "number" ? payload.exp : undefined,
+      };
+    } catch (e) {
+      // JOSEError = invalid token (→ 401). Rethrow anything else so the
+      // handler can surface 502 for misconfig / JWKS fetch failures.
+      if (e instanceof jose.errors.JOSEError) return undefined;
+      throw e;
+    }
+  }
+
   return {
     disableSignUp: disableSignUp ?? false,
     getRoutes: () => [
@@ -204,11 +249,14 @@ const clerkAuth: AuthenticationProviderInitializer<
           return;
         }
 
+        const accessToken = await getAccessToken().catch(() => undefined);
+
         useAuthState.getState().setLoggedIn({
           profile,
           providerData: {
             type: "clerk",
             user: clerk.session.user,
+            accessToken,
           },
         });
       } else {
@@ -217,6 +265,7 @@ const clerkAuth: AuthenticationProviderInitializer<
     },
     getAccessToken,
     signRequest,
+    verifyAccessToken,
     signOut: async () => {
       const clerk = await getClerk();
       useAuthState.getState().setLoggedOut();

package/src/lib/authentication/providers/openid.tsx

@@ -9,6 +9,7 @@ import type {
   AuthActionOptions,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
+  VerifyAccessTokenResult,
 } from "../authentication.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
@@ -21,6 +22,16 @@ import { redirectToSignUpUrl } from "./util.js";
 const CODE_VERIFIER_KEY = "code-verifier";
 const STATE_KEY = "oauth-state";
 
+const decodeJwtExp = async (token: string): Promise<number | undefined> => {
+  try {
+    const { decodeJwt } = await import("jose");
+    const payload = decodeJwt(token);
+    return typeof payload.exp === "number" ? payload.exp : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
 export interface OpenIdProviderData {
   // just for easy migration we also allow for undefined type. can be removed in the future.
   type: "openid" | undefined;
@@ -239,7 +250,42 @@ export class OpenIDAuthenticationProvider
     };
   }
 
+  public async verifyAccessToken(
+    token: string,
+  ): Promise<VerifyAccessTokenResult> {
+    const authServer = await this.getAuthServer();
+    const response = await oauth.userInfoRequest(
+      authServer,
+      this.client,
+      token,
+    );
+    if (!response.ok) return undefined;
+    const userInfo = (await response.json()) as Record<string, unknown>;
+    if (!userInfo.sub) return undefined;
+
+    // userInfoRequest authenticated the token upstream; parsing `exp` here
+    // lets us bound the cookie lifetime to the token's. Opaque tokens just
+    // yield undefined and fall back to the handler's default.
+    const expiresAt = await decodeJwtExp(token);
+
+    return {
+      profile: {
+        sub: String(userInfo.sub),
+        email: userInfo.email as string | undefined,
+        name: userInfo.name as string | undefined,
+        emailVerified: Boolean(userInfo.email_verified),
+        pictureUrl: userInfo.picture as string | undefined,
+      },
+      expiresAt,
+    };
+  }
+
   public async refreshUserProfile(): Promise<boolean> {
+    // SSR mode doesn't persist `providerData`; tokens live only in the
+    // httpOnly cookie. Without client-side tokens we can't call userInfo —
+    // the SSR-supplied profile stays authoritative.
+    if (!useAuthState.getState().providerData) return false;
+
     const accessToken = await this.getAccessToken();
     const authServer = await this.getAuthServer();
 

package/src/lib/authentication/providers/supabase.tsx

@@ -12,6 +12,7 @@ import type {
   AuthActionOptions,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
+  VerifyAccessTokenResult,
 } from "../authentication.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { SignOut } from "../components/SignOut.js";
@@ -30,6 +31,8 @@ import { redirectToSignUpUrl } from "./util.js";
 export type SupabaseProviderData = {
   type: "supabase";
   session: Session;
+  accessToken: string;
+  refreshToken?: string;
 };
 
 declare module "../state.js" {
@@ -92,7 +95,12 @@ class SupabaseAuthenticationProvider
 
     useAuthState.getState().setLoggedIn({
       profile,
-      providerData: { type: "supabase", session },
+      providerData: {
+        type: "supabase",
+        session,
+        accessToken: session.access_token,
+        refreshToken: session.refresh_token,
+      },
     });
   }
 
@@ -106,6 +114,21 @@ class SupabaseAuthenticationProvider
     return data.session.access_token;
   }
 
+  async verifyAccessToken(token: string): Promise<VerifyAccessTokenResult> {
+    const { data, error } = await this.client.auth.getUser(token);
+    if (error || !data.user) return undefined;
+    const user = data.user;
+    return {
+      profile: {
+        sub: user.id,
+        email: user.email,
+        name: user.user_metadata.full_name || user.user_metadata.name,
+        emailVerified: user.email_confirmed_at != null,
+        pictureUrl: user.user_metadata.avatar_url,
+      },
+    };
+  }
+
   async signRequest(request: Request): Promise<Request> {
     const accessToken = await this.getAccessToken();
     request.headers.set("Authorization", `Bearer ${accessToken}`);
@@ -214,7 +237,12 @@ class SupabaseAuthenticationProvider
 
       useAuthState.getState().setLoggedIn({
         profile,
-        providerData: { type: "supabase", session: data.session },
+        providerData: {
+          type: "supabase",
+          session: data.session,
+          accessToken: data.session.access_token,
+          refreshToken: data.session.refresh_token,
+        },
       });
     }
   };