From 5be80b908e4dd50e0d3c8ad5a1dd4774bf60f83c Mon Sep 17 00:00:00 2001
From: Samer <samerweb3@gmail.com>
Date: Tue, 17 Oct 2023 20:58:32 +0200
Subject: [PATCH] Feat: authenticated calls in Candid UI (#475)

* initial setup

* feat: II login

* test: add allowed principal setter and getter in target canister

* fix: deactivate idle timeout

Co-authored-by: Ryan Vandersmith <ryanvandersmith@gmail.com>

* add: domain form

* change default identity provider

* comments and cleanup

* fix: remove target test canister from dfx.json

* remove target_test_canister

---------

Co-authored-by: Ryan Vandersmith <ryanvandersmith@gmail.com>
Co-authored-by: Yan Chen <48968912+chenyan-dfinity@users.noreply.github.com>
---
 tools/ui/Cargo.lock                   |   2 +-
 tools/ui/package-lock.json            | 270 ++++++++++++++++++++++++--
 tools/ui/package.json                 |   2 +
 tools/ui/src/auth/auth.ts             | 155 +++++++++++++++
 tools/ui/src/auth/icons.ts            |  21 ++
 tools/ui/src/auth/identityProvider.ts |   1 +
 tools/ui/src/candid.css               |   6 +-
 tools/ui/src/candid.html              |   5 +-
 tools/ui/src/candid.ts                |  16 ++
 tools/ui/src/index.ts                 |  11 +-
 10 files changed, 473 insertions(+), 16 deletions(-)
 create mode 100644 tools/ui/src/auth/auth.ts
 create mode 100644 tools/ui/src/auth/icons.ts
 create mode 100644 tools/ui/src/auth/identityProvider.ts

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/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/auth.ts b/tools/ui/src/auth/auth.ts
new file mode 100644
index 00000000..d6bdfe09
--- /dev/null
+++ b/tools/ui/src/auth/auth.ts
@@ -0,0 +1,155 @@
+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 = ""
+
+  CopyId()
+  LogoutButton()
+}
+
+function LogoutButton() {
+  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 CopyId() {
+  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")
+  }
+
+  return options.raw
+    ? "https://" + options.canisterId.toString() + ".raw." + options.domain
+    : "https://" + options.canisterId.toString() + "." + options.domain
+}
diff --git a/tools/ui/src/auth/icons.ts b/tools/ui/src/auth/icons.ts
new file mode 100644
index 00000000..a40efc70
--- /dev/null
+++ b/tools/ui/src/auth/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/auth/identityProvider.ts b/tools/ui/src/auth/identityProvider.ts
new file mode 100644
index 00000000..1cc090aa
--- /dev/null
+++ b/tools/ui/src/auth/identityProvider.ts
@@ -0,0 +1 @@
+export const identityProvider = "https://identity.internetcomputer.org"
diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index 4aac24eb..a4c62720 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -47,9 +47,12 @@
   width: 100%;
   text-align: center;
   font-size: var(--font-md);
-  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 {
@@ -184,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/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..4b025cf6 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,19 @@ 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({
+    idleOptions: {
+      disableIdle: true,
+      disableDefaultIdleCallback: true,
+    },
+  }))
+  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/index.ts b/tools/ui/src/index.ts
index 7d9f20c5..083ee4e9 100644
--- a/tools/ui/src/index.ts
+++ b/tools/ui/src/index.ts
@@ -1,5 +1,9 @@
 import { fetchActor, render, getCycles, getNames } from "./candid";
+import { renderAuth } from "./auth/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);
@@ -37,7 +41,8 @@ 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();
     const names = await getNames(canisterId);
     render(canisterId, actor, profiling);
     const app = document.getElementById("app");
@@ -65,3 +70,7 @@ window.addEventListener("popstate", (event) => {
     window.location.reload();
   }
 });
+
+export async function refresh_actor(canisterId: Principal) {
+  actor = await fetchActor(canisterId);
+};