Merge pull request 'Include a way to register other test users' (#4) from test-registration into master

Reviewed-on: trent_larson/kick-starter-for-time-pwa#4

README.md

@@ -20,6 +20,40 @@ npm run build
 npm run lint
 ```
 
+### Clear data & restart
+
+Clear cache for localhost, then go to http://localhost:8080/start (because it'll regenerate if you start on the `/account` page).
+
+### Test key contents
+
+See [this page](openssl_signing_console.rst)
+
+### Register new user on test server
+
+New users require registration. This can be done with a claim payload like this by an existing user:
+
+```
+  const vcClaim = {
+    "@context": "https://schema.org",
+    "@type": "RegisterAction",
+    agent: { did: identity0.did },
+    object: SERVICE_ID,
+    participant: { did: newIdentity.did },
+  };
+```
+
+On the test server, the user starting 0x000 has rights to register others, and the keys for that test User #0 are found in the codebase. You can invoke registration by User #0 on the `/account` page:
+
+* Edit the `src/views/AccountViewView.vue` file and uncomment the lines referring to "test".
+
+* Use the [Vue Devtools browser extension](https://devtools.vuejs.org/) and type this into the console: `$vm.ctx.testRegisterUser()`
+
+
+
+### Create keys with alternate tools
+
+See [this page](openssl_signing_console.rst)
+
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 

package-lock.json

@@ -26,7 +26,6 @@
         "class-transformer": "^0.5.1",
         "core-js": "^3.26.1",
         "dexie": "^3.2.2",
-        "did-jwt": "^6.9.0",
         "ethereum-cryptography": "^1.1.2",
         "ethereumjs-util": "^7.1.5",
         "ethr-did-resolver": "^8.0.0",
@@ -12187,9 +12186,9 @@
       }
     },
     "node_modules/did-jwt": {
-      "version": "6.9.0",
+      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/did-jwt/-/did-jwt-6.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/did-jwt/-/did-jwt-6.10.1.tgz",
-      "integrity": "sha512-kZ8pakovM2VkG0pia6x0SA9/1rl9dOUti4i2FL3xg7arJDWW7dACJxX+6gQK7iR/DvXrfFo8F784ejHVbw9ryA==",
+      "integrity": "sha512-YJOvkuPKKX364ooAFNxZPcz/KBLRwLhRABQVQlVEqOjygsCkplNFB3UL97UqZ7Y3cAG6Jh5jKoAC4xFSm+h0qw==",
       "dependencies": {
         "@stablelib/ed25519": "^1.0.2",
         "@stablelib/random": "^1.0.1",

package.json

@@ -26,7 +26,6 @@
     "class-transformer": "^0.5.1",
     "core-js": "^3.26.1",
     "dexie": "^3.2.2",
-    "did-jwt": "^6.9.0",
     "ethereum-cryptography": "^1.1.2",
     "ethereumjs-util": "^7.1.5",
     "ethr-did-resolver": "^8.0.0",

src/libs/crypto/index.ts

@@ -5,8 +5,44 @@ import { entropyToMnemonic } from "ethereum-cryptography/bip39";
 import { wordlist } from "ethereum-cryptography/bip39/wordlists/english";
 import { HDNode } from "@ethersproject/hdnode";
 import * as didJwt from "did-jwt";
+import { Signer } from "did-jwt";
 import * as u8a from "uint8arrays";
 
+export function hexToBytes(s: string): Uint8Array {
+  const input = s.startsWith("0x") ? s.substring(2) : s;
+  return u8a.fromString(input.toLowerCase(), "base16");
+}
+
+export function fromJose(signature: string): {
+  r: string;
+  s: string;
+  recoveryParam?: number;
+} {
+  const signatureBytes: Uint8Array = base64ToBytes(signature);
+  if (signatureBytes.length < 64 || signatureBytes.length > 65) {
+    throw new TypeError(
+      `Wrong size for signature. Expected 64 or 65 bytes, but got ${signatureBytes.length}`
+    );
+  }
+  const r = bytesToHex(signatureBytes.slice(0, 32));
+  const s = bytesToHex(signatureBytes.slice(32, 64));
+  const recoveryParam =
+    signatureBytes.length === 65 ? signatureBytes[64] : undefined;
+  return { r, s, recoveryParam };
+}
+
+export function bytesToHex(b: Uint8Array): string {
+  return u8a.toString(b, "base16");
+}
+
+export function base64ToBytes(s: string): Uint8Array {
+  const inputBase64Url = s
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=/g, "");
+  return u8a.fromString(inputBase64Url, "base64url");
+}
+
 /**
  *
  *
@@ -81,8 +117,12 @@ export const createIdentifier = (): string => {
 export const accessToken = async (identifier: IIdentifier) => {
   const did: string = identifier.did;
   const privateKeyHex: string = identifier.keys[0].privateKeyHex as string;
+  const input = privateKeyHex.startsWith("0x")
+    ? privateKeyHex.substring(2)
+    : privateKeyHex;
+  const privateKeyBytes = u8a.fromString(input.toLowerCase(), "base16");
 
-  const signer = SimpleSigner(privateKeyHex);
+  const signer = didJwt.SimpleSigner(privateKeyHex);
 
   const nowEpoch = Math.floor(Date.now() / 1000);
   const endEpoch = nowEpoch + 60; // add one minute
@@ -98,14 +138,17 @@ export const accessToken = async (identifier: IIdentifier) => {
 };
 
 export const sign = async (privateKeyHex: string) => {
-  const signer = SimpleSigner(privateKeyHex);
+  const input = privateKeyHex.startsWith("0x")
+    ? privateKeyHex.substring(2)
+    : privateKeyHex;
+  const privateKeyBytes = u8a.fromString(input.toLowerCase(), "base16");
+
+  const signer = didJwt.SimpleSigner(privateKeyHex);
 
   return signer;
 };
 
 /**
- *  Copied out of did-jwt since it's deprecated in that library.
- *
  *  The SimpleSigner returns a configured function for signing data.
  *
  *  @example
@@ -117,34 +160,10 @@ export const sign = async (privateKeyHex: string) => {
  *  @param    {String}         hexPrivateKey    a hex encoded private key
  *  @return   {Function}                     a configured signer function
  */
-export function SimpleSigner(hexPrivateKey: string): didJwt.Signer {
+export const SimpleSigner = async (hexPrivateKey: string): Promise<Signer> => {
-  const signer = didJwt.ES256KSigner(didJwt.hexToBytes(hexPrivateKey), true);
+  const signer = didJwt.ES256KSigner(hexToBytes(hexPrivateKey), true);
   return async (data) => {
     const signature = (await signer(data)) as string;
     return fromJose(signature);
   };
-}
+};
-
-// from did-jwt/util; see SimpleSigner above
-export function fromJose(signature: string): {
-  r: string;
-  s: string;
-  recoveryParam?: number;
-} {
-  const signatureBytes: Uint8Array = didJwt.base64ToBytes(signature);
-  if (signatureBytes.length < 64 || signatureBytes.length > 65) {
-    throw new TypeError(
-      `Wrong size for signature. Expected 64 or 65 bytes, but got ${signatureBytes.length}`
-    );
-  }
-  const r = bytesToHex(signatureBytes.slice(0, 32));
-  const s = bytesToHex(signatureBytes.slice(32, 64));
-  const recoveryParam =
-    signatureBytes.length === 65 ? signatureBytes[64] : undefined;
-  return { r, s, recoveryParam };
-}
-
-// from did-jwt/util; see SimpleSigner above
-export function bytesToHex(b: Uint8Array): string {
-  return u8a.toString(b, "base16");
-}

src/main.ts

@@ -21,7 +21,6 @@ import {
   faQrcode,
   faUser,
   faPen,
-  faPlus,
   faTrashCan,
   faCalendar,
   faEllipsisVertical,
@@ -41,7 +40,6 @@ library.add(
   faQrcode,
   faUser,
   faPen,
-  faPlus,
   faTrashCan,
   faCalendar,
   faEllipsisVertical,

src/router/index.ts

@@ -7,19 +7,13 @@ const routes: Array<RouteRecordRaw> = [
     name: "home",
     component: () =>
       import(/* webpackChunkName: "start" */ "../views/DiscoverView.vue"),
-    beforeEnter: (to, from, next) => {
-      const appStore = useAppStore();
-      const isAuthenticated = appStore.condition === "registered";
-      if (isAuthenticated) {
-        next();
-      } else {
-        next({ name: "start" });
-      }
-    },
   },
   {
     path: "/about",
     name: "about",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
@@ -81,12 +75,6 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
       ),
   },
-  {
-    path: "/project",
-    name: "project",
-    component: () =>
-      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
-  },
   {
     path: "/new-edit-project",
     name: "new-edit-project",
@@ -95,6 +83,12 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
       ),
   },
+  {
+    path: "/project",
+    name: "project",
+    component: () =>
+      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
+  },
   {
     path: "/projects",
     name: "projects",
@@ -117,4 +111,27 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach(async (to, from, next) => {
+  const publicPages = ["/start", "/account", "/import-account"];
+  const isPublic = publicPages.includes(to.path);
+  const appStore = useAppStore();
+  console.log(to);
+  if (to.path === "/" && appStore.condition === "registered") {
+    next({ path: "/account" });
+  } else if (isPublic) {
+    switch (appStore.condition) {
+      case "registered":
+        next();
+        break;
+      default:
+        next();
+        break;
+    }
+  } else if (appStore.condition === "uninitialized") {
+    next({ path: "/start" });
+  } else {
+    next();
+  }
+});
+
 export default router;

src/store/app.ts

@@ -12,14 +12,9 @@ export const useAppStore = defineStore({
       typeof localStorage["lastView"] == "undefined"
         ? "/start"
         : localStorage["lastView"],
-    _projectId:
-      typeof localStorage.getItem("projectId") === "undefined"
-        ? ""
-        : localStorage.getItem("projectId"),
   }),
   getters: {
     condition: (state) => state._condition,
-    projectId: (state): string => state._projectId as string,
   },
   actions: {
     reset() {
@@ -28,8 +23,5 @@ export const useAppStore = defineStore({
     setCondition(newCondition: string) {
       localStorage.setItem("condition", newCondition);
     },
-    setProjectId(newProjectId: string) {
-      localStorage.setItem("projectId", newProjectId);
-    },
   },
 });

src/test/index.ts

@@ -0,0 +1,60 @@
+import axios from "axios";
+import * as didJwt from "did-jwt";
+import { AppString } from "@/constants/app";
+import { db } from "../db";
+import { SERVICE_ID } from "../libs/veramo/setup";
+import { deriveAddress, newIdentifier } from "../libs/crypto";
+
+export async function testServerRegisterUser() {
+  const testUser0Mnem =
+    "seminar accuse mystery assist delay law thing deal image undo guard initial shallow wrestle list fragile borrow velvet tomorrow awake explain test offer control";
+
+  const [addr, privateHex, publicHex, deriPath] = deriveAddress(testUser0Mnem);
+
+  const identity0 = newIdentifier(addr, publicHex, privateHex, deriPath);
+
+  await db.open();
+  const accounts = await db.accounts.toArray();
+  const thisIdentity = JSON.parse(accounts[0].identity);
+
+  // Make a claim
+  const vcClaim = {
+    "@context": "https://schema.org",
+    "@type": "RegisterAction",
+    agent: { did: identity0.did },
+    object: SERVICE_ID,
+    participant: { did: thisIdentity.did },
+  };
+  // Make a payload for the claim
+  const vcPayload = {
+    sub: "RegisterAction",
+    vc: {
+      "@context": ["https://www.w3.org/2018/credentials/v1"],
+      type: ["VerifiableCredential"],
+      credentialSubject: vcClaim,
+    },
+  };
+  // create a signature using private key of identity
+  // eslint-disable-next-line
+  const privateKeyHex: string = identity0.keys[0].privateKeyHex!;
+  const signer = await didJwt.SimpleSigner(privateKeyHex);
+  const alg = undefined;
+  // create a JWT for the request
+  const vcJwt: string = await didJwt.createJWT(vcPayload, {
+    alg: alg,
+    issuer: identity0.did,
+    signer: signer,
+  });
+
+  // Make the xhr request payload
+
+  const payload = JSON.stringify({ jwtEncoded: vcJwt });
+  const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+  const url = endorserApiServer + "/api/claim";
+  const headers = {
+    "Content-Type": "application/json",
+  };
+
+  const resp = await axios.post(url, payload, { headers });
+  console.log("Result:", resp);
+}

src/views/AccountViewView.vue

@@ -178,6 +178,7 @@ import { createIdentifier, deriveAddress, newIdentifier } from "../libs/crypto";
 import { db } from "../db";
 import { useAppStore } from "@/store/app";
 import { ref } from "vue";
+//import { testServerRegisterUser } from "../test";
 
 @Options({
   components: {},
@@ -191,6 +192,9 @@ export default class AccountViewView extends Vue {
   source = ref("Hello");
   copy = useClipboard().copy;
 
+  // This registers current user in vue plugin with: $vm.ctx.testRegisterUser()
+  //testRegisterUser = testServerRegisterUser;
+
   // 'created' hook runs when the Vue instance is first created
   async created() {
     const appCondition = useAppStore().condition;

src/views/DiscoverView.vue

@@ -19,7 +19,7 @@
       <!-- Projects -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <router-link
-          :to="{ name: 'projects' }"
+          :to="{ name: 'project' }"
           class="block text-center py-3 px-1"
           ><fa icon="folder-open" class="fa-fw"></fa
         ></router-link>

src/views/NewEditProjectView.vue

@@ -10,6 +10,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           ><fa icon="chevron-left" class="fa-fw"></fa
         ></router-link>
+
         [New/Edit] Project
       </h1>
     </div>
@@ -38,7 +39,7 @@
       type="text"
       placeholder="Project Name"
       class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-      v-model="projectName"
+      v-modal="projectName"
     />
 
     <textarea
@@ -76,7 +77,6 @@ import { db } from "../db";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
 import * as didJwt from "did-jwt";
 import { IIdentifier } from "@veramo/core";
-import { useAppStore } from "@/store/app";
 
 @Options({
   components: {},
@@ -134,12 +134,6 @@ export default class NewEditProjectView extends Vue {
       try {
         const resp = await this.axios.post(url, payload, { headers });
         console.log(resp.status, resp.data);
-        useAppStore().setProjectId(resp.data);
-        const route = {
-          name: "project",
-        };
-        console.log(route);
-        this.$router.push(route);
       } catch (error) {
         console.log(error);
       }

src/views/ProjectViewView.vue

@@ -126,16 +126,9 @@
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
-import { useAppStore } from "@/store/app";
 
 @Options({
   components: {},
 })
-export default class ProjectViewView extends Vue {
+export default class ProjectViewView extends Vue {}
-  projectId = "";
-  created(): void {
-    this.projectId = useAppStore().projectId;
-    console.log(this.projectId);
-  }
-}
 </script>

src/views/ProjectsView.vue

@@ -1,107 +1,3 @@
 <template>
-  <section id="Content" class="p-6 pb-24">
+  <section id="Content" class="p-6 pb-24"></section>
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      My Projects
-    </h1>
-
-    <!-- Quick Search -->
-    <form id="QuickSearch" class="mb-4 flex">
-      <input
-        type="text"
-        placeholder="Search…"
-        class="block w-full rounded-l border-r-0 border-slate-400"
-      />
-      <button
-        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
-      >
-        <i class="fa-solid fa-magnifying-glass fa-fw"></i>
-      </button>
-    </form>
-
-    <!-- New Project -->
-    <button
-      class="fixed right-6 bottom-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"
-      @click="onClickNewProject()"
-    >
-      <fa icon="plus" class="fa-fw"></fa>
-    </button>
-
-    <!-- Results List -->
-    <ul class="">
-      <li class="border-b border-slate-300">
-        <a href="project-view.html" class="block py-4 flex gap-4">
-          <div class="flex-none w-12">
-            <img
-              src="https://picsum.photos/200/200?random=1"
-              class="w-full rounded"
-            />
-          </div>
-
-          <div class="grow overflow-hidden">
-            <h2 class="text-base font-semibold">Canyon cleanup</h2>
-            <div class="text-sm truncate">
-              The quick brown fox jumps over the lazy dog. The quick brown fox
-              jumps over the lazy dog.
-            </div>
-          </div>
-        </a>
-      </li>
-
-      <li class="border-b border-slate-300">
-        <a href="project-view.html" class="block py-4 flex gap-4">
-          <div class="flex-none w-12">
-            <img
-              src="https://picsum.photos/200/200?random=2"
-              class="w-full rounded"
-            />
-          </div>
-
-          <div class="grow overflow-hidden">
-            <h2 class="text-base font-semibold">Potluck with neighbors</h2>
-            <div class="text-sm truncate">
-              The quick brown fox jumps over the lazy dog. The quick brown fox
-              jumps over the lazy dog.
-            </div>
-          </div>
-        </a>
-      </li>
-
-      <li class="border-b border-slate-300">
-        <a href="project-view.html" class="block py-4 flex gap-4">
-          <div class="flex-none w-12">
-            <img
-              src="https://picsum.photos/200/200?random=3"
-              class="w-full rounded"
-            />
-          </div>
-
-          <div class="grow overflow-hidden">
-            <h2 class="text-base font-semibold">Historical site</h2>
-            <div class="text-sm truncate">
-              The quick brown fox jumps over the lazy dog. The quick brown fox
-              jumps over the lazy dog.
-            </div>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </section>
 </template>
-
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  components: {},
-})
-export default class ProjectsView extends Vue {
-  onClickNewProject(): void {
-    const route = {
-      name: "new-edit-project",
-    };
-    console.log(route);
-    this.$router.push(route);
-  }
-}
-</script>