Hey there, this piqued my curiosity…

So after a bit of research, I came across this pretty helpful section on “Propagating User Gestures” in a post from WebKit themselves. It covers why they require user gesture detection and then a few different approaches to handling it:

• Calling the API Directly from User Activated Events
  (note: no propagation necessary when buffering the challenge before the onclick event)
• Propagating User Gestures Through XHR Events
• Propagating User Gestures Through Fetch API
• Easter Egg: Propagating User Gestures Through setTimeout

source: Meet Face ID and Touch ID for the Web | WebKit

A simple path forward could be writing a client side hook with a mounted callback that “optimistically” fetches the challenge (via websockets) to buffer it on the client as well as manually add a click event listener to call the WebAuthn API (via http).

# here's some pseudocode

<button id="webauthn" phx-hook="WebAuthn">

def handle_event("fetch-challenge", _params, socket) do
  # optimistically generate challenge
  {:reply, %{challenge: "bufferedChallenge"}, socket}
end

Hooks.WebAuthn = {
  mounted(){
    this.pushEvent('fetch-challenge', {}, (reply) => {
      if (reply.challenge) {
        console.log("here's the challenge to buffer", reply.challenge);
        // buffer challenge on the client
      }
    });

    this.el.addEventListener("click", async (event) => {
      const options = {
        publicKey: {
          ...
          challenge: challengeBuffer, // retrieve buffered challenge
          ...
        }
      };
      const publicKeyCredential = await navigator.credentials.create(options);
    })
  },
}