WebAuthN auth

assets/js/app.js

@@ -22,8 +22,102 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
+function base64ToArray(base64String) {
+  return Uint8Array.from(window.atob(base64String), (c) => c.charCodeAt(0));
+}
+
+function arrayToBase64(buffer) {
+  return window.btoa(
+    Array.from(new Uint8Array(buffer), (c) => String.fromCharCode(c)).join("")
+  );
+}
+
+
+const registrationHook = {
+  mounted() {
+    this.handleEvent("registration-challenge", (event) => this.handleRegistration(event, this))
+  },
+
+  async handleRegistration(event, context) {
+    try {
+       const {
+        attestation,
+        challenge,
+        rp,
+        user,
+        timeout,
+        excludeCredentials,
+      } = event;
+      user.id = base64ToArray(user.id)
+      excludeCredentials.forEach(cred => {
+        cred.id = base64ToArray(cred.id)
+      })
+      const publicKey = {
+        attestation,
+        challenge: base64ToArray(challenge),
+        excludeCredentials,
+        pubKeyCredParams: [{ alg: -7, type: "public-key" }, { alg: -8, type: "public-key" }, { alg: -257, type: "public-key"}],
+        authenticatorSelection: {
+          authenticatorAttachement: "explicitly invalid, working around bitwarden",
+          residentKey: "discouraged"
+        },
+        user,
+        timeout,
+        rp,
+      }
+      const credential = await navigator.credentials.create({ publicKey })
+      context.pushEventTo(context.el, "registration-complete", {
+        attestation64: arrayToBase64(credential.response.attestationObject),
+        clientData: Array.from(new Uint8Array(credential.response.clientDataJSON)),
+        id: arrayToBase64(credential.rawId),
+        type: credential.type
+      })
+    } catch (error) {
+      console.error(error)
+      const { message, name, stack } = error;
+      context.pushEventTo(context.el, "error", { message, name, stack });
+    }
+  }
+}
+
+const authenticationHook = {
+  mounted() {
+    this.handleEvent("authentication-challenge", (event) => this.handleAuthentication(event, this))
+  },
+
+  async handleAuthentication(event, context) {
+    try {
+      const {
+        challenge, allowCredentials
+      } = event;
+      allowCredentials.forEach(cred => {
+        cred.id = base64ToArray(cred.id)
+      })
+      const { type, response: { signature, authenticatorData, clientDataJSON, userHandle }, rawId } = await navigator.credentials.get({
+        publicKey: {
+          challenge: base64ToArray(challenge),
+          allowCredentials,
+          timeout: 60000
+        }
+      })
+      context.pushEventTo(context.el, "authentication-credential", {
+        type: type,
+        id: arrayToBase64(rawId),
+        signature: arrayToBase64(signature),
+        authenticatorData: arrayToBase64(authenticatorData),
+        clientData: Array.from(new Uint8Array(clientDataJSON)),
+        userHandle: arrayToBase64(userHandle)
+      })
+    } catch (error) {
+      console.error(error)
+      const { message, name, stack } = error;
+      context.pushEventTo(context.el, "error", { message, name, stack });
+    }
+  }
+}
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: { registrationHook, authenticationHook }})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})

assets/tailwind.config.js

@@ -15,6 +15,9 @@ module.exports = {
     extend: {
       colors: {
         brand: "#FD4F00",
+      },
+      fontFamily: {
+        mono: ["monospace"]
       }
     },
   },