Auto-suggest name for new Passkeys

- Use plain client data json everywhere
- Expose AAGUID and backed_up on Credentials
- Make attestation verifiers configurable
- Auto-suggest names for passkeys and show icons

app/javascript/controllers/credential_controller.js

@@ -1,60 +1,60 @@
 import { Controller } from "@hotwired/stimulus"
+import { post } from "@rails/request.js"
+import { base64urlToBuffer, bufferToBase64url } from "helpers/base64url_helpers"
 
 export default class extends Controller {
-  static values = { publicKey: Object }
-  static targets = ["clientDataJSON", "attestationObject"]
+  static values = { publicKey: Object, registerUrl: String }
+  static targets = ["button", "error", "cancelled"]
 
-  async create(event) {
-    event.preventDefault()
+  async create() {
+    this.buttonTarget.disabled = true
+    this.errorTarget.hidden = true
+    this.cancelledTarget.hidden = true
 
     try {
-      const publicKey = this.prepareOptions(this.publicKeyValue)
+      const publicKey = this.#prepareOptions(this.publicKeyValue)
       const credential = await navigator.credentials.create({ publicKey })
-      this.submitCredential(credential)
+      await this.#registerCredential(credential)
     } catch (error) {
-      if (error.name !== "AbortError" && error.name !== "NotAllowedError") {
-        console.error("Registration failed:", error)
+      if (error.name === "AbortError" || error.name === "NotAllowedError") {
+        this.cancelledTarget.hidden = false
+      } else {
+        this.errorTarget.hidden = false
       }
+      this.buttonTarget.disabled = false
     }
   }
 
-  submitCredential(credential) {
-    this.clientDataJSONTarget.value = this.bufferToBase64url(credential.response.clientDataJSON)
-    this.attestationObjectTarget.value = this.bufferToBase64url(credential.response.attestationObject)
+  async #registerCredential(credential) {
+    const response = await post(this.registerUrlValue, {
+      body: JSON.stringify({
+        passkey: {
+          client_data_json: new TextDecoder().decode(credential.response.clientDataJSON),
+          attestation_object: bufferToBase64url(credential.response.attestationObject),
+          transports: credential.response.getTransports?.() || []
+        }
+      }),
+      contentType: "application/json",
+      responseKind: "json"
+    })
 
-    for (const transport of credential.response.getTransports?.() || []) {
-      const input = document.createElement("input")
-      input.type = "hidden"
-      input.name = "credential[transports][]"
-      input.value = transport
-      this.element.appendChild(input)
+    if (response.ok) {
+      const { location } = await response.json
+      Turbo.visit(location)
+    } else {
+      throw new Error("Registration failed")
     }
-
-    this.element.requestSubmit()
   }
 
-  prepareOptions(options) {
+  #prepareOptions(options) {
     return {
       ...options,
-      challenge: this.base64urlToBuffer(options.challenge),
-      user: { ...options.user, id: this.base64urlToBuffer(options.user.id) },
+      challenge: base64urlToBuffer(options.challenge),
+      user: { ...options.user, id: base64urlToBuffer(options.user.id) },
       excludeCredentials: (options.excludeCredentials || []).map(cred => ({
         ...cred,
-        id: this.base64urlToBuffer(cred.id)
+        id: base64urlToBuffer(cred.id)
       }))
     }
   }
-
-  base64urlToBuffer(base64url) {
-    const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/")
-    const padding = "=".repeat((4 - base64.length % 4) % 4)
-    const binary = atob(base64 + padding)
-    return Uint8Array.from(binary, c => c.charCodeAt(0)).buffer
-  }
-
-  bufferToBase64url(buffer) {
-    const bytes = new Uint8Array(buffer)
-    const binary = String.fromCharCode(...bytes)
-    return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
-  }
 }

app/javascript/controllers/passkey_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { base64urlToBuffer, bufferToBase64url } from "helpers/base64url_helpers"
 
 export default class extends Controller {
   static values = { publicKey: Object, url: String, csrfToken: String }
@@ -41,10 +42,10 @@ export default class extends Controller {
 
     const fields = {
       authenticity_token: this.csrfTokenValue,
-      credential_id: credential.id,
-      "response[client_data_json]": new TextDecoder().decode(credential.response.clientDataJSON),
-      "response[authenticator_data]": this.#bufferToBase64url(credential.response.authenticatorData),
-      "response[signature]": this.#bufferToBase64url(credential.response.signature)
+      "passkey[id]": credential.id,
+      "passkey[client_data_json]": new TextDecoder().decode(credential.response.clientDataJSON),
+      "passkey[authenticator_data]": bufferToBase64url(credential.response.authenticatorData),
+      "passkey[signature]": bufferToBase64url(credential.response.signature)
     }
 
     for (const [name, value] of Object.entries(fields)) {
@@ -62,13 +63,13 @@ export default class extends Controller {
   #prepareOptions(options) {
     const prepared = {
       ...options,
-      challenge: this.#base64urlToBuffer(options.challenge)
+      challenge: base64urlToBuffer(options.challenge)
     }
 
     if (options.allowCredentials?.length) {
       prepared.allowCredentials = options.allowCredentials.map(cred => ({
         ...cred,
-        id: this.#base64urlToBuffer(cred.id)
+        id: base64urlToBuffer(cred.id)
       }))
     } else {
       delete prepared.allowCredentials
@@ -76,17 +77,4 @@ export default class extends Controller {
 
     return prepared
   }
-
-  #base64urlToBuffer(base64url) {
-    const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/")
-    const padding = "=".repeat((4 - base64.length % 4) % 4)
-    const binary = atob(base64 + padding)
-    return Uint8Array.from(binary, c => c.charCodeAt(0)).buffer
-  }
-
-  #bufferToBase64url(buffer) {
-    const bytes = new Uint8Array(buffer)
-    const binary = String.fromCharCode(...bytes)
-    return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
-  }
 }

app/javascript/helpers/base64url_helpers.js

@@ -0,0 +1,12 @@
+export function base64urlToBuffer(base64url) {
+  const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/")
+  const padding = "=".repeat((4 - base64.length % 4) % 4)
+  const binary = atob(base64 + padding)
+  return Uint8Array.from(binary, c => c.charCodeAt(0)).buffer
+}
+
+export function bufferToBase64url(buffer) {
+  const bytes = new Uint8Array(buffer)
+  const binary = String.fromCharCode(...bytes)
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
+}