Fix ICRC-29 heartbeat in Safari (dfinity#3620)

Fix ICRC-29 heartbeat in Safari and remove signer-js deps from II.

# Changes

- Move `HeartbeatServer` implementation from signer-js into II.
- Add `"wake-up-client"` message workaround for Safari to it's
implementation.
- Remove other usages of signer-js so the dependency can be removed from
II.
- Update test-app to latest signer-js version.

# Tests

Manually verified that direct OpenID flow now works as expected in
Safari.

Author: sea-snake

demos/test-app/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@icp-sdk/core": "*",
-    "@slide-computer/signer": "*",
-    "@slide-computer/signer-web": "*",
+    "@slide-computer/signer": "^4.2.0",
+    "@slide-computer/signer-web": "^4.2.0",
     "@noble/hashes": "*",
     "buffer": "^6.0.3",
     "jose": "^5.1.2",
@@ -21,6 +21,7 @@
   "devDependencies": {
     "@dfinity/internet-identity-vc-api": "*",
     "@dfinity/internet-identity-vite-plugins": "*",
+    "@icp-sdk/core": "^4.2.3",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.0",

demos/test-app/src/auth.ts

@@ -6,7 +6,7 @@ import {
   SignedDelegation,
 } from "@icp-sdk/core/identity";
 import { Principal } from "@icp-sdk/core/principal";
-import { fromBase64, Signer } from "@slide-computer/signer";
+import { Signer } from "@slide-computer/signer";
 import { PostMessageTransport } from "@slide-computer/signer-web";
 
 // The type of response from II as per the spec
@@ -85,8 +85,10 @@ export const authWithII = async ({
                     [
                       key,
                       {
-                        value: new Uint8Array(fromBase64(value)),
-                        signature: new Uint8Array(fromBase64(signature)),
+                        // @ts-ignore Not known in TS types yet but supported in all browsers
+                        value: Uint8Array.fromBase64(value),
+                        // @ts-ignore Not known in TS types yet but supported in all browsers
+                        signature: Uint8Array.fromBase64(signature),
                         expiration: BigInt(expiration),
                       },
                     ] as [string, CertifiedAttribute],
@@ -96,7 +98,7 @@ export const authWithII = async ({
         : Promise.resolve({});
     const delegationPromise = signer.delegation({
       maxTimeToLive,
-      publicKey: new Uint8Array(sessionIdentity.getPublicKey().toDer()).buffer,
+      publicKey: new Uint8Array(sessionIdentity.getPublicKey().toDer()),
     });
     const [delegation, certifiedAttributes] = await Promise.all([
       delegationPromise,

demos/test-app/src/index.tsx

@@ -397,8 +397,10 @@ const init = async () => {
 
   updateAlternativeOriginsBtn.onclick = async () => {
     const canisterId = Principal.fromText(readCanisterId());
-    const httpAgent = new HttpAgent({ host: hostUrlEl.value });
-    await httpAgent.fetchRootKey();
+    const httpAgent = await HttpAgent.create({
+      host: hostUrlEl.value,
+      shouldFetchRootKey: true,
+    });
     const actor = Actor.createActor(idlFactory, {
       agent: httpAgent,
       canisterId,
@@ -430,11 +432,11 @@ window.addEventListener("DOMContentLoaded", init);
 
 whoamiBtn.addEventListener("click", async () => {
   const canisterId = Principal.fromText(readCanisterId());
-  const agent = new HttpAgent({
+  const agent = await HttpAgent.create({
     host: hostUrlEl.value,
     identity: delegationIdentity,
+    shouldFetchRootKey: true,
   });
-  await agent.fetchRootKey();
   const actor = Actor.createActor(idlFactory, {
     agent,
     canisterId,

package-lock.json

@@ -95,8 +95,6 @@
     "@lingui/core": "^5.5.1",
     "@lucide/svelte": "^0.553.0",
     "@noble/hashes": "^1.8.0",
-    "@slide-computer/signer": "^4.0.0",
-    "@slide-computer/signer-web": "^4.0.0",
     "bip39": "^3.0.4",
     "borc": "^2.1.1",
     "buffer": "^6.0.3",
@@ -124,4 +122,4 @@
     "src/vite-plugins",
     "src/sig-verifier-js"
   ]
-}
+}

package.json

@@ -8,10 +8,6 @@ import type {
 } from "$lib/utils/transport/utils";
 import { PostMessageTransport } from "$lib/utils/transport/postMessage";
 import { LegacyTransport } from "$lib/utils/transport/legacy";
-import type {
-  PermissionScope,
-  SupportedStandard,
-} from "@slide-computer/signer";
 import { canisterConfig, getPrimaryOrigin } from "$lib/globals";
 
 type ChannelStore = Readable<Channel | undefined> & {
@@ -34,7 +30,7 @@ const getTransports = (): Transport[] => {
   ];
 };
 
-const supportedStandards: SupportedStandard[] = [
+const supportedStandards = [
   {
     name: "ICRC-25",
     url: "https://github.com/dfinity/wg-identity-authentication/blob/main/topics/icrc_25_signer_interaction_standard.md",
@@ -52,7 +48,7 @@ const supportedStandards: SupportedStandard[] = [
     url: "https://github.com/dfinity/wg-identity-authentication/blob/main/topics/icrc_95_derivationorigin.md",
   },
 ];
-const scopes: PermissionScope[] = [
+const scopes = [
   {
     method: "icrc34_delegation",
   },