The drop-in component

What it is

<unifyid-continue> is a custom element published as @vn.unifyid/connect. It renders the Continue with UnifyID control and launches the flow.

It is a launcher, never a consent surface. Consent always renders on a UnifyID-owned page. There are zero iframes: the element opens a popup, falls back to a redirect when the popup is blocked, and deliberately uses redirect on mobile and narrow screens.

The postMessage traffic between the popup and your page carries completion and state only — never tokens. A browser message on its own never authorizes anything.

Loading it, pinned

Assets are SRI-pinned and immutable per version. Load the script with its integrity hash on both the initiating page and the registered callback page, before anything uses window.UnifyID. The script contains no client secret.

<script src="https://developers.staging.unifyid.io/sdk/unifyid-connect/v1.5.2/unifyid-connect.js"
  integrity="sha384-R9C2QH49DGZzSpAWlx7+OlGJPFDqWRFcV6b8F2IN8upEhSWwicvh2lsagcWRYe10"
  crossorigin="anonymous" defer></script>

<unifyid-continue
  start-url="/api/auth/unifyid/start"
  scopes="openid profile email"
  mode="popup"></unifyid-continue>

Allow the pinned asset origin in your CSP and preserve cross-origin CORS headers on the asset, or SRI will refuse it. Use same-origin-allow-popups on the initiating page's opener policy and do not sever the callback's opener.

The two routes you must provide

The component is not a drop-in *integration*. It is a drop-in *button*. The code exchange uses your client secret, so it happens on your server, in routes you write.

await window.UnifyID.completeServerBoundCallback({
  completionUrl: "/api/auth/unifyid/complete",
});

// Verify your own session endpoint before showing anything protected,
// then navigate to a fixed destination. This also finishes the redirect
// fallback, where there is no opener at all.
await fetch("/api/session");

const button = document.querySelector("unifyid-continue");

button.addEventListener("unifyid:success", async () => {
  // A browser event is not authorization. Ask your own server.
  const session = await fetch("/api/session").then((r) => r.json());
  if (session.signedIn) location.assign("/app");
});

button.addEventListener("unifyid:cancel", () => showRetry());
button.addEventListener("unifyid:error", (event) => showError(event.detail));

A runnable reference lives at examples/hosted-server-bound/ in the developer portal repository. Its in-memory persistence is local-only and must be replaced before you deploy.