How to use webauthn with iOS and react?

Question

if (navigator.credentials && window.PublicKeyCredential) {
      const available = await window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
      if (available) {
        const newCredentialInfo = await navigator.credentials.create(options);
        var response = newCredentialInfo.response;

        var clientExtensionsResults = newCredentialInfo.getClientExtensionResults();
        alert(JSON.stringify(response))
        alert(JSON.stringify(clientExtensionsResults));
      }
      else {
        alert("Unsupported");
      }
    }

gives me to use private key only (usb or smthg. But if I use this options.publicKey with JavaScript and html, everything is ok. It offers me to use FaveID to auth, but response is empty.

My options are

{"rp":{"id":"https://im-faceid.netlify.app","name":"netlify.app"},"user":{"id":{"0":97,"1":87,"2":120,"3":53,"4":89,"5":87,"6":49,"7":118,"8":99,"9":109,"10":82,"11":104,"12":99,"13":50,"14":57,"15":50},"name":"test","displayName":"Test User"},"challenge":{"0":79,"1":72,"2":78,"3":122,"4":101,"5":71,"6":86,"7":111},"pubKeyCredParams":[{"type":"public-key","alg":-7}],"authenticatorSelection":{"authenticatorAttachment":"platform","requireResidentKey":false,"userVerification":"required"},"attestation":"none","timeout":15000}

Answer 1

I see you're calling navigator.credentials.create() in your <App /> component's componentDidMount(). macOS and iOS Safari both require that WebAuthn API calls that want to use Touch ID must be made as a result of a "user gesture":

The amount of unsolicited prompts has been surprisingly low. The situation is different with the release of Face ID and Touch ID for the web. So, Face ID and Touch ID for the web require user gestures to function. (User gestures are not required for security keys for backward compatibility.)

See Apple's introduction of their support for WebAuthn for more guidance: https://webkit.org/blog/11312/meet-face-id-and-touch-id-for-the-web/

If you update your React code to move the logic that calls navigator.credentials.create() into, say, a button click handler, you'll be able to use Face ID. It'll require you click a button to trigger WebAuthn instead of just loading the page, but that's the reality of working with WebAuthn on an Apple OS.