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}

And for that matter what model iPhone, and version of iOS is it running? And do you have a link to something public we can see the issue ourselves on? — IAmKale
– IAmKale, Commented Apr 24, 2021 at 12:37
iPhone 11 Pro Max with the latest firmware (14.4). Yes, I deployed the latest build to im-faceid.netlify.app — Ilya
– Ilya, Commented Apr 24, 2021 at 20:33
You're going to need to update the site to set the value of rp.id in your options to im-faceid.netlify.app (get rid of the https://, that values needs to be just a domain, not an entire URL) to get things working. That will get the site testable on mobile. — IAmKale
– IAmKale, Commented Apr 25, 2021 at 1:22

IAmKale · Accepted Answer · 2021-04-25 01:30:19Z

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.

answered Apr 25, 2021 at 1:30

IAmKale

3,4761 gold badge27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilya Over a year ago

Hm, probably, you’re right. My another code written in simple JavaScript and html uses button to unit this process. In react I forgot to test it. I tried several variants in rp.id even domain.name

Collectives™ on Stack Overflow

How to use webauthn with iOS and react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related