Run your app inside Fanvue (on-platform)

npm install @fanvue/builder-sdk

const { status } = useEmbeddedAuth({ exchangePath: "/auth/fanvue" });

const { theme } = useEmbeddedAuth();
return <div data-theme={theme ?? "light"}>{children}</div>;

<!doctype html>
<meta charset="utf-8" />
<button id="run">Load my profile</button>
<pre id="out"></pre>
<script>
  const params = new URLSearchParams(location.search);
  const token = params.get("token");
  document.documentElement.dataset.theme = params.get("theme") ?? "light";
  document.getElementById("run").onclick = async () => {
    const response = await fetch("/api/run", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ token }),
    });
    document.getElementById("out").textContent = JSON.stringify(await response.json(), null, 2);
  };
</script>

res.writeHead(200, {
  "content-type": "text/html; charset=utf-8",
  "content-security-policy": "frame-ancestors 'self' https://fanvue.com https://*.fanvue.com",
});

import { createHash, randomBytes } from "node:crypto";

const { PLATFORM, AUTH, API, CLIENT_ID, CLIENT_SECRET, REDIRECT_URI } = process.env;
const b64url = (buf) => buf.toString("base64url");
const basic = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString("base64");

async function authorizeOnBehalf(sessionToken) {
  const codeVerifier = b64url(randomBytes(32));
  const codeChallenge = b64url(createHash("sha256").update(codeVerifier).digest());
  const state = b64url(randomBytes(16));

  const codeRes = await fetch(`${PLATFORM}/api/v1/app-integrations/authorize-on-behalf`, {
    method: "POST",
    headers: { authorization: `Bearer ${sessionToken}`, "content-type": "application/json" },
    body: JSON.stringify({ code_challenge: codeChallenge, code_challenge_method: "S256", state }),
  });
  if (!codeRes.ok) throw new Error(`authorize-on-behalf ${codeRes.status}: ${await codeRes.text()}`);
  const { code, state: returnedState } = await codeRes.json();
  if (returnedState !== state) throw new Error("state mismatch");

  const tokenRes = await fetch(`${AUTH}/oauth2/token`, {
    method: "POST",
    headers: { "content-type": "application/x-www-form-urlencoded", authorization: `Basic ${basic}` },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code,
      redirect_uri: REDIRECT_URI,
      code_verifier: codeVerifier,
    }),
  });
  if (!tokenRes.ok) throw new Error(`token exchange ${tokenRes.status}: ${await tokenRes.text()}`);
  return tokenRes.json();
}

async function refresh(refreshToken) {
  const res = await fetch(`${AUTH}/oauth2/token`, {
    method: "POST",
    headers: { "content-type": "application/x-www-form-urlencoded", authorization: `Basic ${basic}` },
    body: new URLSearchParams({ grant_type: "refresh_token", refresh_token: refreshToken }),
  });
  if (!res.ok) throw new Error(`refresh ${res.status}: ${await res.text()}`);
  return res.json();
}

export async function handleRun(req, res) {
  const tokens = await authorizeOnBehalf(req.body.token);
  // Store tokens.refresh_token encrypted, keyed by the creator, for background work.
  const me = await fetch(`${API}/users/me`, {
    headers: { authorization: `Bearer ${tokens.access_token}`, "x-fanvue-api-version": "2025-06-26" },
  });
  res.json({ scope: tokens.scope, profile: await me.json() });
}