Refactor single authorize page into multiple pages and stores. (#3062)

* WIP

* WIP

* Refactor single authorize page into multiple pages and stores.

* Refactor single authorize page into multiple pages and stores.

* Refactor single authorize page into multiple pages and stores.

* Fix create account

* Fix create account

* Fix account creation focus management.

* Autofocus continue button.

* Fix focus styles

* Fixes.

* Fixes.

* Fixes.

* Fixes.

* Fixes.

Author: sea-snake

src/frontend/src/hooks.client.ts

@@ -1,9 +1,12 @@
-import type { ServerInit } from "@sveltejs/kit";
+import type { ClientInit } from "@sveltejs/kit";
 import featureFlags from "$lib/state/featureFlags";
+import { authenticationStore } from "$lib/stores/authentication.store";
+import { sessionStore } from "$lib/stores/session.store";
+import { initGlobals, canisterId, agentOptions } from "$lib/globals";
 
 const FEATURE_FLAG_PREFIX = "feature_flag_";
 
-export const init: ServerInit = () => {
+const overrideFeatureFlags = () => {
   // Override feature flags based on search params before any other code
   // including other hooks runs that might depend on these feature flags.
   //
@@ -36,3 +39,12 @@ export const init: ServerInit = () => {
   // not using the method supplied by SvelteKit, this can be safely ignored.
   window.history.replaceState(undefined, "", url);
 };
+
+export const init: ClientInit = async () => {
+  overrideFeatureFlags();
+  await initGlobals();
+  await Promise.all([
+    sessionStore.init({ canisterId, agentOptions }),
+    authenticationStore.init({ canisterId, agentOptions }),
+  ]);
+};

src/frontend/src/hooks.ts

@@ -16,6 +16,6 @@ export const reroute: Reroute = ({ url }) => {
     return "/vc-flow/index";
   }
   if (url.hash === "#authorize") {
-    return get(DISCOVERABLE_PASSKEY_FLOW) ? "/new-authorize" : "/authorize";
+    return get(DISCOVERABLE_PASSKEY_FLOW) ? "/authorize" : "/legacy/authorize";
   }
 };

src/frontend/src/lib/components/UI/Dialog.svelte

@@ -59,7 +59,7 @@
       ? "fixed top-auto bottom-0 mx-auto"
       : "m-auto max-[460px]:m-0 max-[460px]:min-h-full",
   ]}
-  transition:transitionFn|global
+  transition:transitionFn
   onoutrostart={fadeOutBackDrop}
   {...props}
 >

src/frontend/src/lib/globals.ts

@@ -0,0 +1,36 @@
+import { Principal } from "@dfinity/principal";
+import {
+  type _SERVICE,
+  InternetIdentityInit,
+} from "$lib/generated/internet_identity_types";
+import { readCanisterConfig, readCanisterId } from "$lib/utils/init";
+import {
+  Actor,
+  ActorSubclass,
+  HttpAgent,
+  HttpAgentOptions,
+} from "@dfinity/agent";
+import { inferHost } from "$lib/utils/iiConnection";
+import { idlFactory as internet_identity_idl } from "$lib/generated/internet_identity_idl";
+import { features } from "$lib/legacy/features";
+
+export let canisterId: Principal;
+export let canisterConfig: InternetIdentityInit;
+export let agentOptions: HttpAgentOptions;
+export let anonymousAgent: HttpAgent;
+export let anonymousActor: ActorSubclass<_SERVICE>;
+
+export const initGlobals = async () => {
+  canisterId = Principal.fromText(readCanisterId());
+  canisterConfig = readCanisterConfig();
+  agentOptions = {
+    host: inferHost(),
+    shouldFetchRootKey:
+      features.FETCH_ROOT_KEY || (canisterConfig.fetch_root_key[0] ?? false),
+  };
+  anonymousAgent = await HttpAgent.create(agentOptions);
+  anonymousActor = Actor.createActor<_SERVICE>(internet_identity_idl, {
+    agent: anonymousAgent,
+    canisterId,
+  });
+};

src/frontend/src/lib/stores/authentication.store.ts

@@ -0,0 +1,84 @@
+import { type Readable, derived, writable } from "svelte/store";
+import { DelegationIdentity } from "@dfinity/identity";
+import { isNullish, nonNullish } from "@dfinity/utils";
+import {
+  Actor,
+  ActorSubclass,
+  HttpAgent,
+  HttpAgentOptions,
+} from "@dfinity/agent";
+import { Principal } from "@dfinity/principal";
+import type { _SERVICE } from "$lib/generated/internet_identity_types";
+import { idlFactory as internet_identity_idl } from "$lib/generated/internet_identity_idl";
+
+export interface Authenticated {
+  identityNumber: bigint;
+  identity: DelegationIdentity;
+  agent: HttpAgent;
+  actor: ActorSubclass<_SERVICE>;
+}
+
+type AuthenticationStore = Readable<Authenticated | undefined> & {
+  init: (params: {
+    canisterId: Principal;
+    agentOptions: HttpAgentOptions;
+  }) => Promise<void>;
+  set: (value: Omit<Authenticated, "agent" | "actor">) => void;
+  reset: () => void;
+};
+
+const internalStore = writable<{
+  authenticated?: Omit<Authenticated, "agent" | "actor">;
+  initialized?: Pick<Authenticated, "agent" | "actor">;
+}>();
+
+export const authenticationStore: AuthenticationStore = {
+  init: async ({ canisterId, agentOptions }) => {
+    const agent = await HttpAgent.create(agentOptions);
+    const actor = Actor.createActor<_SERVICE>(internet_identity_idl, {
+      agent,
+      canisterId,
+    });
+    internalStore.set({ initialized: { agent, actor } });
+  },
+  subscribe: derived(internalStore, ({ authenticated, initialized }) => {
+    if (isNullish(initialized)) {
+      throw new Error("Not initialized");
+    }
+    if (isNullish(authenticated)) {
+      return undefined;
+    }
+    return { ...authenticated, ...initialized };
+  }).subscribe,
+  set: (authenticated) =>
+    internalStore.update(({ initialized }) => {
+      if (isNullish(initialized)) {
+        throw new Error("Not initialized");
+      }
+      initialized.agent.replaceIdentity(authenticated.identity);
+      return { authenticated, initialized };
+    }),
+  reset: () =>
+    internalStore.update(({ initialized }) => {
+      if (isNullish(initialized)) {
+        throw new Error("Not initialized");
+      }
+      initialized.agent.invalidateIdentity();
+      return { authenticated: undefined, initialized };
+    }),
+};
+
+export const authenticatedStore: Readable<Authenticated> = derived(
+  authenticationStore,
+  (authenticated) => {
+    if (isNullish(authenticated)) {
+      throw new Error("Not authenticated");
+    }
+    return authenticated;
+  },
+);
+
+export const isAuthenticatedStore: Readable<boolean> = derived(
+  authenticationStore,
+  (authenticated) => nonNullish(authenticated),
+);

src/frontend/src/lib/stores/authorization.store.ts

@@ -0,0 +1,110 @@
+import { type Readable, derived, writable, get } from "svelte/store";
+import { isNullish } from "@dfinity/utils";
+import type { InternetIdentityInit } from "$lib/generated/internet_identity_types";
+import { Principal } from "@dfinity/principal";
+import {
+  authenticationProtocol,
+  AuthRequest,
+} from "$lib/flows/authorize/postMessageInterface";
+import { authenticatedStore } from "$lib/stores/authentication.store";
+import { Connection } from "$lib/utils/iiConnection";
+import { fetchDelegation } from "$lib/flows/authorize/fetchDelegation";
+
+export type AuthorizationContext = {
+  authRequest: AuthRequest;
+  requestOrigin: string;
+};
+
+export type AuthorizationStatus =
+  | "init"
+  | "orphan"
+  | "closed"
+  | "waiting"
+  | "validating"
+  | "invalid"
+  | "authenticating"
+  | "success"
+  | "failure";
+
+type AuthorizationStore = Readable<{
+  context?: AuthorizationContext;
+  status: AuthorizationStatus;
+}> & {
+  init: (params: {
+    canisterId: Principal;
+    canisterConfig: InternetIdentityInit;
+  }) => Promise<void>;
+  authorize: (accountNumber: bigint | undefined) => Promise<void>;
+};
+
+const internalStore = writable<{
+  context?: AuthorizationContext;
+  status: AuthorizationStatus;
+}>({ status: "init" });
+
+let authorize: (accountNumber: bigint | undefined) => Promise<void>;
+
+export const authorizationStore: AuthorizationStore = {
+  init: async ({ canisterId, canisterConfig }) => {
+    const status = await authenticationProtocol({
+      authenticate: (context) => {
+        console.log("authenticate", context);
+        internalStore.set({ context, status: "authenticating" });
+        return new Promise((resolve) => {
+          authorize = async (_accountNumber) => {
+            // TODO: use prepare/get account delegation instead of iiConnection
+            const { identityNumber, identity } = get(authenticatedStore);
+            const { connection } = await new Connection(
+              canisterId.toText(),
+              canisterConfig,
+            ).fromDelegationIdentity(identityNumber, identity);
+            const derivationOrigin =
+              context.authRequest.derivationOrigin ?? context.requestOrigin;
+            const result = await fetchDelegation({
+              connection,
+              derivationOrigin,
+              publicKey: context.authRequest.sessionPublicKey,
+              maxTimeToLive: context.authRequest.maxTimeToLive,
+            });
+            if ("error" in result) {
+              resolve({ kind: "failure", text: "Couldn't fetch delegation" });
+              return;
+            }
+            const [userKey, parsed_signed_delegation] = result;
+            resolve({
+              kind: "success",
+              delegations: [parsed_signed_delegation],
+              userPublicKey: new Uint8Array(userKey),
+              // This is a authnMethod forwarded to the app that requested authorization.
+              // We don't want to leak which authnMethod was used.
+              authnMethod: "passkey",
+            });
+          };
+        });
+      },
+      onProgress: (status) =>
+        internalStore.update((value) => ({ ...value, status })),
+    });
+    internalStore.update((value) => ({ ...value, status }));
+  },
+  subscribe: (...args) => internalStore.subscribe(...args),
+  authorize: (accountNumber) => {
+    if (isNullish(authorize)) {
+      throw new Error("Not ready yet for authorization");
+    }
+    return authorize(accountNumber);
+  },
+};
+
+export const authorizationContextStore: Readable<AuthorizationContext> =
+  derived(authorizationStore, ({ context }) => {
+    if (isNullish(context)) {
+      throw new Error("Authorization context is not available yet");
+    }
+    return context;
+  });
+
+export const authorizationStatusStore: Readable<AuthorizationStatus> = derived(
+  internalStore,
+  ({ status }) => status,
+);