@fanvue/builder-sdk 0.3.0

package/dist/react/index.js

@@ -0,0 +1,192 @@
+"use client";
+import { T as HEADER_UPDATED_SESSION, i as getThemeFromUrl, r as getSessionTokenFromUrl, w as BEARER_PREFIX } from "../core-CvVOMyqr.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/auth-context.tsx
+const STORAGE_KEY = "fanvue:jwt";
+/**
+* Retrieve the JWT from session storage, or `null` if unavailable.
+*
+* Exported for sibling hooks that need a synchronous storage check inside
+* effects (which can run before this provider's mount effect has loaded the
+* stored JWT into state). Not part of the public package API.
+*/
+function getStoredJwt() {
+	try {
+		return sessionStorage.getItem(STORAGE_KEY);
+	} catch {
+		return null;
+	}
+}
+/** Persist the JWT into session storage. */
+function setStoredJwt(jwt) {
+	try {
+		sessionStorage.setItem(STORAGE_KEY, jwt);
+	} catch {}
+}
+/** Remove the JWT from session storage. */
+function removeStoredJwt() {
+	try {
+		sessionStorage.removeItem(STORAGE_KEY);
+	} catch {}
+}
+const AuthContext = createContext(null);
+/**
+* Provides authentication state to the React component tree.
+*
+* Wrap your application (or the authenticated section) with this provider
+* so that descendant components can access auth helpers via {@link useAuth}.
+*/
+function AuthProvider(props) {
+	const { children } = props;
+	const [jwt, setJwtState] = useState(null);
+	useEffect(() => {
+		const stored = getStoredJwt();
+		if (stored !== null) setJwtState(stored);
+	}, []);
+	const setJwt = useCallback((token) => {
+		setStoredJwt(token);
+		setJwtState(token);
+	}, []);
+	const clearJwt = useCallback(() => {
+		removeStoredJwt();
+		setJwtState(null);
+	}, []);
+	const authFetch = useCallback(async (input, init) => {
+		const currentJwt = getStoredJwt();
+		const headers = new Headers(init?.headers);
+		if (currentJwt) headers.set("Authorization", `${BEARER_PREFIX}${currentJwt}`);
+		const response = await fetch(input, {
+			...init,
+			headers
+		});
+		const updatedToken = response.headers.get(HEADER_UPDATED_SESSION);
+		if (updatedToken) {
+			setStoredJwt(updatedToken);
+			setJwtState(updatedToken);
+		}
+		return response;
+	}, []);
+	const value = useMemo(() => ({
+		jwt,
+		isAuthenticated: jwt != null,
+		setJwt,
+		clearJwt,
+		authFetch
+	}), [
+		jwt,
+		setJwt,
+		clearJwt,
+		authFetch
+	]);
+	return /* @__PURE__ */ jsx(AuthContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Access the current authentication context.
+*
+* Must be called from a component that is a descendant of {@link AuthProvider}.
+*
+* @throws {Error} If called outside of an `AuthProvider`.
+*/
+function useAuth() {
+	const ctx = useContext(AuthContext);
+	if (!ctx) throw new Error("useAuth must be used within an <AuthProvider>");
+	return ctx;
+}
+//#endregion
+//#region src/react/use-embedded-auth.ts
+const DEFAULT_EXCHANGE_PATH = "/api/fanvue/session";
+/**
+* Completes embedded authentication when the app is opened inside Fanvue.
+*
+* On mount, reads the short-lived session token that Fanvue appends to the
+* iframe URL (`?token=`), exchanges it with your backend session route
+* (created by `createSessionExchangeHandler`), and stores the returned
+* session JWT in the auth context — after which `authFetch` automatically
+* authenticates your API calls.
+*
+* Must be used inside an `AuthProvider`.
+*
+* @param opts - Optional overrides (e.g. a custom `exchangePath`).
+* @returns The exchange {@link EmbeddedAuthStatus} and error code, if any.
+*
+* @example
+* function EmbeddedHome() {
+*   const { status, error, theme } = useEmbeddedAuth();
+*   if (status === 'exchanging') return <p>Connecting…</p>;
+*   if (status === 'error') return <p>Auth failed: {error}</p>;
+*   return <Dashboard theme={theme ?? 'light'} />;
+* }
+*/
+function useEmbeddedAuth(opts) {
+	const { isAuthenticated, setJwt } = useAuth();
+	const [status, setStatus] = useState(isAuthenticated ? "authenticated" : "idle");
+	const [error, setError] = useState(null);
+	const [theme, setTheme] = useState(null);
+	const startedRef = useRef(false);
+	const exchangePath = opts?.exchangePath ?? DEFAULT_EXCHANGE_PATH;
+	useEffect(() => {
+		if (startedRef.current) return;
+		startedRef.current = true;
+		setTheme(getThemeFromUrl(window.location.href));
+		if (isAuthenticated || getStoredJwt() !== null) {
+			setStatus("authenticated");
+			return;
+		}
+		const token = getSessionTokenFromUrl(window.location.href);
+		if (!token) {
+			setStatus("idle");
+			return;
+		}
+		setStatus("exchanging");
+		(async () => {
+			let response;
+			try {
+				response = await fetch(exchangePath, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ token })
+				});
+			} catch {
+				setError("network_error");
+				setStatus("error");
+				return;
+			}
+			let body;
+			try {
+				body = await response.json();
+			} catch {
+				body = null;
+			}
+			if (!response.ok) {
+				setError(body !== null && typeof body === "object" && "error" in body ? String(body.error) : "exchange_failed");
+				setStatus("error");
+				return;
+			}
+			const jwt = body !== null && typeof body === "object" && "jwt" in body ? body.jwt : null;
+			if (typeof jwt !== "string" || jwt.length === 0) {
+				setError("exchange_failed");
+				setStatus("error");
+				return;
+			}
+			setJwt(jwt);
+			setStatus("authenticated");
+		})();
+	}, [
+		exchangePath,
+		isAuthenticated,
+		setJwt
+	]);
+	return {
+		status,
+		error,
+		theme
+	};
+}
+//#endregion
+export { AuthProvider, useAuth, useEmbeddedAuth };
+
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/react/auth-context.tsx","../../src/react/use-embedded-auth.ts"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { BEARER_PREFIX, HEADER_UPDATED_SESSION } from '../core/index.js';\n\nconst STORAGE_KEY = 'fanvue:jwt';\n\n/**\n * Retrieve the JWT from session storage, or `null` if unavailable.\n *\n * Exported for sibling hooks that need a synchronous storage check inside\n * effects (which can run before this provider's mount effect has loaded the\n * stored JWT into state). Not part of the public package API.\n */\nexport function getStoredJwt(): string | null {\n  try {\n    return sessionStorage.getItem(STORAGE_KEY);\n  } catch {\n    return null;\n  }\n}\n\n/** Persist the JWT into session storage. */\nfunction setStoredJwt(jwt: string): void {\n  try {\n    sessionStorage.setItem(STORAGE_KEY, jwt);\n  } catch {\n    // sessionStorage may be unavailable (e.g. sandboxed iframe)\n  }\n}\n\n/** Remove the JWT from session storage. */\nfunction removeStoredJwt(): void {\n  try {\n    sessionStorage.removeItem(STORAGE_KEY);\n  } catch {\n    // sessionStorage may be unavailable\n  }\n}\n\n/**\n * The value exposed by {@link AuthProvider} via React context.\n *\n * Includes the current JWT, authentication status, and helpers for\n * managing credentials and making authenticated requests.\n */\nexport interface AuthContextValue {\n  jwt: string | null;\n  isAuthenticated: boolean;\n  setJwt: (jwt: string) => void;\n  clearJwt: () => void;\n  authFetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;\n}\n\nconst AuthContext = createContext<AuthContextValue | null>(null);\n\n/**\n * Provides authentication state to the React component tree.\n *\n * Wrap your application (or the authenticated section) with this provider\n * so that descendant components can access auth helpers via {@link useAuth}.\n */\nexport function AuthProvider(props: { children: ReactNode }): ReactNode {\n  const { children } = props;\n  // Start at null so the first client render matches the server-rendered HTML\n  // (the server can't see sessionStorage); load any stored JWT after mount.\n  // Reading storage in the useState initializer causes hydration mismatches\n  // (React error #418) whenever a JWT is already stored.\n  const [jwt, setJwtState] = useState<string | null>(null);\n\n  useEffect(() => {\n    const stored = getStoredJwt();\n    if (stored !== null) {\n      setJwtState(stored);\n    }\n  }, []);\n\n  const setJwt = useCallback((token: string): void => {\n    setStoredJwt(token);\n    setJwtState(token);\n  }, []);\n\n  const clearJwt = useCallback((): void => {\n    removeStoredJwt();\n    setJwtState(null);\n  }, []);\n\n  const authFetch = useCallback(\n    async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {\n      const currentJwt = getStoredJwt();\n      const headers = new Headers(init?.headers);\n      if (currentJwt) {\n        headers.set('Authorization', `${BEARER_PREFIX}${currentJwt}`);\n      }\n\n      const response = await fetch(input, { ...init, headers });\n\n      const updatedToken = response.headers.get(HEADER_UPDATED_SESSION);\n      if (updatedToken) {\n        setStoredJwt(updatedToken);\n        setJwtState(updatedToken);\n      }\n\n      return response;\n    },\n    [],\n  );\n\n  const value = useMemo<AuthContextValue>(\n    () => ({ jwt, isAuthenticated: jwt != null, setJwt, clearJwt, authFetch }),\n    [jwt, setJwt, clearJwt, authFetch],\n  );\n\n  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;\n}\n\n/**\n * Access the current authentication context.\n *\n * Must be called from a component that is a descendant of {@link AuthProvider}.\n *\n * @throws {Error} If called outside of an `AuthProvider`.\n */\nexport function useAuth(): AuthContextValue {\n  const ctx = useContext(AuthContext);\n  if (!ctx) {\n    throw new Error('useAuth must be used within an <AuthProvider>');\n  }\n  return ctx;\n}\n","'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { getSessionTokenFromUrl, getThemeFromUrl, type FanvueTheme } from '../core/index.js';\n\nimport { useAuth, getStoredJwt } from './auth-context.js';\n\nconst DEFAULT_EXCHANGE_PATH = '/api/fanvue/session';\n\n/**\n * The state of the embedded session exchange.\n *\n * - `idle` — no session token in the URL (the page was not opened from a\n *   Fanvue embedded surface) and no existing session.\n * - `exchanging` — the session token is being exchanged with the backend.\n * - `authenticated` — a session JWT is available; `authFetch` will attach it.\n * - `error` — the exchange failed; see `error` for the cause.\n */\nexport type EmbeddedAuthStatus = 'idle' | 'exchanging' | 'authenticated' | 'error';\n\n/**\n * Options for {@link useEmbeddedAuth}.\n *\n * @property exchangePath - The path of the session-exchange route created by\n *   `createSessionExchangeHandler`. Defaults to `/api/fanvue/session`.\n */\nexport interface UseEmbeddedAuthOptions {\n  exchangePath?: string;\n}\n\n/**\n * The value returned by {@link useEmbeddedAuth}.\n *\n * @property status - The current state of the embedded session exchange.\n * @property error - The error code when `status` is `error` (e.g.\n *   `consent_required`, `invalid_session_token`), otherwise `null`.\n * @property theme - The creator's active colour scheme (`'light'` or `'dark'`)\n *   read from the iframe URL, or `null` when absent (e.g. the app was opened\n *   outside Fanvue). Use it to theme-match Fanvue.\n */\nexport interface UseEmbeddedAuthResult {\n  status: EmbeddedAuthStatus;\n  error: string | null;\n  theme: FanvueTheme | null;\n}\n\n/**\n * Completes embedded authentication when the app is opened inside Fanvue.\n *\n * On mount, reads the short-lived session token that Fanvue appends to the\n * iframe URL (`?token=`), exchanges it with your backend session route\n * (created by `createSessionExchangeHandler`), and stores the returned\n * session JWT in the auth context — after which `authFetch` automatically\n * authenticates your API calls.\n *\n * Must be used inside an `AuthProvider`.\n *\n * @param opts - Optional overrides (e.g. a custom `exchangePath`).\n * @returns The exchange {@link EmbeddedAuthStatus} and error code, if any.\n *\n * @example\n * function EmbeddedHome() {\n *   const { status, error, theme } = useEmbeddedAuth();\n *   if (status === 'exchanging') return <p>Connecting…</p>;\n *   if (status === 'error') return <p>Auth failed: {error}</p>;\n *   return <Dashboard theme={theme ?? 'light'} />;\n * }\n */\nexport function useEmbeddedAuth(opts?: UseEmbeddedAuthOptions): UseEmbeddedAuthResult {\n  const { isAuthenticated, setJwt } = useAuth();\n  const [status, setStatus] = useState<EmbeddedAuthStatus>(\n    isAuthenticated ? 'authenticated' : 'idle',\n  );\n  const [error, setError] = useState<string | null>(null);\n  // Start at null so the first client render matches the server-rendered HTML\n  // (the server can't read window.location); read the theme after mount.\n  const [theme, setTheme] = useState<FanvueTheme | null>(null);\n  const startedRef = useRef(false);\n  const exchangePath = opts?.exchangePath ?? DEFAULT_EXCHANGE_PATH;\n\n  useEffect(() => {\n    // Guard against React Strict Mode double-invocation: the session token is\n    // single-use, so the exchange must only run once.\n    if (startedRef.current) return;\n    startedRef.current = true;\n\n    // The theme is read from the URL independently of the (single-use) token\n    // exchange, so capture it before any of the auth-status early returns.\n    setTheme(getThemeFromUrl(window.location.href));\n\n    // Check storage directly as well as context state: this effect runs\n    // before the provider's mount effect has loaded any stored JWT, and the\n    // session token in the URL is single-use — a re-exchange would fail.\n    if (isAuthenticated || getStoredJwt() !== null) {\n      setStatus('authenticated');\n      return;\n    }\n\n    const token = getSessionTokenFromUrl(window.location.href);\n    if (!token) {\n      setStatus('idle');\n      return;\n    }\n\n    setStatus('exchanging');\n\n    void (async (): Promise<void> => {\n      let response: Response;\n      try {\n        response = await fetch(exchangePath, {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ token }),\n        });\n      } catch {\n        setError('network_error');\n        setStatus('error');\n        return;\n      }\n\n      let body: unknown;\n      try {\n        body = await response.json();\n      } catch {\n        body = null;\n      }\n\n      if (!response.ok) {\n        const errorCode =\n          body !== null && typeof body === 'object' && 'error' in body\n            ? String((body as { error: unknown }).error)\n            : 'exchange_failed';\n        setError(errorCode);\n        setStatus('error');\n        return;\n      }\n\n      const jwt =\n        body !== null && typeof body === 'object' && 'jwt' in body\n          ? (body as { jwt: unknown }).jwt\n          : null;\n      if (typeof jwt !== 'string' || jwt.length === 0) {\n        setError('exchange_failed');\n        setStatus('error');\n        return;\n      }\n\n      setJwt(jwt);\n      setStatus('authenticated');\n    })();\n  }, [exchangePath, isAuthenticated, setJwt]);\n\n  return { status, error, theme };\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@fanvue/builder-sdk",
+  "version": "0.3.0",
+  "description": "OAuth authentication library for the Fanvue API",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fanvue/builder-sdk.git"
+  },
+  "homepage": "https://github.com/fanvue/builder-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/fanvue/builder-sdk/issues"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/core/index.js",
+      "types": "./dist/core/index.d.ts"
+    },
+    "./nextjs/off-platform": {
+      "import": "./dist/nextjs/off-platform/index.js",
+      "types": "./dist/nextjs/off-platform/index.d.ts"
+    },
+    "./nextjs/embedded-app": {
+      "import": "./dist/nextjs/embedded-app/index.js",
+      "types": "./dist/nextjs/embedded-app/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "check": "pnpm format && pnpm lint && pnpm typecheck && pnpm test:coverage",
+    "prepare": "(git config core.hooksPath .hooks || true) && pnpm run build"
+  },
+  "dependencies": {
+    "jose": "^6.0.11",
+    "neverthrow": "^8.2.0",
+    "oauth4webapi": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.4.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "eslint": "^10.0.3",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import-x": "^4.16.2",
+    "eslint-plugin-prettier": "^5.5.5",
+    "jsdom": "^28.1.0",
+    "next": "^15.0.0",
+    "prettier": "^3.8.1",
+    "react": "^19.0.0",
+    "tsdown": "^0.21.4",
+    "typescript": "^5.7.0",
+    "typescript-eslint": "^8.57.0",
+    "vitest": "^4.1.0"
+  },
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  }
+}