navigator.clipboard.writeText is the modern, async, permission-aware path. It only works in secure contexts (HTTPS or localhost) and inside a user gesture (click, keypress), so the call must run from an event handler, not a side effect on mount. The promise rejects with a NotAllowedError if either condition fails, which gives you a clear branch for falling back. Always wrap calls in try/catch: a thrown error here usually means the user denied the prompt or the page is in an iframe without clipboard-write permission.

Older browsers (and some embedded webviews) lack the async clipboard API, but they support document.execCommand('copy') against a selected DOM node. The technique is to inject an off-screen <textarea>, fill it, select it, and trigger the copy command. Setting position: fixed keeps the page from scrolling, and opacity: 0 keeps it invisible. Wrap the whole thing in try/catch because execCommand may throw inside iframes without the clipboard-write allow attribute, or in environments without a real DOM. execCommand is deprecated but still the only fallback that works in older Safari and some legacy webviews.

Wrapping the modern path and the legacy fallback in one async function gives the UI layer a single API that always returns a boolean and never throws into the caller. The success and error callbacks are the right hook for showing a toast, animating a button, or firing analytics, so they belong in the helper rather than at every call site. Checking window.isSecureContext first avoids prompting the user in non-HTTPS dev environments where the API will deny anyway. Once installed, this is the only copy helper most apps need.