How do I fix NotAllowedError when copying to clipboard in my web app?

[OliviaT]

I'm trying to implement a simple feature where a user can click a button to copy some text to their clipboard, but I keep getting a `NotAllowedError` about permissions. I thought the Clipboard API was straightforward, but my code only works sometimes, usually after a direct user interaction I've already handled.

[Donald.T]

Yeah I hit NotAllowedError too when I tried to copy after page load It turns out the clipboard write needs a real user gesture If you call writeText from a click handler but then do something async after the actual copy can run outside the gesture and the browser blocks it I moved the writeText directly inside the click callback and avoided any setTimeout or await before the write It helped in chrome on secure origin Still flaky on Safari sometimes

[Jonathan61]

Security context mattered for me too if the page is not served over https some browsers will block clipboard writes

[Madison_W]

One time I blamed the code and spent hours chasing a promise bug only to notice an extension in the dev environment blocked the clipboard I turned off the extension and the copy started working again and the logs looked calmer It was annoying because the app behaved fine for me on the main site

[EmmaR]

Did you confirm the copy call runs inside a real click event and not after an await or a timeout?