React useEffect hook causes DOMException: User activation is required to request permissions

Question

I have a React useEffect hook that will read local files previously approved by the user.

To read the files, it uses the [FileSystemHandle.queryPermission()][1] method, which if not granted will prompt the user for access using the FileSystemHandle.requestPermission() method.

The problem is that this happens before the user has a chance to interact with the page, which causes the DOMException: User activation is required to request permissions. error.

Is there any way around this?

score 3 · Answer 1 · answered Apr 03 '21 at 21:22

This is due to the requirement for user activation defined by Google and now incorporated into the HTML spec.

The way to work around this is to remove this action from executing as part of the useEffect hook and instead prompt the user to perform the action first.

In my case the UI will show an indicator that the content needs to be updated, with a small button to trigger the action. This qualifies as user activation and the process runs without the error.

let file, perms

perms = await fileHandle.queryPermission()

if (perms === 'granted') file = await fileHandle.getFile()
else if (perms === 'prompt') {
  setButtonForRetry(true)
}

React useEffect hook causes DOMException: User activation is required to request permissions

1 Answers1