Extend vetKD IBE demo with Internet Identity login (#604)

Extends the vetKD IBE demos (both Rust and Motoko) with Internet Identity login and allows to IBE-encrypt for a particular principal.

Also updates `.github/workflows/provision-darwin.sh` to make the installed node-js version configurable via an environment variable (leaving the default unchanged). This is done so that the CI runs for the vetkd Rust and motoko examples for macOS/darwin can use a newer node-js version (here 19.8.1) because with the old version (14.15.4) webpack fails with the error message "Field 'browser' doesn't contain a valid alias configuration" for the `@dfinity/identity` dependency of the `@dfinity/auth-client`.

.github/workflows/motoko-vetkd-example.yml

@@ -20,6 +20,7 @@ jobs:
       - name: Provision Darwin
         env:
           DFX_VERSION: 0.14.2
+          NODE_VERSION: 19.8.1
         run: bash .github/workflows/provision-darwin.sh
       - name: Motoko vetKD Darwin
         run: |

.github/workflows/provision-darwin.sh

@@ -11,7 +11,7 @@ bash install-brew.sh
 rm install-brew.sh
 
 # Install Node.
-version=14.15.4
+version=${NODE_VERSION:=14.15.4}
 curl --location --output node.pkg "https://nodejs.org/dist/v$version/node-v$version.pkg"
 sudo installer -pkg node.pkg -store -target /
 rm node.pkg

.github/workflows/rust-vetkd-example.yml

@@ -20,6 +20,7 @@ jobs:
       - name: Provision Darwin
         env:
           DFX_VERSION: 0.14.2
+          NODE_VERSION: 19.8.1
         run: bash .github/workflows/provision-darwin.sh
       - name: Rust vetKD Darwin
         run: |

motoko/vetkd/dfx.json

@@ -25,6 +25,17 @@
         "dist/app_frontend_js/"
       ],
       "type": "assets"
+    },
+    "internet_identity": {
+      "type": "custom",
+      "candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
+      "wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
+      "remote": {
+        "id": {
+          "ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
+        }
+      },
+      "frontend": {}
     }
   },
   "defaults": {

motoko/vetkd/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@dfinity/agent": "^0.15.6",
+    "@dfinity/auth-client": "^0.15.6",
     "@dfinity/candid": "^0.15.6",
     "@dfinity/principal": "^0.15.6",
     "ic-vetkd-utils": "file:ic-vetkd-utils-0.1.0.tgz"

motoko/vetkd/src/app_backend/Main.mo

@@ -3,6 +3,7 @@ import Text "mo:base/Text";
 import Blob "mo:base/Blob";
 import Array "mo:base/Array";
 import Hex "./utils/Hex";
+import Debug "mo:base/Debug";
 
 actor {
     type VETKD_SYSTEM_API = actor {
@@ -40,6 +41,8 @@ actor {
     };
 
     public shared ({ caller }) func encrypted_symmetric_key_for_caller(encryption_public_key : Blob) : async Text {
+        Debug.print("encrypted_symmetric_key_for_caller: caller: " # debug_show (caller));
+
         let { encrypted_key } = await vetkd_system_api.vetkd_encrypted_key({
             derivation_id = Principal.toBlob(caller);
             public_key_derivation_path = Array.make(Text.encodeUtf8("symmetric_key"));
@@ -59,6 +62,8 @@ actor {
     };
 
     public shared ({ caller }) func encrypted_ibe_decryption_key_for_caller(encryption_public_key : Blob) : async Text {
+        Debug.print("encrypted_ibe_decryption_key_for_caller: caller: " # debug_show (caller));
+
         let { encrypted_key } = await vetkd_system_api.vetkd_encrypted_key({
             derivation_id = Principal.toBlob(caller);
             public_key_derivation_path = Array.make(Text.encodeUtf8("ibe_encryption"));

motoko/vetkd/src/app_frontend_js/assets/main.css

@@ -8,7 +8,7 @@ form {
     justify-content: center;
     gap: 0.5em;
     flex-flow: row wrap;
-    max-width: 40vw;
+    max-width: 50vw;
     margin: auto;
     align-items: baseline;
 }
@@ -30,9 +30,16 @@ button[type="submit"] {
     text-align: center;
 }
 
+#login_form {
+    margin-bottom: 2em;
+}
+
+#symmetric_encryption_demo {
+    text-align: center;
+}
+
 #ibedemo {
     text-align: center;
-    margin-top: 2em;
 }
 
 #get_symmetric_key_result {

motoko/vetkd/src/app_frontend_js/src/index.html

@@ -12,7 +12,13 @@
 
 <body>
   <main>
-    <h1 id="vetkddemo">vetKD Demo: Encryption with symmetric (AES-GCM-256) key</h1>
+    <h1 id="vetkddemo">vetKD Demo</h1>
+    <form id="login_form">
+      <label for="login" id="principal"></label>
+      <button id="login">Login (optional)</button>
+    </form>
+    <hr />
+    <h2 id="symmetric_encryption_demo">Encryption with symmetric (AES-GCM-256) key</h1>
     <form action="#" id="get_symmetric_key_form">
       <button type="submit">Fetch symmetric key for local usage</button>
     </form>
@@ -30,17 +36,19 @@ <h1 id="vetkddemo">vetKD Demo: Encryption with symmetric (AES-GCM-256) key</h1>
     </form>
     <section id="decrypt_result"></section>
     <hr />
-    <h1 id="ibedemo">vetKD Demo: Identity-Based Encryption (IBE)</h1>
+    <h2 id="ibedemo">Identity-Based Encryption (IBE)</h1>
     <form action="#" id="ibe_encrypt_form">
       <label for="ibe_plaintext">Plaintext:</label>
       <input type="text" id="ibe_plaintext"><br><br>
-      <button type="submit" id="ibe_encrypt" disabled="true">IBE-encrypt for myself</button>
+      <label for="ibe_principal">Encrypt for principal:</label>
+      <input type="text" id="ibe_principal"><br><br>
+      <button type="submit" id="ibe_encrypt" disabled="true">IBE-encrypt</button>
     </form>
     <section id="ibe_encrypt_result"></section>
     <form action="#" id="ibe_decrypt_form">
       <label for="ibe_ciphertext">Ciphertext:</label>
       <input type="text" id="ibe_ciphertext"><br><br>
-      <button type="submit" id="ibe_decrypt" disabled="true">IBE-decrypt for myself</button>
+      <button type="submit" id="ibe_decrypt" disabled="true">IBE-decrypt (for myself)</button>
     </form>
     <section id="ibe_decrypt_result"></section>
     <hr />