From 0c5065e35a85a674ab085f910adf586362c15100 Mon Sep 17 00:00:00 2001
From: Frederik Rothenberger <frederik.rothenberger@dfinity.org>
Date: Wed, 2 Oct 2024 17:19:37 +0200
Subject: [PATCH] Wip

---
 .../components/authenticateBox/errorToast.ts  |  28 +-
 .../src/components/authenticateBox/index.ts   |  21 +-
 src/frontend/src/flows/register/captcha.ts    | 127 +++++----
 src/frontend/src/flows/register/index.ts      | 188 +++++++------
 src/frontend/src/utils/authnMethodData.ts     |  83 ++++++
 src/frontend/src/utils/iiConnection.ts        | 246 +++++++++++++++++-
 src/showcase/src/flows.ts                     |  28 +-
 7 files changed, 554 insertions(+), 167 deletions(-)
 create mode 100644 src/frontend/src/utils/authnMethodData.ts

diff --git a/src/frontend/src/components/authenticateBox/errorToast.ts b/src/frontend/src/components/authenticateBox/errorToast.ts
index c2ae5ba639..a7eca778e6 100644
--- a/src/frontend/src/components/authenticateBox/errorToast.ts
+++ b/src/frontend/src/components/authenticateBox/errorToast.ts
@@ -11,7 +11,7 @@ type KindToError<K extends FlowError["kind"]> = Omit<
   "kind"
 >;
 
-// Makes the error human readable
+// Makes the error human-readable
 const clarifyError: {
   [K in FlowError["kind"]]: (err: KindToError<K>) => {
     title: string;
@@ -56,6 +56,32 @@ const clarifyError: {
     message:
       "The Dapp you are authenticating to does not allow PIN identities and you only have a PIN identity. Please retry using a Passkey: open a new Internet Identity page, add a passkey and retry.",
   }),
+  alreadyInProgress: () => ({
+    title: "Registration is already in progress",
+    message: "Registration has already been started on this session.",
+  }),
+  rateLimitExceeded: () => ({
+    title: "Registration rate limit exceeded",
+    message:
+      "Internet Identity is under heavy load. Too many registrations. Please try again later.",
+  }),
+  invalidCaller: () => ({
+    title: "Registration is not allowed using the anonymous identity",
+    message:
+      "Registration was attempted using the anonymous identity which is not allowed.",
+  }),
+  invalidAuthnMethod: (err) => ({
+    title: "Invalid authentication method",
+    message: `Invalid authentication method: ${err.message}.`,
+  }),
+  noRegistrationFlow: () => ({
+    title: "Registration flow timed out",
+    message: "Registration flow timed out. Please restart.",
+  }),
+  unexpectedCall: (err) => ({
+    title: "Unexpected call",
+    message: `Unexpected call: expected next step "${err.nextStep.step}"`,
+  }),
 };
 
 export const flowErrorToastTemplate = <K extends FlowError["kind"]>(
diff --git a/src/frontend/src/components/authenticateBox/index.ts b/src/frontend/src/components/authenticateBox/index.ts
index d6641451c3..998549563f 100644
--- a/src/frontend/src/components/authenticateBox/index.ts
+++ b/src/frontend/src/components/authenticateBox/index.ts
@@ -23,14 +23,20 @@ import {
 import { I18n } from "$src/i18n";
 import { getAnchors, setAnchorUsed } from "$src/storage";
 import {
+  AlreadyInProgress,
   ApiError,
   AuthFail,
   AuthenticatedConnection,
   BadChallenge,
   BadPin,
   Connection,
+  InvalidAuthnMethod,
+  InvalidCaller,
   LoginSuccess,
+  NoRegistrationFlow,
+  RateLimitExceeded,
   RegisterNoSpace,
+  UnexpectedCall,
   UnknownUser,
   WebAuthnFailed,
   bufferEqual,
@@ -80,7 +86,7 @@ export const authenticateBox = async ({
   newAnchor: boolean;
   authnMethod: "pin" | "passkey" | "recovery";
 }> => {
-  const promptAuth = (autoSelectIdentity?: bigint) =>
+  const promptAuth = async (autoSelectIdentity?: bigint) =>
     authenticateBoxFlow<PinIdentityMaterial>({
       i18n,
       templates,
@@ -89,7 +95,7 @@ export const authenticateBox = async ({
       loginPinIdentityMaterial: (opts) =>
         loginPinIdentityMaterial({ ...opts, connection }),
       recover: () => useRecovery(connection),
-      registerFlowOpts: getRegisterFlowOpts({
+      registerFlowOpts: await getRegisterFlowOpts({
         connection,
         allowPinAuthentication,
       }),
@@ -223,10 +229,7 @@ export const authenticateBoxFlow = async <I>({
         newAnchor: true;
         authnMethod: "pin" | "passkey" | "recovery";
       })
-    | BadChallenge
-    | ApiError
-    | AuthFail
-    | RegisterNoSpace
+    | FlowError
     | { tag: "canceled" }
   > => {
     const result2 = await registerFlow(registerFlowOpts);
@@ -333,6 +336,12 @@ export type FlowError =
   | WebAuthnFailed
   | UnknownUser
   | ApiError
+  | InvalidCaller
+  | AlreadyInProgress
+  | RateLimitExceeded
+  | NoRegistrationFlow
+  | UnexpectedCall
+  | InvalidAuthnMethod
   | RegisterNoSpace;
 
 export const handleLoginFlowResult = async <E>(
diff --git a/src/frontend/src/flows/register/captcha.ts b/src/frontend/src/flows/register/captcha.ts
index de85eb2ca1..370b2b81d5 100644
--- a/src/frontend/src/flows/register/captcha.ts
+++ b/src/frontend/src/flows/register/captcha.ts
@@ -1,23 +1,18 @@
-import { Challenge } from "$generated/internet_identity_types";
 import { mainWindow } from "$src/components/mainWindow";
 import { DynamicKey, I18n } from "$src/i18n";
+import { WrongCaptchaSolution } from "$src/utils/iiConnection";
 import { mount, renderPage, withRef } from "$src/utils/lit-html";
 import { Chan } from "$src/utils/utils";
+import { isNullish, nonNullish } from "@dfinity/utils";
 import { TemplateResult, html } from "lit-html";
 import { asyncReplace } from "lit-html/directives/async-replace.js";
 import { Ref, createRef, ref } from "lit-html/directives/ref.js";
-
-import { isNullish, nonNullish } from "@dfinity/utils";
 import copyJson from "./captcha.json";
 
-// A symbol that we can differentiate from generic `T` types
-// when verifying the challenge
-export const badChallenge: unique symbol = Symbol("ii.bad_challenge");
-
 export const promptCaptchaTemplate = <T>({
   cancel,
-  requestChallenge,
-  verifyChallengeChars,
+  captcha_png_base64,
+  checkCaptcha,
   onContinue,
   i18n,
   stepper,
@@ -25,12 +20,9 @@ export const promptCaptchaTemplate = <T>({
   scrollToTop = false,
 }: {
   cancel: () => void;
-  requestChallenge: () => Promise<Challenge>;
-  verifyChallengeChars: (cr: {
-    chars: string;
-    challenge: Challenge;
-  }) => Promise<T | typeof badChallenge>;
-  onContinue: (result: T) => void;
+  captcha_png_base64: string;
+  checkCaptcha: (solution: string) => Promise<Exclude<T, WrongCaptchaSolution> | WrongCaptchaSolution>;
+  onContinue: (result: Exclude<T, WrongCaptchaSolution>) => void;
   i18n: I18n;
   stepper: TemplateResult;
   focus?: boolean;
@@ -62,7 +54,7 @@ export const promptCaptchaTemplate = <T>({
   // The various states the component can inhabit
   type State =
     | { status: "requesting" }
-    | { status: "prompting"; challenge: Challenge }
+    | { status: "prompting"; captcha_png_base64: string }
     | { status: "verifying" }
     | { status: "bad" };
 
@@ -76,7 +68,7 @@ export const promptCaptchaTemplate = <T>({
       state.status === "requesting"
         ? spinnerImg
         : state.status === "prompting"
-        ? captchaImg(state.challenge.png_base64)
+        ? captchaImg(state.captcha_png_base64)
         : Chan.unchanged,
     def: spinnerImg,
   });
@@ -110,57 +102,55 @@ export const promptCaptchaTemplate = <T>({
         ? (e) => {
             e.preventDefault();
             e.stopPropagation();
-            doVerify(state.challenge);
+            doVerify();
           }
         : undefined
   );
 
   const nextDisabled: Chan<boolean> = next.map(isNullish);
-  const nextCaption: Chan<DynamicKey> = state.map(({ status }) =>
-    status === "requesting"
-      ? copy.generating
-      : status === "verifying"
-      ? copy.verifying
-      : copy.next
-  );
-
-  // The "retry" button behavior
-  const retry: Chan<(() => Promise<void>) | undefined> = state.map((state) =>
-    state.status === "prompting" || state.status === "bad" ? doRetry : undefined
-  );
-  const retryDisabled: Chan<boolean> = retry.map(isNullish);
-
-  // On retry, request a new challenge
-  const doRetry = async () => {
-    state.send({ status: "requesting" });
-    const challenge = await requestChallenge();
-    state.send({ status: "prompting", challenge });
-  };
+  const nextCaption: Chan<DynamicKey> = state.map(({ status }) => {
+    console.log("next caption", status);
+    if (status === "requesting") {
+      return copy.generating;
+    }
+    if (status === "verifying") {
+      return copy.verifying;
+    }
+    console.log("copy next", copy.next);
+    return copy.next;
+  });
 
+  // On retry, prompt with a new challenge
   // On verification, check the chars and either continue (on good challenge)
   // or go to "bad" state
-  const doVerify = (challenge: Challenge) => {
+  const doVerify = () => {
     state.send({ status: "verifying" });
     void withRef(input, async (input) => {
-      const res = await verifyChallengeChars({
-        chars: input.value,
-        challenge,
-      });
-      if (res === badChallenge) {
+      const res = await checkCaptcha(input.value);
+      if (isBadCaptchaResult(res)) {
+        console.log("bad captcha");
         // on a bad challenge, show some error, clear the input & focus
         // and retry
         state.send({ status: "bad" });
         input.value = "";
         input.focus();
-        void doRetry();
-      } else {
-        onContinue(res);
+        console.log("sending prompting")
+        state.send({ status: "requesting", });
+        state.send({
+          status: "prompting",
+          captcha_png_base64: res.new_captcha_png_base64,
+        });
+        return;
       }
+      onContinue(res);
     });
   };
 
   // Kickstart everything
-  void doRetry();
+  void state.send({
+    status: "prompting",
+    captcha_png_base64: captcha_png_base64,
+  });
 
   // A "resize" handler than ensures that the captcha is centered when after
   // the page is resized. This is particularly useful on mobile devices, where
@@ -192,15 +182,6 @@ export const promptCaptchaTemplate = <T>({
           class="c-input c-input--icon"
         >
           ${asyncReplace(img)}
-          <i
-            tabindex="0"
-            id="seedCopy"
-            class="c-button__icon"
-            @click=${asyncReplace(retry)}
-            ?disabled=${asyncReplace(retryDisabled)}
-          >
-            <span>${copy.retry}</span>
-          </i>
         </div>
         <label>
           <strong class="t-strong">${copy.instructions}</strong>
@@ -257,23 +238,20 @@ export function promptCaptchaPage<T>(
 }
 
 export const promptCaptcha = <T>({
-  createChallenge,
+  captcha_png_base64,
   stepper,
-  register,
+  checkCaptcha,
 }: {
-  createChallenge: () => Promise<Challenge>;
+  captcha_png_base64: string;
   stepper: TemplateResult;
-  register: (cr: {
-    chars: string;
-    challenge: Challenge;
-  }) => Promise<T | typeof badChallenge>;
-}): Promise<T | { tag: "canceled" }> => {
+  checkCaptcha: (solution: string) => Promise<Exclude<T, WrongCaptchaSolution> | WrongCaptchaSolution>;
+}): Promise<Exclude<T, WrongCaptchaSolution> | "canceled"> => {
   return new Promise((resolve) => {
     const i18n = new I18n();
-    promptCaptchaPage({
-      verifyChallengeChars: register,
-      requestChallenge: () => createChallenge(),
-      cancel: () => resolve({ tag: "canceled" }),
+    promptCaptchaPage<T>({
+      cancel: () => resolve("canceled"),
+      captcha_png_base64,
+      checkCaptcha,
       onContinue: resolve,
       i18n,
       stepper,
@@ -283,6 +261,17 @@ export const promptCaptcha = <T>({
   });
 };
 
+const isBadCaptchaResult = <T>(
+  res: Exclude<T, WrongCaptchaSolution> | WrongCaptchaSolution
+): res is WrongCaptchaSolution => {
+  return (
+    nonNullish(res) &&
+    typeof res === "object" &&
+    "kind" in res &&
+    res.kind === "wrongCaptchaSolution"
+  );
+};
+
 // Returns a function that returns `first` on the first call,
 // and values returned by `f()` from the second call on.
 export function precomputeFirst<T>(f: () => T): () => T {
diff --git a/src/frontend/src/flows/register/index.ts b/src/frontend/src/flows/register/index.ts
index ebba1b6472..2a33b7cbd0 100644
--- a/src/frontend/src/flows/register/index.ts
+++ b/src/frontend/src/flows/register/index.ts
@@ -1,8 +1,4 @@
-import {
-  Challenge,
-  CredentialId,
-  KeyType,
-} from "$generated/internet_identity_types";
+import { AuthnMethodData } from "$generated/internet_identity_types";
 import { withLoader } from "$src/components/loader";
 import {
   PinIdentityMaterial,
@@ -16,43 +12,73 @@ import { registerStepper } from "$src/flows/register/stepper";
 import { registerDisabled } from "$src/flows/registerDisabled";
 import { I18n } from "$src/i18n";
 import { setAnchorUsed } from "$src/storage";
-import { authenticatorAttachmentToKeyType } from "$src/utils/authenticatorAttachment";
 import {
+  passkeyAuthnMethodData,
+  pinAuthnMethodData,
+} from "$src/utils/authnMethodData";
+import {
+  AlreadyInProgress,
   ApiError,
-  AuthFail,
-  BadChallenge,
   Connection,
   IIWebAuthnIdentity,
+  InvalidAuthnMethod,
+  InvalidCaller,
   LoginSuccess,
+  NoRegistrationFlow,
+  RateLimitExceeded,
   RegisterNoSpace,
+  RegistrationFlowStepSuccess,
+  UnexpectedCall,
+  WrongCaptchaSolution,
 } from "$src/utils/iiConnection";
 import { SignIdentity } from "@dfinity/agent";
 import { ECDSAKeyIdentity } from "@dfinity/identity";
 import { nonNullish } from "@dfinity/utils";
 import { TemplateResult } from "lit-html";
 import type { UAParser } from "ua-parser-js";
-import { badChallenge, precomputeFirst, promptCaptcha } from "./captcha";
+import { precomputeFirst, promptCaptcha } from "./captcha";
 import { displayUserNumberWarmup } from "./finish";
 import { savePasskeyOrPin } from "./passkey";
 
-/** Registration (anchor creation) flow for new users */
+/** Registration (identity creation) flow for new users */
 export const registerFlow = async ({
-  createChallenge: createChallenge_,
-  register,
+  identityRegistrationStart,
+  checkCaptcha,
+  identityRegistrationFinish,
   storePinIdentity,
   registrationAllowed,
   pinAllowed,
   uaParser,
 }: {
-  createChallenge: () => Promise<Challenge>;
-  register: (opts: {
-    alias: string;
+  identityRegistrationStart: () => Promise<
+    | RegistrationFlowStepSuccess
+    | ApiError
+    | InvalidCaller
+    | AlreadyInProgress
+    | RateLimitExceeded
+  >;
+  checkCaptcha: (
+    captchaSolution: string
+  ) => Promise<
+    | RegistrationFlowStepSuccess
+    | ApiError
+    | NoRegistrationFlow
+    | UnexpectedCall
+    | WrongCaptchaSolution
+  >;
+  identityRegistrationFinish: ({
+    identity,
+    authnMethod,
+  }: {
     identity: SignIdentity;
-    keyType: KeyType;
-    credentialId?: CredentialId;
-    challengeResult: { chars: string; challenge: Challenge };
+    authnMethod: AuthnMethodData;
   }) => Promise<
-    LoginSuccess | BadChallenge | ApiError | AuthFail | RegisterNoSpace
+    | LoginSuccess
+    | ApiError
+    | NoRegistrationFlow
+    | UnexpectedCall
+    | RegisterNoSpace
+    | InvalidAuthnMethod
   >;
   storePinIdentity: (opts: {
     userNumber: bigint;
@@ -63,10 +89,14 @@ export const registerFlow = async ({
   uaParser: PreloadedUAParser;
 }): Promise<
   | (LoginSuccess & { authnMethod: "passkey" | "pin" })
-  | BadChallenge
   | ApiError
-  | AuthFail
+  | NoRegistrationFlow
+  | UnexpectedCall
   | RegisterNoSpace
+  | InvalidAuthnMethod
+  | InvalidCaller
+  | AlreadyInProgress
+  | RateLimitExceeded
   | "canceled"
 > => {
   if (!registrationAllowed) {
@@ -75,9 +105,9 @@ export const registerFlow = async ({
     return "canceled";
   }
 
-  // Kick-off the challenge request early, so that we might already
+  // Kick-off the flow start request early, so that we might already
   // have a captcha to show once we get to the CAPTCHA screen
-  const createChallenge = precomputeFirst(() => createChallenge_());
+  const flowStart = precomputeFirst(() => identityRegistrationStart());
 
   const displayUserNumber = displayUserNumberWarmup();
   const savePasskeyResult = await savePasskeyOrPin({
@@ -100,15 +130,18 @@ export const registerFlow = async ({
       const { identity, pinIdentityMaterial } = await withLoader(() =>
         constructPinIdentity(pinResult)
       );
+      const alias = await inferPinAlias({
+        userAgent: navigator.userAgent,
+        uaParser,
+      });
       return {
         identity,
-        alias: await inferPinAlias({
-          userAgent: navigator.userAgent,
-          uaParser,
+        authnMethodData: pinAuthnMethodData({
+          alias,
+          pubKey: identity.getPublicKey().toDer(),
         }),
         captchaStepper: pinStepper({ current: "captcha" }),
         finishStepper: pinStepper({ current: "finish" }),
-        keyType: { browser_storage_key: null },
         finalizeIdentity: (userNumber: bigint) =>
           storePinIdentity({ userNumber, pinIdentityMaterial }),
         finishSlot: tempKeyWarningBox({ i18n: new I18n() }),
@@ -123,13 +156,14 @@ export const registerFlow = async ({
       });
       return {
         identity,
-        alias,
+        authnMethodData: passkeyAuthnMethodData({
+          alias,
+          pubKey: identity.getPublicKey().toDer(),
+          credentialId: identity.rawId,
+          authenticatorAttachment: identity.getAuthenticatorAttachment(),
+        }),
         captchaStepper: registerStepper({ current: "captcha" }),
         finishStepper: registerStepper({ current: "finish" }),
-        credentialId: new Uint8Array(identity.rawId),
-        keyType: authenticatorAttachmentToKeyType(
-          identity.getAuthenticatorAttachment()
-        ),
         authnMethod: "passkey" as const,
       };
     }
@@ -141,55 +175,53 @@ export const registerFlow = async ({
 
   const {
     identity,
-    alias,
+    authnMethodData,
     captchaStepper,
     finishStepper,
-    credentialId,
-    keyType,
     finalizeIdentity,
     finishSlot,
     authnMethod,
   }: {
     identity: SignIdentity;
-    alias: string;
+    authnMethodData: AuthnMethodData;
     captchaStepper: TemplateResult;
     finishStepper: TemplateResult;
-    credentialId?: CredentialId;
-    keyType: KeyType;
     finalizeIdentity?: (userNumber: bigint) => Promise<void>;
     finishSlot?: TemplateResult;
     authnMethod: "pin" | "passkey";
   } = result_;
 
-  const result = await promptCaptcha({
-    createChallenge,
-    stepper: captchaStepper,
-    register: async ({ chars, challenge }) => {
-      const result = await register({
-        identity,
-        alias,
-        keyType,
-        credentialId,
-        challengeResult: { chars, challenge },
-      });
+  const startResult = await flowStart();
+  if (startResult.kind !== "registrationFlowStepSuccess") {
+    return startResult;
+  }
+  startResult satisfies RegistrationFlowStepSuccess;
 
-      if (result.kind === "badChallenge") {
-        return badChallenge;
-      }
+  if (startResult.nextStep.step === "checkCaptcha") {
+    const captchaResult = await promptCaptcha({
+      captcha_png_base64: startResult.nextStep.captcha_png_base64,
+      stepper: captchaStepper,
+      checkCaptcha,
+    });
+    if (captchaResult === "canceled") {
+      return "canceled";
+    }
+    if (captchaResult.kind !== "registrationFlowStepSuccess") {
+      return captchaResult;
+    }
+    captchaResult satisfies RegistrationFlowStepSuccess;
+  }
 
-      return result;
-    },
+  const result = await identityRegistrationFinish({
+    authnMethod: authnMethodData,
+    identity,
   });
 
-  if ("tag" in result) {
-    result.tag satisfies "canceled";
-    return "canceled";
-  }
-
   if (result.kind !== "loginSuccess") {
     return result;
   }
   result.kind satisfies "loginSuccess";
+
   const userNumber = result.userNumber;
   await finalizeIdentity?.(userNumber);
   // We don't want to nudge the user with the recovery phrase warning page
@@ -210,15 +242,18 @@ export const registerFlow = async ({
 
 export type RegisterFlowOpts = Parameters<typeof registerFlow>[0];
 
-export const getRegisterFlowOpts = ({
+export const getRegisterFlowOpts = async ({
   connection,
   allowPinAuthentication,
 }: {
   connection: Connection;
   allowPinAuthentication: boolean;
-}): RegisterFlowOpts => {
+}): Promise<RegisterFlowOpts> => {
   // Kick-off fetching "ua-parser-js";
   const uaParser = loadUAParser();
+  const tempIdentity = await ECDSAKeyIdentity.generate({
+    extractable: false,
+  });
   return {
     /** Check that the current origin is not the explicit canister id or a raw url.
      *  Explanation why we need to do this:
@@ -228,35 +263,22 @@ export const getRegisterFlowOpts = ({
       !/(^https:\/\/rdmx6-jaaaa-aaaaa-aaadq-cai\.ic0\.app$)|(.+\.raw\..+)/.test(
         window.origin
       ),
-    createChallenge: () => connection.createChallenge(),
     pinAllowed: () =>
       // If pin auth is disallowed by the authenticating dapp then abort, otherwise check
       // if pin auth is allowed for the user agent
       allowPinAuthentication
         ? pinRegisterAllowed({ userAgent: navigator.userAgent, uaParser })
         : Promise.resolve(false),
-    register: async ({
-      identity,
-      alias,
-      keyType,
-      credentialId,
-      challengeResult: {
-        chars,
-        challenge: { challenge_key: key },
-      },
-    }) => {
-      const tempIdentity = await ECDSAKeyIdentity.generate({
-        extractable: false,
-      });
-      return await connection.register({
-        identity,
+    identityRegistrationStart: async () =>
+      await connection.identity_registration_start({ tempIdentity }),
+    checkCaptcha: async (captchaSolution) =>
+      await connection.check_captcha({ tempIdentity, captchaSolution }),
+    identityRegistrationFinish: async ({ identity, authnMethod }) =>
+      await connection.identity_registration_finish({
         tempIdentity,
-        alias,
-        keyType,
-        credentialId,
-        challengeResult: { chars, key },
-      });
-    },
+        identity,
+        authnMethod,
+      }),
     uaParser,
     storePinIdentity: idbStorePinIdentityMaterial,
   };
diff --git a/src/frontend/src/utils/authnMethodData.ts b/src/frontend/src/utils/authnMethodData.ts
new file mode 100644
index 0000000000..46e4a833c3
--- /dev/null
+++ b/src/frontend/src/utils/authnMethodData.ts
@@ -0,0 +1,83 @@
+import {
+  AuthnMethodData,
+  AuthnMethodSecuritySettings,
+  MetadataMapV2,
+} from "$generated/internet_identity_types";
+import { readDeviceOrigin } from "$src/utils/iiConnection";
+import { CredentialId } from "$src/utils/multiWebAuthnIdentity";
+import { DerEncodedPublicKey } from "@dfinity/agent";
+import { nonNullish } from "@dfinity/utils";
+
+/**
+ * Helper to create a new PinIdentity authn method to be used in a registration flow.
+ */
+export const pinAuthnMethodData = ({
+  alias,
+  pubKey,
+}: {
+  alias: string;
+  pubKey: DerEncodedPublicKey;
+}): AuthnMethodData => {
+  const metadata: MetadataMapV2 = [
+    ["alias", { String: alias }],
+    ["usage", { String: "browser_storage_key" }],
+  ];
+  addOriginToMetadata(metadata);
+  return {
+    metadata,
+    authn_method: {
+      PubKey: { pubkey: new Uint8Array(pubKey) },
+    },
+    security_settings: defaultSecuritySettings(),
+    last_authentication: [],
+  };
+};
+
+/**
+ * Helper to create a new passkey authn method to be used in a registration flow.
+ */
+export const passkeyAuthnMethodData = ({
+  alias,
+  pubKey,
+  credentialId,
+  authenticatorAttachment,
+}: {
+  alias: string;
+  pubKey: DerEncodedPublicKey;
+  credentialId: CredentialId;
+  authenticatorAttachment?: AuthenticatorAttachment;
+}): AuthnMethodData => {
+  const metadata: MetadataMapV2 = [["alias", { String: alias }]];
+  addOriginToMetadata(metadata);
+  if (nonNullish(authenticatorAttachment)) {
+    metadata.push([
+      "authenticator_attachment",
+      { String: authenticatorAttachment },
+    ]);
+  }
+  return {
+    metadata,
+    authn_method: {
+      WebAuthn: {
+        pubkey: new Uint8Array(pubKey),
+        credential_id: new Uint8Array(credentialId),
+      },
+    },
+    security_settings: defaultSecuritySettings(),
+    last_authentication: [],
+  };
+};
+
+const defaultSecuritySettings = (): AuthnMethodSecuritySettings => {
+  return {
+    protection: { Unprotected: null },
+    purpose: { Authentication: null },
+  };
+};
+
+const addOriginToMetadata = (metadata: MetadataMapV2) => {
+  const origin = readDeviceOrigin();
+  if (origin.length !== 0) {
+    metadata.push(["origin", { String: origin[0] }]);
+  }
+};
diff --git a/src/frontend/src/utils/iiConnection.ts b/src/frontend/src/utils/iiConnection.ts
index cd069a78be..fefc38188b 100644
--- a/src/frontend/src/utils/iiConnection.ts
+++ b/src/frontend/src/utils/iiConnection.ts
@@ -6,6 +6,7 @@ import {
   _SERVICE,
   AddTentativeDeviceResponse,
   AnchorCredentials,
+  AuthnMethodData,
   Challenge,
   ChallengeResult,
   CredentialId,
@@ -24,6 +25,7 @@ import {
   PublicKey,
   Purpose,
   RegisterResponse,
+  RegistrationFlowNextStep,
   SessionKey,
   Timestamp,
   UserNumber,
@@ -90,15 +92,39 @@ export type LoginSuccess = {
   userNumber: bigint;
 };
 
+export type RegFlowNextStep =
+  | { step: "checkCaptcha"; captcha_png_base64: string }
+  | { step: "finish" };
+export type RegistrationFlowStepSuccess = {
+  kind: "registrationFlowStepSuccess";
+  nextStep: RegFlowNextStep;
+};
+
 export type BadChallenge = { kind: "badChallenge" };
 export type BadPin = { kind: "badPin" };
 export type UnknownUser = { kind: "unknownUser"; userNumber: bigint };
+export type UnexpectedCall = {
+  kind: "unexpectedCall";
+  nextStep: RegFlowNextStep;
+};
+export type NoRegistrationFlow = { kind: "noRegistrationFlow" };
+export type WrongCaptchaSolution = {
+  kind: "wrongCaptchaSolution";
+  new_captcha_png_base64: string;
+};
 export type AuthFail = { kind: "authFail"; error: Error };
+export type InvalidCaller = { kind: "invalidCaller" };
+export type RateLimitExceeded = { kind: "rateLimitExceeded" };
+export type AlreadyInProgress = { kind: "alreadyInProgress" };
 export type ApiError = { kind: "apiError"; error: Error };
 export type RegisterNoSpace = { kind: "registerNoSpace" };
 export type NoSeedPhrase = { kind: "noSeedPhrase" };
 export type SeedPhraseFail = { kind: "seedPhraseFail" };
 export type WebAuthnFailed = { kind: "webAuthnFailed" };
+export type InvalidAuthnMethod = {
+  kind: "invalidAuthnMethod";
+  message: string;
+};
 
 export type { ChallengeResult } from "$generated/internet_identity_types";
 
@@ -187,6 +213,209 @@ export class Connection {
     }
   };
 
+  identity_registration_start = async ({
+    tempIdentity,
+  }: {
+    tempIdentity: SignIdentity;
+  }): Promise<
+    | RegistrationFlowStepSuccess
+    | ApiError
+    | InvalidCaller
+    | AlreadyInProgress
+    | RateLimitExceeded
+  > => {
+    const actor = await this.createActor(tempIdentity);
+
+    let startResponse;
+    try {
+      startResponse = await actor.identity_registration_start();
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        return { kind: "apiError", error };
+      } else {
+        return {
+          kind: "apiError",
+          error: new Error("Unknown error when registering"),
+        };
+      }
+    }
+
+    if ("Ok" in startResponse) {
+      return {
+        kind: "registrationFlowStepSuccess",
+        nextStep: mapRegFlowNextStep(startResponse.Ok.next_step),
+      };
+    }
+
+    if ("Err" in startResponse) {
+      const err = startResponse.Err;
+      if ("InvalidCaller" in err) {
+        return { kind: "invalidCaller" };
+      }
+      if ("AlreadyInProgress" in err) {
+        return { kind: "alreadyInProgress" };
+      }
+      if ("RateLimitExceeded" in err) {
+        return { kind: "rateLimitExceeded" };
+      }
+    }
+    console.error(
+      "unexpected identity_registration_start response",
+      startResponse
+    );
+    throw Error("unexpected identity_registration_start response");
+  };
+
+  check_captcha = async ({
+    tempIdentity,
+    captchaSolution,
+  }: {
+    tempIdentity: SignIdentity;
+    captchaSolution: string;
+  }): Promise<
+    | RegistrationFlowStepSuccess
+    | ApiError
+    | NoRegistrationFlow
+    | UnexpectedCall
+    | WrongCaptchaSolution
+  > => {
+    const actor = await this.createActor(tempIdentity);
+
+    let captchaResponse;
+    try {
+      captchaResponse = await actor.check_captcha({
+        solution: captchaSolution,
+      });
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        return { kind: "apiError", error };
+      } else {
+        return {
+          kind: "apiError",
+          error: new Error("Unknown error when registering"),
+        };
+      }
+    }
+
+    if ("Ok" in captchaResponse) {
+      const nextStep = captchaResponse.Ok.next_step;
+      if ("Finish" in nextStep) {
+        return {
+          kind: "registrationFlowStepSuccess",
+          nextStep: { step: "finish" },
+        };
+      }
+      console.error(
+        "unexpected next step in check_captcha response",
+        captchaResponse
+      );
+      throw Error("unexpected next step in check_captcha response");
+    }
+
+    if ("Err" in captchaResponse) {
+      const err = captchaResponse.Err;
+      if ("WrongSolution" in err) {
+        return {
+          kind: "wrongCaptchaSolution",
+          new_captcha_png_base64: err.WrongSolution.new_captcha_png_base64,
+        };
+      }
+      if ("UnexpectedCall" in err) {
+        return {
+          kind: "unexpectedCall",
+          nextStep: mapRegFlowNextStep(err.UnexpectedCall.next_step),
+        };
+      }
+      if ("NoRegistrationFlow" in err) {
+        return { kind: "noRegistrationFlow" };
+      }
+    }
+    console.error("unexpected check_captcha response", captchaResponse);
+    throw Error("unexpected check_captcha response");
+  };
+
+  identity_registration_finish = async ({
+    tempIdentity,
+    identity,
+    authnMethod,
+  }: {
+    tempIdentity: SignIdentity;
+    identity: SignIdentity;
+    authnMethod: AuthnMethodData;
+  }): Promise<
+    | LoginSuccess
+    | ApiError
+    | NoRegistrationFlow
+    | UnexpectedCall
+    | RegisterNoSpace
+    | InvalidAuthnMethod
+  > => {
+    const delegationIdentity = await this.requestFEDelegation(tempIdentity);
+    const actor = await this.createActor(delegationIdentity);
+
+    let finishResponse;
+    try {
+      finishResponse = await actor.identity_registration_finish({
+        authn_method: authnMethod,
+      });
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        return { kind: "apiError", error };
+      } else {
+        return {
+          kind: "apiError",
+          error: new Error("Unknown error when registering"),
+        };
+      }
+    }
+
+    if ("Ok" in finishResponse) {
+      const userNumber = finishResponse.Ok.identity_number;
+      return {
+        kind: "loginSuccess",
+        connection: new AuthenticatedConnection(
+          this.canisterId,
+          identity,
+          delegationIdentity,
+          userNumber,
+          actor
+        ),
+        userNumber,
+      };
+    }
+
+    if ("Err" in finishResponse) {
+      const err = finishResponse.Err;
+      if ("InvalidAuthnMethod" in err) {
+        return {
+          kind: "invalidAuthnMethod",
+          message: err.InvalidAuthnMethod,
+        };
+      }
+      if ("UnexpectedCall" in err) {
+        return {
+          kind: "unexpectedCall",
+          nextStep: mapRegFlowNextStep(err.UnexpectedCall.next_step),
+        };
+      }
+      if ("NoRegistrationFlow" in err) {
+        return { kind: "noRegistrationFlow" };
+      }
+      if ("IdentityLimitReached" in err) {
+        return { kind: "registerNoSpace" };
+      }
+      if ("StorageError" in err) {
+        // this is unrecoverable, so we can just map it to a generic API error
+        return {
+          kind: "apiError",
+          error: new Error("StorageError: " + err.StorageError),
+        };
+      }
+    }
+    console.error("unexpected check_captcha response", finishResponse);
+    throw Error("unexpected check_captcha response");
+  };
+
   login = async (
     userNumber: bigint
   ): Promise<
@@ -382,10 +611,10 @@ export class Connection {
 
   // Create an actor representing the backend
   createActor = async (
-    delegationIdentity?: DelegationIdentity
+    identity?: SignIdentity
   ): Promise<ActorSubclass<_SERVICE>> => {
     const agent = await HttpAgent.create({
-      identity: delegationIdentity,
+      identity,
       host: inferHost(),
       // Only fetch the root key when we're not in prod
       shouldFetchRootKey: features.FETCH_ROOT_KEY,
@@ -850,3 +1079,16 @@ export const inferHost = (): string => {
   // Otherwise assume it's a custom setup and use the host itself as API.
   return location.protocol + "//" + location.host;
 };
+
+const mapRegFlowNextStep = (
+  step: RegistrationFlowNextStep
+): RegFlowNextStep => {
+  if ("Finish" in step) {
+    return { step: "finish" };
+  }
+  step satisfies { CheckCaptcha: { captcha_png_base64: string } };
+  return {
+    step: "checkCaptcha",
+    captcha_png_base64: step.CheckCaptcha.captcha_png_base64,
+  };
+};
diff --git a/src/showcase/src/flows.ts b/src/showcase/src/flows.ts
index f2af4fe472..df87b35294 100644
--- a/src/showcase/src/flows.ts
+++ b/src/showcase/src/flows.ts
@@ -62,16 +62,32 @@ class MockAuthenticatedConnection extends AuthenticatedConnection {
 const mockConnection = new MockAuthenticatedConnection();
 
 const registerFlowOpts: RegisterFlowOpts = {
-  createChallenge: async () => {
+  identityRegistrationStart: async () => {
     await new Promise((resolve) => setTimeout(resolve, 2000));
-    return dummyChallenge;
+    return {
+      kind: "registrationFlowStepSuccess",
+      nextStep: {
+        step: "checkCaptcha",
+        captcha_png_base64: dummyChallenge.png_base64,
+      },
+    };
   },
-  register: async ({ challengeResult: { chars } }) => {
+  checkCaptcha: async (solution: string) => {
     await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    if (chars !== "8wJ6Q") {
-      return { kind: "badChallenge" };
+    if (solution !== "8wJ6Q") {
+      return {
+        kind: "wrongCaptchaSolution",
+        new_captcha_png_base64: dummyChallenge.png_base64,
+      };
     }
+    return {
+      kind: "registrationFlowStepSuccess",
+      nextStep: { step: "finish" },
+    };
+  },
+  identityRegistrationFinish: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
     return {
       kind: "loginSuccess",
       userNumber: BigInt(12356),