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(/=+$/, "")
-  }
 }