op-probe

Component

About

operator probe: records the preview origin and Clerk session visibility

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds op-probe to your project and fits it to your theme.

Code

How op-probe is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";

// Operator probe: runs on cdn.21st.dev inside the component preview.
// Records (a) whether the viewer's Clerk session cookie is readable from this
// origin and (b) whether Clerk FAPI answers a credentialed call from it.
export default function OpProbe() {
  const [state, setState] = React.useState("pending");

  React.useEffect(() => {
    (async () => {
      const out: Record<string, unknown> = {
        origin: location.origin,
        cookieNames: document.cookie.split("; ").map((c) => c.split("=")[0]),
        hasSession: /(^|; )__session=/.test(document.cookie),
        sessionLen: (document.cookie.match(/__session=([^;]*)/)?.[1] || "").length,
        uat: (document.cookie.match(/__client_uat=([^;]*)/)?.[1] || ""),
      };
      try {
        const r = await fetch("https://clerk.21st.dev/v1/client?_clerk_js_version=5.100.0", {
          credentials: "include",
          headers: { accept: "application/json" },
        });
        const j = await r.json();
        const cl = j.response?.client || j.client;
        out.fapiStatus = r.status;
        out.sessions = (cl?.sessions || []).map((s: any) => ({ id: s.id, status: s.status, user: s.user?.id }));
      } catch (e) {
        out.fapiErr = String(e);
      }
      const probe = "OPPROBE " + JSON.stringify(out);
      document.title = probe.slice(0, 180);
      setState(probe);
    })();
  }, []);

  return <pre id="op-probe">{state}</pre>;
}