updating demo

README.md

@@ -134,7 +134,7 @@ const registration = await client.register("Arnaud", challenge, {
  authenticatorType: "auto",
  userVerification: "required",
  timeout: 60000,
- attestation: false,
+ attestation: true,
  userHandle: "recommended to set it to a random 64 bytes value",
  debug: false
 })
@@ -395,7 +395,7 @@ Registration options
 --------------------
 
 - `discoverable`: (`'discouraged'`, `'preferred'` or `'required'`) If the credential is "discoverable", it can be selected using `authenticate` without providing credential IDs. In that case, a native pop-up will appear for user selection. This may have an impact on the "passkeys" user experience and syncing behavior of the key. *(Default: 'preferred')*
-- `attestation`: If enabled, the device attestation and clientData will be provided as base64 encoded binary data. Note that this is not available on some platforms. *(Default: false)*
+- `attestation`: If enabled, the device attestation and clientData will be provided as base64 encoded binary data. Note that this may impact the authenticator information available or the UX depending on the platform. *(Default: false)*
 - `userHandle`: The `userHandle` can be used to re-register credentials for an existing user, thus overriding the current the key pair and username for that `userHandle`. *The default here is based on a hash of the `username`, and thus has some security implications as described in [issue](https://github.com/passwordless-id/webauthn/issues/29). For optimal security and privacy, it is recommended to set the `userHandle` to a random 64 bytes value.*
 
 

demos/basic.html

@@ -33,10 +33,22 @@
  <template v-if="isAuthenticated">
  <p>{{'Hello ' + username + '!'}}</p>
  <section v-if="registrationData && !authenticationData" style="text-align: left;">
+ <p>
+ <b>Authenticator:</b>
+ <img style="vertical-align: middle;" :src="registrationData.authenticator.icon_light" />
+ <span>{{registrationData.authenticator.name}}</span>
+ </p>
+ <p>
+ <b>Type:</b>
+ <template v-if="registrationData.authenticator">
+ <b-tag type="is-primary" v-if="registrationData.authenticator.synced === true">Synced / multi-device credential</b-tag>
+ <b-tag type="is-primary" v-if="registrationData.authenticator.synced === false">Device-bound credential</b-tag>
+ </template>
+ </p>
+ <hr/>
  <p><b>Credential ID:</b> {{registrationData.credential.id}}</p>
  <p><b>Public Key:</b> {{registrationData.credential.publicKey.substring(0,32)}}...</p>
  <p><b>Algorithm:</b> {{registrationData.credential.algorithm}}</p>
- <p><b>Authenticator Name:</b> {{registrationData.authenticator.name}}</p>
  </section>
  <section v-if="authenticationData" style="text-align: left;">
  <p><b>Credential ID:</b> {{authenticationData.credentialId}}</p>

demos/js/basic.js

@@ -16,7 +16,10 @@ const app = new Vue({
  this.isRegistered = !!window.localStorage.getItem(this.username)
  },
  async register() {
- let res = await client.register(this.username, window.crypto.randomUUID(), { authType: this.isRoaming ? 'roaming' : 'auto' })
+ let res = await client.register(this.username, window.crypto.randomUUID(), { 
+ authenticatorType: this.isRoaming ? 'roaming' : 'auto',
+ attestation: true
+ })
  console.debug(res)
 
  const parsed = parsers.parseRegistration(res)
@@ -35,7 +38,9 @@ const app = new Vue({
  },
  async login() {
  let credentialId = window.localStorage.getItem(this.username)
- let res = await client.authenticate(credentialId ? [credentialId] : [], window.crypto.randomUUID(), { authType: this.isRoaming ? 'roaming' : 'auto' })
+ let res = await client.authenticate(credentialId ? [credentialId] : [], window.crypto.randomUUID(), {
+ authenticatorType: this.isRoaming ? 'roaming' : 'auto'
+ })
  console.debug(res)
 
  const parsed = parsers.parseAuthentication(res)

demos/js/playground.js

@@ -12,7 +12,7 @@ import {client, server, parsers, utils} from '../../dist/webauthn.min.js'
  userVerification: 'required',
  discoverable: 'preferred',
  timeout: 60000,
- attestation: false,
+ attestation: true,
  },
  result: null,
  parsed: null

demos/playground.html

@@ -87,8 +87,8 @@ <h2 class="title">Registration</h2>
  <b-field label="attestation" horizontal>
  <b-checkbox v-model="registration.options.attestation" expanded></b-checkbox>
  <div class="hint">
- <p>If enabled, the device attestation and clientData will be provided as base64 encoded binary data. Not
- available on some platforms.</p>
+ <p>If enabled, the device attestation and clientData will be provided as base64 encoded binary data.
+ Note that this may impact the authenticator information available or the UX depending on the platform.</p>
  </div>
  </b-field>
 

src/authenticators.ts

@@ -10,19 +10,22 @@ export function parseAuthBuffer(authData :ArrayBuffer) {
  // https://w3c.github.io/webauthn/#sctn-authenticator-data
  let parsed :any = {
  rpIdHash: utils.toBase64url(authData.slice(0,32)),
-  flags: {
-  userPresent: !!(flags & 1),
-  //reserved1: !!(flags & 2),
-  userVerified: !!(flags & 4),
-  backupEligibility: !!(flags & 8),
-  backupState: !!(flags & 16),
-  //reserved2: !!(flags & 32),
-  attestedData: !!(flags & 64),
-  extensionsIncluded: !!(flags & 128)
-  },
-  counter: new DataView(authData.slice(33,37)).getUint32(0, false), // Big-Endian!
+ flags: {
+ userPresent: !!(flags & 1),
+ //reserved1: !!(flags & 2),
+ userVerified: !!(flags & 4),
+ backupEligibility: !!(flags & 8),
+ backupState: !!(flags & 16),
+ //reserved2: !!(flags & 32),
+ attestedData: !!(flags & 64),
+ extensionsIncluded: !!(flags & 128)
+ },
+ counter: new DataView(authData.slice(33,37)).getUint32(0, false), // Big-Endian!
  }
 
+ // this is more descriptive than "backupState"
+ parsed.synced = parsed.flags.backupState
+
  if(authData.byteLength > 37) {
  // registration contains additional data
 

src/parsers.ts

@@ -19,9 +19,8 @@ export function parseAuthenticator(data :string|ArrayBuffer) :AuthenticatorInfo
 
 
 export function parseAttestation(data :string|ArrayBuffer) :unknown {
- if(typeof data == 'string')
- data = utils.parseBase64url(data)
-
+ //if(typeof data == 'string')
+ // data = utils.parseBase64url(data)
  // Useless comment, let's at least provide the raw value 
  // return "The device attestation proves the authenticity of the device model / aaguid. It's not guaranteed to be included and really complex to parse / verify. Good luck with that one!"
  return data;