Using the navigator credentials api with phone touch id

Question

I'm trying to create a hobby project for the webauthn api. I have a page which creates a credential and it (correctly) prompts us to use security key. I'd like to use my touchid (on the samsung s9) or touchid on my mac to create the credential (which doesn't seem to work). Do i need to do anything extra for it to work with the touch id?

Below is the code to create the credential (i've changed the domain names).

<script type="text/javascript">
  let randomStringFromServer = `sdflksdf934mnsdfsdfimlsndfbop1asd239dsfsdfkllkjsdf`;

  const publicKeyCredentialCreationOptions = {
    challenge: Uint8Array.from(randomStringFromServer, c =>
      c.charCodeAt(0)
    ),
    rp: {
      name: "Mr Tom",
      id: "helloworld.com"
    },
    user: {
      id: Uint8Array.from("UZSL85T9AFC", c => c.charCodeAt(0)),
      name: "hello@world.com",
      displayName: "MrTom"
    },
    pubKeyCredParams: [{ alg: -7, type: "public-key" }],
    authenticatorSelection: {
      authenticatorAttachment: "cross-platform"
    },
    timeout: 60000,
    attestation: "direct"
  };

  const credential = await navigator.credentials.create({
    publicKey: publicKeyCredentialCreationOptions
  });

  console.log(credential);
</script>

score 2 · Accepted Answer · answered Feb 25 '20 at 09:21

The important bit for controlling this behaviour is:

authenticatorSelection: {
  authenticatorAttachment: "cross-platform"
}

That is telling the API that you want to use an external device as the authenticator. If you use platform instead of cross-platform then the browser should respect that and attempt to use the built in features of the device. If no platform authenticators are available you'll likely get an error back immediately - either a NotAllowedError or NotSupportedError in my experience.

Using the navigator credentials api with phone touch id

1 Answers1