Copying Text Functionality Works Locally but Fails in Production: Need Assistance

Question

My code for copying text works perfectly in my local environment, but when I deploy it to production, the text copying functionality fails to operate as expected.

Here is the code I'm using:

const handleCopyClick = (copyableContent, unifiedKey) => {
  setCopiedLink(unifiedKey);

  new Promise((resolve, reject) => {
    navigator.clipboard.writeText(copyableContent)
      .then(() => {
        resolve();
      })
      .catch((error) => {
        reject(error);
      });
  })
  .then(() => {
    setTimeout(() => {
      setCopiedLink(null);
    }, 2000);
  })
  .catch((error) => {
    setCopiedLink(null);
    toastrOnTopCenter("An issue occurred while copying. Please try again.", "error");
  });
};

Despite using a promise-based approach, I'm still encountering issue in successfully copying the text.

Answer 1

Navigator API works only for secured websites. It means it should be HTTPS or should have SSL certificate. If the project is in local system, it will work perfectly in localhost: but won't work if you host it and it is http. So make sure the production is secured.