From b80e2550192058c96fe1f49a0c807906e7cefa7f Mon Sep 17 00:00:00 2001
From: Web3NL <samerweb3@gmail.com>
Date: Mon, 9 Oct 2023 19:27:29 +0200
Subject: [PATCH 1/9] initial setup

---
 tools/ui/Cargo.lock                   |   2 +-
 tools/ui/canister_ids.json            |   5 +-
 tools/ui/dfx.json                     |   5 +
 tools/ui/package-lock.json            | 270 ++++++++++++++++++++++++--
 tools/ui/package.json                 |   2 +
 tools/ui/src/auth.ts                  |  58 ++++++
 tools/ui/src/candid.css               |   4 +
 tools/ui/src/candid.html              |   5 +-
 tools/ui/src/candid.ts                |   9 +
 tools/ui/src/index.ts                 |   2 +
 tools/ui/target_test_canister/main.mo |  49 +++++
 11 files changed, 396 insertions(+), 15 deletions(-)
 create mode 100644 tools/ui/src/auth.ts
 create mode 100644 tools/ui/target_test_canister/main.mo

diff --git a/tools/ui/Cargo.lock b/tools/ui/Cargo.lock
index 411743aa..7e687c39 100644
--- a/tools/ui/Cargo.lock
+++ b/tools/ui/Cargo.lock
@@ -111,7 +111,7 @@ checksum = "14c189c53d098945499cdfa7ecc63567cf3886b3332b312a5b4585d8d3a6a610"
 
 [[package]]
 name = "candid"
-version = "0.9.8"
+version = "0.9.9"
 dependencies = [
  "anyhow",
  "binread",
diff --git a/tools/ui/canister_ids.json b/tools/ui/canister_ids.json
index 016284e1..f25ce9fa 100644
--- a/tools/ui/canister_ids.json
+++ b/tools/ui/canister_ids.json
@@ -1,5 +1,8 @@
 {
   "didjs": {
-    "ic": "a4gq6-oaaaa-aaaab-qaa4q-cai"
+    "ic": "m4ul7-aqaaa-aaaal-qcewq-cai"
+  },
+  "target": {
+    "ic": "mvxad-wyaaa-aaaal-qcexa-cai"
   }
 }
\ No newline at end of file
diff --git a/tools/ui/dfx.json b/tools/ui/dfx.json
index 5fa1ceef..c7478820 100644
--- a/tools/ui/dfx.json
+++ b/tools/ui/dfx.json
@@ -14,6 +14,11 @@
           "name": "candid:service"
         }
       ]
+    },
+    "target": {
+      "type": "motoko",
+      "main": "target_test_canister/main.mo",
+      "frontend": {}
     }
   },
   "version": 1
diff --git a/tools/ui/package-lock.json b/tools/ui/package-lock.json
index acc77dce..b3412d41 100644
--- a/tools/ui/package-lock.json
+++ b/tools/ui/package-lock.json
@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "devDependencies": {
         "@dfinity/agent": "0.19.2",
+        "@dfinity/auth-client": "0.19.2",
         "@dfinity/candid": "0.19.2",
+        "@dfinity/identity": "0.19.2",
         "@dfinity/principal": "0.19.2",
         "buffer": "6.0.3",
         "copy-webpack-plugin": "^9.0.1",
@@ -40,6 +42,20 @@
         "@dfinity/principal": "^0.19.2"
       }
     },
+    "node_modules/@dfinity/auth-client": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@dfinity/auth-client/-/auth-client-0.19.2.tgz",
+      "integrity": "sha512-aQQ60Y6fuV8849ZzXDwSfJlHO5mWEnzscYVEqveCSDTbRCMw0RV/PKGmbNuM2mIes3ep+LWpq3IQRR56lYZWUA==",
+      "dev": true,
+      "dependencies": {
+        "idb": "^7.0.2"
+      },
+      "peerDependencies": {
+        "@dfinity/agent": "^0.19.2",
+        "@dfinity/identity": "^0.19.2",
+        "@dfinity/principal": "^0.19.2"
+      }
+    },
     "node_modules/@dfinity/candid": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@dfinity/candid/-/candid-0.19.2.tgz",
@@ -49,6 +65,22 @@
         "@dfinity/principal": "^0.19.2"
       }
     },
+    "node_modules/@dfinity/identity": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@dfinity/identity/-/identity-0.19.2.tgz",
+      "integrity": "sha512-0EwZd8lVfXzHLl5flRysRbjV181b2Xh9loV7QUrt5fE+lP5hgF4f+odFB1YajHQaSyCY1t+v7DA6R9+ICZK9AQ==",
+      "dev": true,
+      "dependencies": {
+        "@noble/hashes": "^1.3.1",
+        "borc": "^2.1.1",
+        "tweetnacl": "^1.0.1"
+      },
+      "peerDependencies": {
+        "@dfinity/agent": "^0.19.2",
+        "@dfinity/principal": "^0.19.2",
+        "@peculiar/webcrypto": "^1.4.0"
+      }
+    },
     "node_modules/@dfinity/principal": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@dfinity/principal/-/principal-0.19.2.tgz",
@@ -145,6 +177,48 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@peculiar/asn1-schema": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.6.tgz",
+      "integrity": "sha512-izNRxPoaeJeg/AyH8hER6s+H7p4itk+03QCa4sbxI3lNdseQYCuxzgsuNK8bTXChtLTjpJz6NmXKA73qLa3rCA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "asn1js": "^3.0.5",
+        "pvtsutils": "^1.3.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@peculiar/json-schema": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@peculiar/json-schema/-/json-schema-1.1.12.tgz",
+      "integrity": "sha512-coUfuoMeIB7B8/NMekxaDzLhaYmp0HZNPEjYRm9goRou8UZIC3z21s0sL9AWoCw4EG876QyO3kYrc61WNF9B/w==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@peculiar/webcrypto": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@peculiar/webcrypto/-/webcrypto-1.4.3.tgz",
+      "integrity": "sha512-VtaY4spKTdN5LjJ04im/d/joXuvLbQdgy5Z4DXF4MFZhQ+MTrejbNMkfZBp1Bs3O5+bFqnJgyGdPuZQflvIa5A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.3.6",
+        "@peculiar/json-schema": "^1.1.12",
+        "pvtsutils": "^1.3.2",
+        "tslib": "^2.5.0",
+        "webcrypto-core": "^1.7.7"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.21.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.2.tgz",
@@ -435,6 +509,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/asn1js": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.5.tgz",
+      "integrity": "sha512-FVnvrKJwpt9LP2lAMl8qZswRNm3T4q9CON+bxldk2iwk3FFpuwhx2FfinyitizWHsVYyaY+y5JzDR0rCMV5yTQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "pvtsutils": "^1.3.2",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/base64-arraybuffer": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
@@ -1321,6 +1410,12 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "dev": true
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -1850,9 +1945,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "funding": [
         {
@@ -1974,6 +2069,26 @@
         "node": ">=6"
       }
     },
+    "node_modules/pvtsutils": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.5.tgz",
+      "integrity": "sha512-ARvb14YB9Nm2Xi6nBq1ZX6dAM0FsJnuk+31aUp4TrcZEdKUlSqOqsxJHUPJDNE3qiIp+iUPEIeR6Je/tgV7zsA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.6.1"
+      }
+    },
+    "node_modules/pvutils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.3.tgz",
+      "integrity": "sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2524,9 +2639,15 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
+    "node_modules/tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==",
       "dev": true
     },
     "node_modules/typescript": {
@@ -2582,6 +2703,20 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webcrypto-core": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.7.tgz",
+      "integrity": "sha512-7FjigXNsBfopEj+5DV2nhNpfic2vumtjjgPmeDKk45z+MJwXKKfhPB7118Pfzrmh4jqOMST6Ch37iPAHoImg5g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.3.6",
+        "@peculiar/json-schema": "^1.1.12",
+        "asn1js": "^3.0.1",
+        "pvtsutils": "^1.3.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/webpack": {
       "version": "5.76.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.0.tgz",
@@ -2797,6 +2932,15 @@
         "simple-cbor": "^0.4.1"
       }
     },
+    "@dfinity/auth-client": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@dfinity/auth-client/-/auth-client-0.19.2.tgz",
+      "integrity": "sha512-aQQ60Y6fuV8849ZzXDwSfJlHO5mWEnzscYVEqveCSDTbRCMw0RV/PKGmbNuM2mIes3ep+LWpq3IQRR56lYZWUA==",
+      "dev": true,
+      "requires": {
+        "idb": "^7.0.2"
+      }
+    },
     "@dfinity/candid": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@dfinity/candid/-/candid-0.19.2.tgz",
@@ -2804,6 +2948,17 @@
       "dev": true,
       "requires": {}
     },
+    "@dfinity/identity": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@dfinity/identity/-/identity-0.19.2.tgz",
+      "integrity": "sha512-0EwZd8lVfXzHLl5flRysRbjV181b2Xh9loV7QUrt5fE+lP5hgF4f+odFB1YajHQaSyCY1t+v7DA6R9+ICZK9AQ==",
+      "dev": true,
+      "requires": {
+        "@noble/hashes": "^1.3.1",
+        "borc": "^2.1.1",
+        "tweetnacl": "^1.0.1"
+      }
+    },
     "@dfinity/principal": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@dfinity/principal/-/principal-0.19.2.tgz",
@@ -2879,6 +3034,42 @@
         "fastq": "^1.6.0"
       }
     },
+    "@peculiar/asn1-schema": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.6.tgz",
+      "integrity": "sha512-izNRxPoaeJeg/AyH8hER6s+H7p4itk+03QCa4sbxI3lNdseQYCuxzgsuNK8bTXChtLTjpJz6NmXKA73qLa3rCA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "asn1js": "^3.0.5",
+        "pvtsutils": "^1.3.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "@peculiar/json-schema": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@peculiar/json-schema/-/json-schema-1.1.12.tgz",
+      "integrity": "sha512-coUfuoMeIB7B8/NMekxaDzLhaYmp0HZNPEjYRm9goRou8UZIC3z21s0sL9AWoCw4EG876QyO3kYrc61WNF9B/w==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@peculiar/webcrypto": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@peculiar/webcrypto/-/webcrypto-1.4.3.tgz",
+      "integrity": "sha512-VtaY4spKTdN5LjJ04im/d/joXuvLbQdgy5Z4DXF4MFZhQ+MTrejbNMkfZBp1Bs3O5+bFqnJgyGdPuZQflvIa5A==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@peculiar/asn1-schema": "^2.3.6",
+        "@peculiar/json-schema": "^1.1.12",
+        "pvtsutils": "^1.3.2",
+        "tslib": "^2.5.0",
+        "webcrypto-core": "^1.7.7"
+      }
+    },
     "@types/eslint": {
       "version": "8.21.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.2.tgz",
@@ -3140,6 +3331,18 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "asn1js": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.5.tgz",
+      "integrity": "sha512-FVnvrKJwpt9LP2lAMl8qZswRNm3T4q9CON+bxldk2iwk3FFpuwhx2FfinyitizWHsVYyaY+y5JzDR0rCMV5yTQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "pvtsutils": "^1.3.2",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
     "base64-arraybuffer": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
@@ -3773,6 +3976,12 @@
       "dev": true,
       "requires": {}
     },
+    "idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "dev": true
+    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -4158,9 +4367,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.6",
@@ -4236,6 +4445,23 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "pvtsutils": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.5.tgz",
+      "integrity": "sha512-ARvb14YB9Nm2Xi6nBq1ZX6dAM0FsJnuk+31aUp4TrcZEdKUlSqOqsxJHUPJDNE3qiIp+iUPEIeR6Je/tgV7zsA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "tslib": "^2.6.1"
+      }
+    },
+    "pvutils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.3.tgz",
+      "integrity": "sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==",
+      "dev": true,
+      "peer": true
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4604,9 +4830,15 @@
       }
     },
     "tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
+    "tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==",
       "dev": true
     },
     "typescript": {
@@ -4652,6 +4884,20 @@
         "graceful-fs": "^4.1.2"
       }
     },
+    "webcrypto-core": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.7.tgz",
+      "integrity": "sha512-7FjigXNsBfopEj+5DV2nhNpfic2vumtjjgPmeDKk45z+MJwXKKfhPB7118Pfzrmh4jqOMST6Ch37iPAHoImg5g==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@peculiar/asn1-schema": "^2.3.6",
+        "@peculiar/json-schema": "^1.1.12",
+        "asn1js": "^3.0.1",
+        "pvtsutils": "^1.3.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "webpack": {
       "version": "5.76.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.0.tgz",
diff --git a/tools/ui/package.json b/tools/ui/package.json
index 43dcc4be..3c86ce2b 100644
--- a/tools/ui/package.json
+++ b/tools/ui/package.json
@@ -9,6 +9,8 @@
   "devDependencies": {
     "@dfinity/agent": "0.19.2",
     "@dfinity/candid": "0.19.2",
+    "@dfinity/auth-client": "0.19.2",
+    "@dfinity/identity": "0.19.2",
     "@dfinity/principal": "0.19.2",
     "buffer": "6.0.3",
     "copy-webpack-plugin": "^9.0.1",
diff --git a/tools/ui/src/auth.ts b/tools/ui/src/auth.ts
new file mode 100644
index 00000000..2ce52320
--- /dev/null
+++ b/tools/ui/src/auth.ts
@@ -0,0 +1,58 @@
+import { Principal } from "@dfinity/principal"
+import { authClient } from "./candid";
+
+export async function renderAuth(canisterId: Principal) {
+  ;(await authClient?.isAuthenticated())
+    ? insertLogoutButton()
+    : insertLoginButton(canisterId)
+}
+
+function insertLoginButton(canisterId: Principal) {
+  const auth = document.getElementById("authentication")
+
+  const buttonLogin = document.createElement("button")
+  buttonLogin.className = "btn"
+  buttonLogin.innerText = "Login with Internet Identity"
+
+  buttonLogin.addEventListener("click", async () => {
+    await login(canisterId)
+  })
+
+  auth!.innerHTML = '';
+  auth!.appendChild(buttonLogin)
+}
+
+function insertLogoutButton() {
+  const auth = document.getElementById("authentication")
+
+  const buttonLogout = document.createElement("button")
+  buttonLogout.className = "btn random"
+  buttonLogout.innerText = "Logout"
+
+  buttonLogout.addEventListener("click", async () => {
+    await logout()
+  })
+
+  auth!.innerHTML = '';
+  auth!.appendChild(buttonLogout)
+}
+
+async function login(canisterId: Principal) {
+  const identityProvider = "https://identity.ic0.app"
+  const derivationOrigin = "https://" + canisterId.toString() + ".raw.icp0.io"
+
+  authClient?.login({
+    identityProvider,
+    derivationOrigin,
+    onSuccess: async() => {
+        window.location.reload()
+        console.log(authClient?.getIdentity())
+    },
+    onError: (err) => console.error(err),
+  })
+}
+
+async function logout() {
+  authClient?.logout()
+  window.location.reload()
+}
diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index 4aac24eb..7aa0de55 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -50,6 +50,10 @@
   line-height: var(--header-height);
   color: var(--darkest);
   border-bottom: 1px solid var(--dark);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 #title-card {
diff --git a/tools/ui/src/candid.html b/tools/ui/src/candid.html
index 451c9514..7161ecbb 100644
--- a/tools/ui/src/candid.html
+++ b/tools/ui/src/candid.html
@@ -16,7 +16,10 @@
       <progress class="ic_progress" id="ic-progress">Loading Candid UI...</progress>
     </div>
     <app id="app" style="display: none">
-      <div id="header">Canister ID:&nbsp;<span id="canisterId"></span></div>
+      <div id="header">
+        <div>Canister ID:&nbsp;<span id="canisterId"></span></div>
+        <div id="authentication"></div>
+      </div>
       <div id="container">
         <div id="main-content">
           <div id="title-card">
diff --git a/tools/ui/src/candid.ts b/tools/ui/src/candid.ts
index b57b55e0..64011326 100644
--- a/tools/ui/src/candid.ts
+++ b/tools/ui/src/candid.ts
@@ -5,6 +5,7 @@ import {
 } from '@dfinity/candid';
 import {Principal} from '@dfinity/principal'
 import './candid.css';
+import { AuthClient } from "@dfinity/auth-client";
 
 declare var flamegraph: any;
 declare var d3: any;
@@ -17,6 +18,8 @@ function is_local(agent: HttpAgent) {
   return hostname === '127.0.0.1' || hostname.endsWith('localhost');
 }
 
+export let authClient: AuthClient | undefined;
+
 const agent = new HttpAgent();
 if (is_local(agent)) {
   agent.fetchRootKey();
@@ -77,6 +80,12 @@ export async function fetchActor(canisterId: Principal): Promise<ActorSubclass>
   }
   const dataUri = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(js);
   const candid: any = await eval('import("' + dataUri + '")');
+
+  authClient = authClient ?? (await AuthClient.create())
+  if (await authClient.isAuthenticated()) {
+    agent.replaceIdentity(authClient.getIdentity());
+  }
+
   return Actor.createActor(candid.idlFactory, { agent, canisterId });
 }
 
diff --git a/tools/ui/src/index.ts b/tools/ui/src/index.ts
index 7d9f20c5..083a6d1a 100644
--- a/tools/ui/src/index.ts
+++ b/tools/ui/src/index.ts
@@ -1,4 +1,5 @@
 import { fetchActor, render, getCycles, getNames } from "./candid";
+import { renderAuth } from "./auth";
 import { Principal } from "@dfinity/principal";
 
 async function main() {
@@ -38,6 +39,7 @@ async function main() {
     const canisterId = Principal.fromText(cid);
     const profiling = await getCycles(canisterId);
     const actor = await fetchActor(canisterId);
+    await renderAuth(canisterId);
     const names = await getNames(canisterId);
     render(canisterId, actor, profiling);
     const app = document.getElementById("app");
diff --git a/tools/ui/target_test_canister/main.mo b/tools/ui/target_test_canister/main.mo
new file mode 100644
index 00000000..9f8e1be2
--- /dev/null
+++ b/tools/ui/target_test_canister/main.mo
@@ -0,0 +1,49 @@
+import Principal "mo:base/Principal";
+import Error "mo:base/Error";
+import Text "mo:base/Text";
+
+actor {
+    let owner = Principal.fromText("m4ul7-aqaaa-aaaal-qcewq-cai");
+
+    public shared query ({ caller }) func hello() : async Text {
+        if (caller != owner) {
+            throw Error.reject("Unauthorized");
+        };
+
+        "Hello World!";
+    };
+
+    type HttpRequest = {
+        method : Text;
+        url : Text;
+        headers : [(Text, Text)];
+        body : Blob;
+        certificate_version : ?Nat16;
+    };
+
+    type HttpResponse = {
+        status_code : Nat16;
+        headers : [(Text, Text)];
+        body : Blob;
+    };
+
+    public func http_request(req : HttpRequest) : async HttpResponse {
+        if (req.url == "/.well-known/ii-alternative-origins") {
+            return {
+                status_code = 200;
+                headers = [
+                    ("Access-Control-Allow-Origin", "https://identity.ic0.app")
+                ];
+                body = Text.encodeUtf8(
+                    "{
+  \"alternativeOrigins\": [
+    \"https://m4ul7-aqaaa-aaaal-qcewq-cai.raw.icp0.io\"
+  ]
+}"
+                );
+            };
+        } else {
+            throw Error.reject("Not found");
+        };
+    };
+};

From 7b4cd13d830524148c0b7ffa360f6033468931fd Mon Sep 17 00:00:00 2001
From: Web3NL <samerweb3@gmail.com>
Date: Mon, 9 Oct 2023 21:26:15 +0200
Subject: [PATCH 2/9] feat: II login

---
 tools/ui/src/auth.ts                  | 51 ++++++++++++++++++++++-----
 tools/ui/src/candid.ts                |  2 ++
 tools/ui/src/icons.ts                 | 21 +++++++++++
 tools/ui/src/index.ts                 |  9 ++++-
 tools/ui/target_test_canister/main.mo | 20 ++++++++---
 5 files changed, 89 insertions(+), 14 deletions(-)
 create mode 100644 tools/ui/src/icons.ts

diff --git a/tools/ui/src/auth.ts b/tools/ui/src/auth.ts
index 2ce52320..033cbafb 100644
--- a/tools/ui/src/auth.ts
+++ b/tools/ui/src/auth.ts
@@ -1,9 +1,11 @@
 import { Principal } from "@dfinity/principal"
-import { authClient } from "./candid";
+import { authClient } from "./candid"
+import { refresh_actor } from "./index"
+import { dfinity_logo, copy_icon } from "./icons"
 
 export async function renderAuth(canisterId: Principal) {
   ;(await authClient?.isAuthenticated())
-    ? insertLogoutButton()
+    ? insertLogout()
     : insertLoginButton(canisterId)
 }
 
@@ -12,16 +14,24 @@ function insertLoginButton(canisterId: Principal) {
 
   const buttonLogin = document.createElement("button")
   buttonLogin.className = "btn"
-  buttonLogin.innerText = "Login with Internet Identity"
+  buttonLogin.innerHTML = `${dfinity_logo} Login with Internet Identity`
 
   buttonLogin.addEventListener("click", async () => {
     await login(canisterId)
   })
 
-  auth!.innerHTML = '';
+  auth!.innerHTML = ""
   auth!.appendChild(buttonLogin)
 }
 
+function insertLogout() {
+  const auth = document.getElementById("authentication")
+  auth!.innerHTML = ""
+
+  insertCopyId()
+  insertLogoutButton()
+}
+
 function insertLogoutButton() {
   const auth = document.getElementById("authentication")
 
@@ -33,10 +43,35 @@ function insertLogoutButton() {
     await logout()
   })
 
-  auth!.innerHTML = '';
   auth!.appendChild(buttonLogout)
 }
 
+function insertCopyId() {
+  if (!authClient) {
+    return
+  }
+
+  const auth = document.getElementById("authentication")
+
+  const copyText = document.createElement("span")
+
+  const id = authClient.getIdentity().getPrincipal().toString()
+  const idShort = id.slice(0, 5) + "..." + id.slice(-5)
+  copyText.innerText = idShort
+
+  const copyButton = document.createElement("button")
+  copyButton.innerHTML = `${copy_icon}`
+
+  copyButton.addEventListener("click", function () {
+    navigator.clipboard.writeText(id).catch((err) => {
+      console.error(err)
+    })
+  })
+
+  auth?.appendChild(copyText)
+  auth?.appendChild(copyButton)
+}
+
 async function login(canisterId: Principal) {
   const identityProvider = "https://identity.ic0.app"
   const derivationOrigin = "https://" + canisterId.toString() + ".raw.icp0.io"
@@ -44,9 +79,9 @@ async function login(canisterId: Principal) {
   authClient?.login({
     identityProvider,
     derivationOrigin,
-    onSuccess: async() => {
-        window.location.reload()
-        console.log(authClient?.getIdentity())
+    onSuccess: async () => {
+      refresh_actor(canisterId)
+      await insertLogout()
     },
     onError: (err) => console.error(err),
   })
diff --git a/tools/ui/src/candid.ts b/tools/ui/src/candid.ts
index 64011326..aa81e1b8 100644
--- a/tools/ui/src/candid.ts
+++ b/tools/ui/src/candid.ts
@@ -84,6 +84,8 @@ export async function fetchActor(canisterId: Principal): Promise<ActorSubclass>
   authClient = authClient ?? (await AuthClient.create())
   if (await authClient.isAuthenticated()) {
     agent.replaceIdentity(authClient.getIdentity());
+    console.log("Authenticated with Internet Identity Principal")
+    console.log(authClient.getIdentity().getPrincipal().toString())
   }
 
   return Actor.createActor(candid.idlFactory, { agent, canisterId });
diff --git a/tools/ui/src/icons.ts b/tools/ui/src/icons.ts
new file mode 100644
index 00000000..a40efc70
--- /dev/null
+++ b/tools/ui/src/icons.ts
@@ -0,0 +1,21 @@
+export const dfinity_logo = `
+<svg width="28" height="14" viewBox="0 0 358.8 179.8" xmlns="http://www.w3.org/2000/svg">
+  <linearGradient id="g1" x1="224.7853" y1="257.7536" x2="348.0663" y2="133.4581" gradientTransform="matrix(1 0 0 -1 0 272)">
+    <stop offset="0.21" stop-color="#F15A24"/>
+    <stop offset="0.6841" stop-color="#FBB03B"/>
+  </linearGradient>
+  <path fill="url(#g1)" d="M271.6,0c-20,0-41.9,10.9-65,32.4c-10.9,10.1-20.5,21.1-27.5,29.8c0,0,11.2,12.9,23.5,26.8 c6.7-8.4,16.2-19.8,27.3-30.1c20.5-19.2,33.9-23.1,41.6-23.1c28.8,0,52.2,24.2,52.2,54.1c0,29.6-23.4,53.8-52.2,54.1 c-1.4,0-3-0.2-5-0.6c8.4,3.9,17.5,6.7,26,6.7c52.8,0,63.2-36.5,63.8-39.1c1.5-6.7,2.4-13.7,2.4-20.9C358.6,40.4,319.6,0,271.6,0z"/>
+  <linearGradient id="g2" x1="133.9461" y1="106.4262" x2="10.6653" y2="230.7215" gradientTransform="matrix(1 0 0 -1 0 272)">
+    <stop offset="0.21" stop-color="#ED1E79"/>
+    <stop offset="0.8929" stop-color="#522785"/>
+  </linearGradient>
+  <path fill="url(#g2)" d="M87.1,179.8c20,0,41.9-10.9,65-32.4c10.9-10.1,20.5-21.1,27.5-29.8c0,0-11.2-12.9-23.5-26.8 c-6.7,8.4-16.2,19.8-27.3,30.1c-20.5,19-34,23.1-41.6,23.1c-28.8,0-52.2-24.2-52.2-54.1c0-29.6,23.4-53.8,52.2-54.1 c1.4,0,3,0.2,5,0.6c-8.4-3.9-17.5-6.7-26-6.7C13.4,29.6,3,66.1,2.4,68.8C0.9,75.5,0,82.5,0,89.7C0,139.4,39,179.8,87.1,179.8z"/>
+  <path fill="#29ABE2" d="M127.3,59.7c-5.8-5.6-34-28.5-61-29.3C18.1,29.2,4,64.2,2.7,68.7C12,29.5,46.4,0.2,87.2,0 c33.3,0,67,32.7,91.9,62.2c0,0,0.1-0.1,0.1-0.1c0,0,11.2,12.9,23.5,26.8c0,0,14,16.5,28.8,31c5.8,5.6,33.9,28.2,60.9,29 c49.5,1.4,63.2-35.6,63.9-38.4c-9.1,39.5-43.6,68.9-84.6,69.1c-33.3,0-67-32.7-92-62.2c0,0.1-0.1,0.1-0.1,0.2 c0,0-11.2-12.9-23.5-26.8C156.2,90.8,142.2,74.2,127.3,59.7z M2.7,69.1c0-0.1,0-0.2,0.1-0.3C2.7,68.9,2.7,69,2.7,69.1z"/>
+</svg>
+`
+
+export const copy_icon = `
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+</svg>
+`
diff --git a/tools/ui/src/index.ts b/tools/ui/src/index.ts
index 083a6d1a..ce814913 100644
--- a/tools/ui/src/index.ts
+++ b/tools/ui/src/index.ts
@@ -1,6 +1,9 @@
 import { fetchActor, render, getCycles, getNames } from "./candid";
 import { renderAuth } from "./auth";
 import { Principal } from "@dfinity/principal";
+import { ActorSubclass } from "@dfinity/agent";
+
+let actor: ActorSubclass | undefined;
 
 async function main() {
   const params = new URLSearchParams(window.location.search);
@@ -38,7 +41,7 @@ async function main() {
     document.title = `Canister ${cid}`;
     const canisterId = Principal.fromText(cid);
     const profiling = await getCycles(canisterId);
-    const actor = await fetchActor(canisterId);
+    actor = await fetchActor(canisterId);
     await renderAuth(canisterId);
     const names = await getNames(canisterId);
     render(canisterId, actor, profiling);
@@ -67,3 +70,7 @@ window.addEventListener("popstate", (event) => {
     window.location.reload();
   }
 });
+
+export async function refresh_actor(canisterId: Principal) {
+  actor = await fetchActor(canisterId);
+};
diff --git a/tools/ui/target_test_canister/main.mo b/tools/ui/target_test_canister/main.mo
index 9f8e1be2..b881cc6d 100644
--- a/tools/ui/target_test_canister/main.mo
+++ b/tools/ui/target_test_canister/main.mo
@@ -1,9 +1,10 @@
 import Principal "mo:base/Principal";
 import Error "mo:base/Error";
 import Text "mo:base/Text";
+import Blob "mo:base/Blob";
 
 actor {
-    let owner = Principal.fromText("m4ul7-aqaaa-aaaal-qcewq-cai");
+    let owner = Principal.fromText("oigup-gpnce-ytl3m-gkuwt-hf4yc-lci5d-ijsy5-oc4ak-kz3v2-fjbl5-mae");
 
     public shared query ({ caller }) func hello() : async Text {
         if (caller != owner) {
@@ -25,15 +26,23 @@ actor {
         status_code : Nat16;
         headers : [(Text, Text)];
         body : Blob;
+        upgrade : ?Bool;
     };
 
-    public func http_request(req : HttpRequest) : async HttpResponse {
+    public query func http_request(req : HttpRequest) : async HttpResponse {
+        {
+            status_code = 200;
+            headers = [];
+            upgrade = ?true;
+            body = Text.encodeUtf8("");
+        };
+    };
+
+    public func http_request_update(req : HttpRequest) : async HttpResponse {
         if (req.url == "/.well-known/ii-alternative-origins") {
             return {
                 status_code = 200;
-                headers = [
-                    ("Access-Control-Allow-Origin", "https://identity.ic0.app")
-                ];
+                headers = [("Access-Control-Allow-Origin", "https://identity.ic0.app")];
                 body = Text.encodeUtf8(
                     "{
   \"alternativeOrigins\": [
@@ -41,6 +50,7 @@ actor {
   ]
 }"
                 );
+                upgrade = ?false;
             };
         } else {
             throw Error.reject("Not found");

From a6e4c05e68b185f75c0a0dcfd4816f97d2b98c75 Mon Sep 17 00:00:00 2001
From: Web3NL <samerweb3@gmail.com>
Date: Mon, 9 Oct 2023 21:35:03 +0200
Subject: [PATCH 3/9] test: add allowed principal setter and getter in target
 canister

---
 tools/ui/target_test_canister/main.mo | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/tools/ui/target_test_canister/main.mo b/tools/ui/target_test_canister/main.mo
index b881cc6d..ffc50b41 100644
--- a/tools/ui/target_test_canister/main.mo
+++ b/tools/ui/target_test_canister/main.mo
@@ -4,10 +4,18 @@ import Text "mo:base/Text";
 import Blob "mo:base/Blob";
 
 actor {
-    let owner = Principal.fromText("oigup-gpnce-ytl3m-gkuwt-hf4yc-lci5d-ijsy5-oc4ak-kz3v2-fjbl5-mae");
+    var allowed = Principal.fromText("oigup-gpnce-ytl3m-gkuwt-hf4yc-lci5d-ijsy5-oc4ak-kz3v2-fjbl5-mae");
+
+    public func _set_allowed_principal(principal: Text) : async () {
+        allowed := Principal.fromText(principal);
+    };
+
+    public query func _get_allowed_principal() : async Text {
+        Principal.toText(allowed);
+    };
 
     public shared query ({ caller }) func hello() : async Text {
-        if (caller != owner) {
+        if (caller != allowed) {
             throw Error.reject("Unauthorized");
         };
 

From 164612551c0476ed9880a07adaaac17b61f869d1 Mon Sep 17 00:00:00 2001
From: Samer <samerweb3@gmail.com>
Date: Wed, 11 Oct 2023 17:34:27 +0200
Subject: [PATCH 4/9] fix: deactivate idle timeout

Co-authored-by: Ryan Vandersmith <ryanvandersmith@gmail.com>
---
 tools/ui/src/candid.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/tools/ui/src/candid.ts b/tools/ui/src/candid.ts
index aa81e1b8..4b025cf6 100644
--- a/tools/ui/src/candid.ts
+++ b/tools/ui/src/candid.ts
@@ -81,7 +81,12 @@ export async function fetchActor(canisterId: Principal): Promise<ActorSubclass>
   const dataUri = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(js);
   const candid: any = await eval('import("' + dataUri + '")');
 
-  authClient = authClient ?? (await AuthClient.create())
+  authClient = authClient ?? (await AuthClient.create({
+    idleOptions: {
+      disableIdle: true,
+      disableDefaultIdleCallback: true,
+    },
+  }))
   if (await authClient.isAuthenticated()) {
     agent.replaceIdentity(authClient.getIdentity());
     console.log("Authenticated with Internet Identity Principal")

From 44d7c8c86f0ecb3d9562a5170e758c98bff6a111 Mon Sep 17 00:00:00 2001
From: Web3NL <samerweb3@gmail.com>
Date: Wed, 11 Oct 2023 21:02:16 +0200
Subject: [PATCH 5/9] add: domain form

---
 tools/ui/src/auth.ts                          |  93 -----------
 tools/ui/src/auth/auth.ts                     | 157 ++++++++++++++++++
 tools/ui/src/{ => auth}/icons.ts              |   0
 tools/ui/src/auth/identityProvider.ts         |   1 +
 tools/ui/src/candid.css                       |   2 +-
 tools/ui/src/index.ts                         |   4 +-
 .../target_test_canister/AlternativeOrigin.mo |  13 ++
 tools/ui/target_test_canister/main.mo         |  12 +-
 8 files changed, 177 insertions(+), 105 deletions(-)
 delete mode 100644 tools/ui/src/auth.ts
 create mode 100644 tools/ui/src/auth/auth.ts
 rename tools/ui/src/{ => auth}/icons.ts (100%)
 create mode 100644 tools/ui/src/auth/identityProvider.ts
 create mode 100644 tools/ui/target_test_canister/AlternativeOrigin.mo

diff --git a/tools/ui/src/auth.ts b/tools/ui/src/auth.ts
deleted file mode 100644
index 033cbafb..00000000
--- a/tools/ui/src/auth.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Principal } from "@dfinity/principal"
-import { authClient } from "./candid"
-import { refresh_actor } from "./index"
-import { dfinity_logo, copy_icon } from "./icons"
-
-export async function renderAuth(canisterId: Principal) {
-  ;(await authClient?.isAuthenticated())
-    ? insertLogout()
-    : insertLoginButton(canisterId)
-}
-
-function insertLoginButton(canisterId: Principal) {
-  const auth = document.getElementById("authentication")
-
-  const buttonLogin = document.createElement("button")
-  buttonLogin.className = "btn"
-  buttonLogin.innerHTML = `${dfinity_logo} Login with Internet Identity`
-
-  buttonLogin.addEventListener("click", async () => {
-    await login(canisterId)
-  })
-
-  auth!.innerHTML = ""
-  auth!.appendChild(buttonLogin)
-}
-
-function insertLogout() {
-  const auth = document.getElementById("authentication")
-  auth!.innerHTML = ""
-
-  insertCopyId()
-  insertLogoutButton()
-}
-
-function insertLogoutButton() {
-  const auth = document.getElementById("authentication")
-
-  const buttonLogout = document.createElement("button")
-  buttonLogout.className = "btn random"
-  buttonLogout.innerText = "Logout"
-
-  buttonLogout.addEventListener("click", async () => {
-    await logout()
-  })
-
-  auth!.appendChild(buttonLogout)
-}
-
-function insertCopyId() {
-  if (!authClient) {
-    return
-  }
-
-  const auth = document.getElementById("authentication")
-
-  const copyText = document.createElement("span")
-
-  const id = authClient.getIdentity().getPrincipal().toString()
-  const idShort = id.slice(0, 5) + "..." + id.slice(-5)
-  copyText.innerText = idShort
-
-  const copyButton = document.createElement("button")
-  copyButton.innerHTML = `${copy_icon}`
-
-  copyButton.addEventListener("click", function () {
-    navigator.clipboard.writeText(id).catch((err) => {
-      console.error(err)
-    })
-  })
-
-  auth?.appendChild(copyText)
-  auth?.appendChild(copyButton)
-}
-
-async function login(canisterId: Principal) {
-  const identityProvider = "https://identity.ic0.app"
-  const derivationOrigin = "https://" + canisterId.toString() + ".raw.icp0.io"
-
-  authClient?.login({
-    identityProvider,
-    derivationOrigin,
-    onSuccess: async () => {
-      refresh_actor(canisterId)
-      await insertLogout()
-    },
-    onError: (err) => console.error(err),
-  })
-}
-
-async function logout() {
-  authClient?.logout()
-  window.location.reload()
-}
diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
new file mode 100644
index 00000000..dd7d731d
--- /dev/null
+++ b/tools/ui/src/auth/auth.ts
@@ -0,0 +1,157 @@
+import { Principal } from "@dfinity/principal"
+import { authClient } from "../candid"
+import { refresh_actor } from "../index"
+import { dfinity_logo, copy_icon } from "./icons"
+import { identityProvider } from "./identityProvider"
+
+export async function renderAuth() {
+  ;(await authClient?.isAuthenticated()) ? insertLogout() : insertLoginForm()
+}
+
+type DerivationOriginOptions = {
+  canisterId: Principal
+  domain: string
+  raw: boolean
+}
+
+function insertLoginForm() {
+  const params = new URLSearchParams(window.location.search)
+  const cid = params.get("id")
+  if (!cid) {
+    throw new Error("No canister ID available for authentication")
+  } else {
+    const auth = document.getElementById("authentication")
+
+    const buttonLogin = document.createElement("button")
+    buttonLogin.className = "btn"
+    buttonLogin.style.margin = "10px"
+    buttonLogin.innerHTML = `${dfinity_logo} Login with Internet Identity`
+
+    const canisterId = Principal.fromText(cid)
+
+    buttonLogin.addEventListener("click", async () => {
+      const options: DerivationOriginOptions = {
+        canisterId,
+        domain: (document.getElementById("domain") as HTMLInputElement).checked
+          ? "icp0.io"
+          : "ic0.app",
+        raw: (document.getElementById("raw") as HTMLInputElement).checked,
+      }
+      await login(options)
+    })
+
+    const {raw, raw_label, domain, domain_label} = domainForm()
+
+    auth!.innerHTML = ""
+    auth!.appendChild(raw)
+    auth!.appendChild(raw_label)
+    auth!.appendChild(domain)
+    auth!.appendChild(domain_label)
+    auth!.appendChild(buttonLogin)
+  }
+}
+
+function domainForm() {
+  const raw = document.createElement("input")
+  raw.id = "raw"
+  raw.type = "checkbox"
+  raw.checked = true
+
+  const raw_label = document.createElement("label")
+  raw_label.innerText = "raw"
+  raw_label.style.marginRight = "10px"
+
+  const domain = document.createElement("input")
+  domain.id = "domain"
+  domain.type = "checkbox"
+  domain.checked = true
+
+  const domain_label = document.createElement("label")
+  domain_label.innerText = "icp0.io"
+
+  return { raw, raw_label, domain, domain_label }
+}
+
+function insertLogout() {
+  const auth = document.getElementById("authentication")
+  auth!.innerHTML = ""
+
+  insertCopyId()
+  insertLogoutButton()
+}
+
+function insertLogoutButton() {
+  const auth = document.getElementById("authentication")
+
+  const buttonLogout = document.createElement("button")
+  buttonLogout.className = "btn random"
+  buttonLogout.style.margin = "10px"
+  buttonLogout.innerText = "Logout"
+
+  buttonLogout.addEventListener("click", async () => {
+    await logout()
+  })
+
+  auth!.appendChild(buttonLogout)
+}
+
+function insertCopyId() {
+  if (!authClient) {
+    return
+  }
+
+  const auth = document.getElementById("authentication")
+
+  const copyText = document.createElement("span")
+
+  const id = authClient.getIdentity().getPrincipal().toString()
+  const idShort = id.slice(0, 5) + "..." + id.slice(-5)
+  copyText.innerText = idShort
+
+  const copyButton = document.createElement("button")
+  copyButton.id = "copyButton"
+  copyButton.style.cursor = "pointer"
+  copyButton.innerHTML = `${copy_icon}`
+
+  copyButton.addEventListener("click", function () {
+    navigator.clipboard.writeText(id).catch((err) => {
+      console.error(err)
+    })
+    copyText.innerText = "Copied!"
+    setTimeout(() => {
+      copyText.innerText = idShort
+    }, 2000)
+  })
+
+  auth?.appendChild(copyButton)
+  auth?.appendChild(copyText)
+}
+
+async function login(options: DerivationOriginOptions) {
+  authClient?.login({
+    identityProvider,
+    derivationOrigin: derivationOrigin(options),
+    onSuccess: async () => {
+      refresh_actor(options.canisterId)
+      insertLogout()
+    },
+    onError: (err) => console.error(err),
+  })
+}
+
+async function logout() {
+  authClient?.logout()
+  window.location.reload()
+}
+
+function derivationOrigin(options: DerivationOriginOptions): string {
+  if (options.domain !== "icp0.io" && options.domain !== "ic0.app") {
+    throw new Error("Invalid domain")
+  }
+
+  console.log(options.domain)
+
+  return options.raw
+    ? "https://" + options.canisterId.toString() + ".raw." + options.domain
+    : "https://" + options.canisterId.toString() + "." + options.domain
+}
diff --git a/tools/ui/src/icons.ts b/tools/ui/src/auth/icons.ts
similarity index 100%
rename from tools/ui/src/icons.ts
rename to tools/ui/src/auth/icons.ts
diff --git a/tools/ui/src/auth/identityProvider.ts b/tools/ui/src/auth/identityProvider.ts
new file mode 100644
index 00000000..12ab34f9
--- /dev/null
+++ b/tools/ui/src/auth/identityProvider.ts
@@ -0,0 +1 @@
+export const identityProvider = "https://identity.ic0.app"
diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index 7aa0de55..a4c62720 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -47,7 +47,6 @@
   width: 100%;
   text-align: center;
   font-size: var(--font-md);
-  line-height: var(--header-height);
   color: var(--darkest);
   border-bottom: 1px solid var(--dark);
 
@@ -188,6 +187,7 @@ input[type='checkbox'] ~ .popup-form {
   border: none;
   text-transform: uppercase;
   flex: 1;
+  cursor: pointer;
 }
 .btn:not(:last-child) {
   margin-right: var(--pad-md);
diff --git a/tools/ui/src/index.ts b/tools/ui/src/index.ts
index ce814913..083ee4e9 100644
--- a/tools/ui/src/index.ts
+++ b/tools/ui/src/index.ts
@@ -1,5 +1,5 @@
 import { fetchActor, render, getCycles, getNames } from "./candid";
-import { renderAuth } from "./auth";
+import { renderAuth } from "./auth/auth";
 import { Principal } from "@dfinity/principal";
 import { ActorSubclass } from "@dfinity/agent";
 
@@ -42,7 +42,7 @@ async function main() {
     const canisterId = Principal.fromText(cid);
     const profiling = await getCycles(canisterId);
     actor = await fetchActor(canisterId);
-    await renderAuth(canisterId);
+    await renderAuth();
     const names = await getNames(canisterId);
     render(canisterId, actor, profiling);
     const app = document.getElementById("app");
diff --git a/tools/ui/target_test_canister/AlternativeOrigin.mo b/tools/ui/target_test_canister/AlternativeOrigin.mo
new file mode 100644
index 00000000..6fdd3f80
--- /dev/null
+++ b/tools/ui/target_test_canister/AlternativeOrigin.mo
@@ -0,0 +1,13 @@
+import Text "mo:base/Text";
+
+module {
+    // This should be the domain at which the Candid UI canister is serving its frontend
+    // Candid UI canister id in production is `https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io`
+    // Using A test version of the Candid UI canister here
+    let ALTERNATIVE_ORIGIN : Text = "https://m4ul7-aqaaa-aaaal-qcewq-cai.raw.icp0.io";
+
+    public func responseBody() : Blob {
+        let body = "{ \"alternativeOrigins\": [\"" # ALTERNATIVE_ORIGIN # "\"] }";
+        Text.encodeUtf8(body);
+    };
+};
diff --git a/tools/ui/target_test_canister/main.mo b/tools/ui/target_test_canister/main.mo
index ffc50b41..73c475a4 100644
--- a/tools/ui/target_test_canister/main.mo
+++ b/tools/ui/target_test_canister/main.mo
@@ -1,12 +1,12 @@
 import Principal "mo:base/Principal";
 import Error "mo:base/Error";
 import Text "mo:base/Text";
-import Blob "mo:base/Blob";
+import { responseBody } "./AlternativeOrigin";
 
 actor {
     var allowed = Principal.fromText("oigup-gpnce-ytl3m-gkuwt-hf4yc-lci5d-ijsy5-oc4ak-kz3v2-fjbl5-mae");
 
-    public func _set_allowed_principal(principal: Text) : async () {
+    public func _set_allowed_principal(principal : Text) : async () {
         allowed := Principal.fromText(principal);
     };
 
@@ -51,13 +51,7 @@ actor {
             return {
                 status_code = 200;
                 headers = [("Access-Control-Allow-Origin", "https://identity.ic0.app")];
-                body = Text.encodeUtf8(
-                    "{
-  \"alternativeOrigins\": [
-    \"https://m4ul7-aqaaa-aaaal-qcewq-cai.raw.icp0.io\"
-  ]
-}"
-                );
+                body = responseBody();
                 upgrade = ?false;
             };
         } else {

From 9ec0456c038c80db892f71245bc5d07b17158440 Mon Sep 17 00:00:00 2001
From: Web3NL <samerweb3@gmail.com>
Date: Wed, 11 Oct 2023 21:18:25 +0200
Subject: [PATCH 6/9] change default identity provider

---
 tools/ui/src/auth/auth.ts             | 12 +++++-------
 tools/ui/src/auth/identityProvider.ts |  2 +-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
index dd7d731d..d6bdfe09 100644
--- a/tools/ui/src/auth/auth.ts
+++ b/tools/ui/src/auth/auth.ts
@@ -40,7 +40,7 @@ function insertLoginForm() {
       await login(options)
     })
 
-    const {raw, raw_label, domain, domain_label} = domainForm()
+    const { raw, raw_label, domain, domain_label } = domainForm()
 
     auth!.innerHTML = ""
     auth!.appendChild(raw)
@@ -76,11 +76,11 @@ function insertLogout() {
   const auth = document.getElementById("authentication")
   auth!.innerHTML = ""
 
-  insertCopyId()
-  insertLogoutButton()
+  CopyId()
+  LogoutButton()
 }
 
-function insertLogoutButton() {
+function LogoutButton() {
   const auth = document.getElementById("authentication")
 
   const buttonLogout = document.createElement("button")
@@ -95,7 +95,7 @@ function insertLogoutButton() {
   auth!.appendChild(buttonLogout)
 }
 
-function insertCopyId() {
+function CopyId() {
   if (!authClient) {
     return
   }
@@ -149,8 +149,6 @@ function derivationOrigin(options: DerivationOriginOptions): string {
     throw new Error("Invalid domain")
   }
 
-  console.log(options.domain)
-
   return options.raw
     ? "https://" + options.canisterId.toString() + ".raw." + options.domain
     : "https://" + options.canisterId.toString() + "." + options.domain
diff --git a/tools/ui/src/auth/identityProvider.ts b/tools/ui/src/auth/identityProvider.ts
index 12ab34f9..1cc090aa 100644
--- a/tools/ui/src/auth/identityProvider.ts
+++ b/tools/ui/src/auth/identityProvider.ts
@@ -1 +1 @@
-export const identityProvider = "https://identity.ic0.app"
+export const identityProvider = "https://identity.internetcomputer.org"

From 6788bc1a30d35169e74d6e49643462d75cf99b16 Mon Sep 17 00:00:00 2001
From: Web3NL <samerweb3@gmail.com>
Date: Thu, 12 Oct 2023 15:18:10 +0200
Subject: [PATCH 7/9] comments and cleanup

---
 tools/ui/canister_ids.json                         | 5 +----
 tools/ui/target_test_canister/AlternativeOrigin.mo | 4 +++-
 tools/ui/target_test_canister/main.mo              | 7 +++++++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/tools/ui/canister_ids.json b/tools/ui/canister_ids.json
index f25ce9fa..016284e1 100644
--- a/tools/ui/canister_ids.json
+++ b/tools/ui/canister_ids.json
@@ -1,8 +1,5 @@
 {
   "didjs": {
-    "ic": "m4ul7-aqaaa-aaaal-qcewq-cai"
-  },
-  "target": {
-    "ic": "mvxad-wyaaa-aaaal-qcexa-cai"
+    "ic": "a4gq6-oaaaa-aaaab-qaa4q-cai"
   }
 }
\ No newline at end of file
diff --git a/tools/ui/target_test_canister/AlternativeOrigin.mo b/tools/ui/target_test_canister/AlternativeOrigin.mo
index 6fdd3f80..141430a9 100644
--- a/tools/ui/target_test_canister/AlternativeOrigin.mo
+++ b/tools/ui/target_test_canister/AlternativeOrigin.mo
@@ -3,7 +3,9 @@ import Text "mo:base/Text";
 module {
     // This should be the domain at which the Candid UI canister is serving its frontend
     // Candid UI canister id in production is `https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io`
-    // Using A test version of the Candid UI canister here
+    // See https://internetcomputer.org/docs/current/developer-docs/integrations/internet-identity/alternative-origins
+    // 
+    // Using test version of the Candid UI canister here
     let ALTERNATIVE_ORIGIN : Text = "https://m4ul7-aqaaa-aaaal-qcewq-cai.raw.icp0.io";
 
     public func responseBody() : Blob {
diff --git a/tools/ui/target_test_canister/main.mo b/tools/ui/target_test_canister/main.mo
index 73c475a4..a5b24f2a 100644
--- a/tools/ui/target_test_canister/main.mo
+++ b/tools/ui/target_test_canister/main.mo
@@ -4,6 +4,9 @@ import Text "mo:base/Text";
 import { responseBody } "./AlternativeOrigin";
 
 actor {
+    // Only this principal is allowed to call the `hello` method.
+    // Anyone can change this principal by calling the `_set_allowed_principal` method 
+    // to test the login flow.
     var allowed = Principal.fromText("oigup-gpnce-ytl3m-gkuwt-hf4yc-lci5d-ijsy5-oc4ak-kz3v2-fjbl5-mae");
 
     public func _set_allowed_principal(principal : Text) : async () {
@@ -22,6 +25,10 @@ actor {
         "Hello World!";
     };
 
+    // Both the `http_request` (query) and `http_request_update` (update) methods
+    // are implemented to 'upgrade to update' so that `/.well-known/ii-alternative-origins`
+    // response can be verified 
+    // See https://internetcomputer.org/docs/current/references/ii-spec#alternative-frontend-origins
     type HttpRequest = {
         method : Text;
         url : Text;

From 823e9239d1d0e7f7497fed11628b580c1ed5384c Mon Sep 17 00:00:00 2001
From: Web3NL <samerweb3@gmail.com>
Date: Thu, 12 Oct 2023 22:31:31 +0200
Subject: [PATCH 8/9] fix: remove target test canister from dfx.json

---
 tools/ui/dfx.json | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/tools/ui/dfx.json b/tools/ui/dfx.json
index c7478820..5fa1ceef 100644
--- a/tools/ui/dfx.json
+++ b/tools/ui/dfx.json
@@ -14,11 +14,6 @@
           "name": "candid:service"
         }
       ]
-    },
-    "target": {
-      "type": "motoko",
-      "main": "target_test_canister/main.mo",
-      "frontend": {}
     }
   },
   "version": 1

From a52ad2f54418092e62f0c1b3131333b4a0e2ba04 Mon Sep 17 00:00:00 2001
From: Web3NL <samerweb3@gmail.com>
Date: Fri, 13 Oct 2023 11:40:12 +0200
Subject: [PATCH 9/9] remove target_test_canister

---
 .../target_test_canister/AlternativeOrigin.mo | 15 ----
 tools/ui/target_test_canister/main.mo         | 68 -------------------
 2 files changed, 83 deletions(-)
 delete mode 100644 tools/ui/target_test_canister/AlternativeOrigin.mo
 delete mode 100644 tools/ui/target_test_canister/main.mo

diff --git a/tools/ui/target_test_canister/AlternativeOrigin.mo b/tools/ui/target_test_canister/AlternativeOrigin.mo
deleted file mode 100644
index 141430a9..00000000
--- a/tools/ui/target_test_canister/AlternativeOrigin.mo
+++ /dev/null
@@ -1,15 +0,0 @@
-import Text "mo:base/Text";
-
-module {
-    // This should be the domain at which the Candid UI canister is serving its frontend
-    // Candid UI canister id in production is `https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io`
-    // See https://internetcomputer.org/docs/current/developer-docs/integrations/internet-identity/alternative-origins
-    // 
-    // Using test version of the Candid UI canister here
-    let ALTERNATIVE_ORIGIN : Text = "https://m4ul7-aqaaa-aaaal-qcewq-cai.raw.icp0.io";
-
-    public func responseBody() : Blob {
-        let body = "{ \"alternativeOrigins\": [\"" # ALTERNATIVE_ORIGIN # "\"] }";
-        Text.encodeUtf8(body);
-    };
-};
diff --git a/tools/ui/target_test_canister/main.mo b/tools/ui/target_test_canister/main.mo
deleted file mode 100644
index a5b24f2a..00000000
--- a/tools/ui/target_test_canister/main.mo
+++ /dev/null
@@ -1,68 +0,0 @@
-import Principal "mo:base/Principal";
-import Error "mo:base/Error";
-import Text "mo:base/Text";
-import { responseBody } "./AlternativeOrigin";
-
-actor {
-    // Only this principal is allowed to call the `hello` method.
-    // Anyone can change this principal by calling the `_set_allowed_principal` method 
-    // to test the login flow.
-    var allowed = Principal.fromText("oigup-gpnce-ytl3m-gkuwt-hf4yc-lci5d-ijsy5-oc4ak-kz3v2-fjbl5-mae");
-
-    public func _set_allowed_principal(principal : Text) : async () {
-        allowed := Principal.fromText(principal);
-    };
-
-    public query func _get_allowed_principal() : async Text {
-        Principal.toText(allowed);
-    };
-
-    public shared query ({ caller }) func hello() : async Text {
-        if (caller != allowed) {
-            throw Error.reject("Unauthorized");
-        };
-
-        "Hello World!";
-    };
-
-    // Both the `http_request` (query) and `http_request_update` (update) methods
-    // are implemented to 'upgrade to update' so that `/.well-known/ii-alternative-origins`
-    // response can be verified 
-    // See https://internetcomputer.org/docs/current/references/ii-spec#alternative-frontend-origins
-    type HttpRequest = {
-        method : Text;
-        url : Text;
-        headers : [(Text, Text)];
-        body : Blob;
-        certificate_version : ?Nat16;
-    };
-
-    type HttpResponse = {
-        status_code : Nat16;
-        headers : [(Text, Text)];
-        body : Blob;
-        upgrade : ?Bool;
-    };
-
-    public query func http_request(req : HttpRequest) : async HttpResponse {
-        {
-            status_code = 200;
-            headers = [];
-            upgrade = ?true;
-            body = Text.encodeUtf8("");
-        };
-    };
-
-    public func http_request_update(req : HttpRequest) : async HttpResponse {
-        if (req.url == "/.well-known/ii-alternative-origins") {
-            return {
-                status_code = 200;
-                headers = [("Access-Control-Allow-Origin", "https://identity.ic0.app")];
-                body = responseBody();
-                upgrade = ?false;
-            };
-        } else {
-            throw Error.reject("Not found");
-        };
-    };
-};