move all passkey testing to /test

src/views/StartView.vue

@@ -70,7 +70,6 @@ import { accountsDB } from "@/db/index";
 import { generateRandomBytes } from "@/libs/crypto";
 import {
   createPeerDid,
-  JWK,
   PeerSetup,
   registerCredential,
   verifyJwt,
@@ -80,14 +79,7 @@ import {
   components: {},
 })
 export default class StartView extends Vue {
-  authenticatorData?: ArrayBuffer;
-  credId?: Base64URLString;
   numAccounts = 0;
-  publicKeyJwk?: JWK;
-  publicKeyBytes?: Uint8Array;
-  rawId?: Uint8Array;
-  savedCredentialId = "";
-  userId?: ArrayBuffer;
 
   async mounted() {
     await accountsDB.open();
@@ -95,53 +87,15 @@ export default class StartView extends Vue {
   }
 
   public async onClickYes() {
-    this.userId = generateRandomBytes(16).buffer;
-    const encodedUserId = new TextDecoder("utf-8").decode(this.userId);
-    console.log("encodedUserId", encodedUserId);
-
-    const challenge = generateRandomBytes(32);
-    const cred = await registerCredential(
-      this.userId as Uint8Array,
-      challenge as Uint8Array,
-    );
-    console.log("public key", cred);
-    this.publicKeyJwk = cred.publicKeyJwk;
-    this.publicKeyBytes = cred.publicKeyBytes;
-    this.credId = cred.credId as string;
-    this.rawId = cred.rawId as Uint8Array;
-    this.savedCredentialId = this.credId;
-    //this.$router.push({ name: "new-identifier" });
+    this.$router.push({ name: "new-identifier" });
   }
 
   public async onClickNo() {
-    const did = createPeerDid(this.publicKeyBytes as Uint8Array);
-    console.log("did", did);
-    const payload = { a: 1 };
-    const peerSetup = new PeerSetup();
-    const jwt = await peerSetup.createJwt(payload, did, this.credId as string);
-    console.log("jwt", jwt);
-    const jwt4url = jwt
-      .replace(/\+/g, "-")
-      .replace(/\//g, "_")
-      .replace(/=+$/, "");
-    console.log("jwt4url", jwt4url);
-
-    const signature = jwt4url.split(".")[2];
-    const decoded = await verifyJwt(
-      jwt4url,
-      this.credId as Base64URLString,
-      this.rawId as Uint8Array,
-      peerSetup.authenticatorData as ArrayBuffer,
-      peerSetup.clientDataJsonDecoded,
-      this.publicKeyBytes as Uint8Array,
-      signature,
-    );
-    console.log("decoded", decoded);
-    //this.$router.push({ name: "import-account" });
+    this.$router.push({ name: "import-account" });
   }
 
   public onClickDerive() {
-    //this.$router.push({ name: "import-derive" });
+    this.$router.push({ name: "import-derive" });
   }
 }
 </script>

src/views/TestView.vue

@@ -21,8 +21,8 @@
       </h1>
     </div>
 
-    <div class="mb-8">
-      <h2 class="text-xl font-bold mb-4">Notiwind Alert Test Suite</h2>
+    <div>
+      <h2 class="text-xl font-bold mb-4">Notiwind Alerts</h2>
 
       <button
         @click="
@@ -154,8 +154,8 @@
       </button>
     </div>
 
-    <div>
-      <h2 class="text-xl font-bold mb-4">Share Image</h2>
+    <div class="mt-8">
+      <h2 class="text-xl font-bold mb-4">Image Sharing</h2>
       Populates the "shared-photo" view as if they used "share_target".
       <input type="file" @change="uploadFile" />
       <router-link
@@ -169,22 +169,65 @@
         Go to Shared Page
       </router-link>
     </div>
+
+    <div class="mt-8">
+      <h2 class="text-xl font-bold mb-4">Passkeys</h2>
+      <button
+        @click="register()"
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Register
+      </button>
+      <button
+        @click="create()"
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Create
+      </button>
+      <button
+        @click="verify()"
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Verify
+      </button>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
+import { Base64URLString } from "@simplewebauthn/types";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { db } from "@/db/index";
+import { generateRandomBytes } from "@/libs/crypto";
+import {
+  createPeerDid,
+  JWK,
+  PeerSetup,
+  registerCredential,
+  verifyJwt,
+} from "@/libs/didPeer";
 
 const inputFileNameRef = ref<Blob>();
 
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {
+  // for file import
   fileName?: string;
 
+  // for passkeys
+  authenticatorData?: ArrayBuffer;
+  credId?: Base64URLString;
+  jwt?: string;
+  peerSetup?: PeerSetup;
+  publicKeyJwk?: JWK;
+  publicKeyBytes?: Uint8Array;
+  rawId?: Uint8Array;
+  savedCredentialId = "";
+  userId?: ArrayBuffer;
+
   async uploadFile(event: Event) {
     inputFileNameRef.value = event.target.files[0];
     // https://developer.mozilla.org/en-US/docs/Web/API/File
@@ -214,5 +257,55 @@ export default class Help extends Vue {
   showFileNextStep() {
     return !!inputFileNameRef.value;
   }
+
+  public async register() {
+    this.userId = generateRandomBytes(16).buffer;
+    const encodedUserId = new TextDecoder("utf-8").decode(this.userId);
+    console.log("encodedUserId", encodedUserId);
+
+    const challenge = generateRandomBytes(32);
+    const cred = await registerCredential(
+      this.userId as Uint8Array,
+      challenge as Uint8Array,
+    );
+    console.log("public key", cred);
+    this.publicKeyJwk = cred.publicKeyJwk;
+    this.publicKeyBytes = cred.publicKeyBytes;
+    this.credId = cred.credId as string;
+    this.rawId = cred.rawId as Uint8Array;
+    this.savedCredentialId = this.credId;
+  }
+
+  public async create() {
+    const did = createPeerDid(this.publicKeyBytes as Uint8Array);
+    console.log("did", did);
+    const payload = { a: 1 };
+    this.peerSetup = new PeerSetup();
+    const rawJwt = await this.peerSetup.createJwt(payload, did, this.credId as string);
+    console.log("raw jwt", rawJwt);
+    this.jwt = rawJwt
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/=+$/, "");
+    console.log("jwt4url", this.jwt);
+  }
+
+  public async verify() {
+    if (!this.jwt || !this.peerSetup) {
+      alert("Create a JWT first.");
+      return;
+    }
+    const signature = this.jwt.split(".")[2];
+    const decoded = await verifyJwt(
+      this.jwt || "",
+      this.credId as Base64URLString,
+      this.rawId as Uint8Array,
+      this.peerSetup.authenticatorData as ArrayBuffer,
+      this.peerSetup.clientDataJsonDecoded,
+      this.publicKeyBytes as Uint8Array,
+      signature,
+    );
+    console.log("decoded", decoded);
+  }
 }
 </script>