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;