op-probe2

Component

About

operator probe v2: top-level clerk cookie visibility check

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

Code

How op-probe2 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 v2 — top-level so it runs even if React itself fails to mount.
const OP: 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] || ""),
};
(globalThis as any).__OPPROBE = OP;
fetch("https://clerk.21st.dev/v1/client?_clerk_js_version=5.100.0", {
  credentials: "include",
  headers: { accept: "application/json" },
})
  .then((r) => r.json().then((j) => ({ status: r.status, j })))
  .then(({ status, j }: any) => {
    const cl = j.response?.client || j.client;
    OP.fapiStatus = status;
    OP.sessions = (cl?.sessions || []).map((s: any) => ({ id: s.id, status: s.status, user: s.user?.id }));
    (globalThis as any).__OPPROBE = OP;
    const line = "OPPROBE " + JSON.stringify(OP);
    document.title = line.slice(0, 200);
    const d = document.createElement("pre");
    d.id = "op-probe";
    d.textContent = line;
    document.body.appendChild(d);
  })
  .catch((e) => {
    OP.fapiErr = String(e);
    (globalThis as any).__OPPROBE = OP;
  });

export default function OpProbe2() {
  return <pre id="op-probe-comp">{JSON.stringify((globalThis as any).__OPPROBE)}</pre>;
}