CODEWITHSUNDEEP
public-key-encryptionwebauthn
noi.m
noi.m

Reputation: 3132

Using the navigator credentials api with phone touch id

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?

enter image description here

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: "[email protected]",
      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>

Upvotes: 0

Views: 1305

Answers (1)

mackie
mackie

Reputation: 5264

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.

Upvotes: 2

Related Questions