<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/commontoolsinc/labs/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From f9d96c96950ac7eb671b8b7620e5cdb33c9e5dcd Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Tue, 25 Feb 2025 11:57:37 +1000
Subject: [PATCH 1/9] Rework auth flow

---
 .../packages/common-identity/src/pass-key.ts  |  33 +-
 .../src/contexts/AuthenticationContext.tsx    |  90 ++---
 .../jumble/src/views/AuthenticationView.tsx   | 344 +++++++++++++++---
 3 files changed, 367 insertions(+), 100 deletions(-)

diff --git a/typescript/packages/common-identity/src/pass-key.ts b/typescript/packages/common-identity/src/pass-key.ts
index 5c82db47b..20e77249c 100644
--- a/typescript/packages/common-identity/src/pass-key.ts
+++ b/typescript/packages/common-identity/src/pass-key.ts
@@ -15,11 +15,12 @@ const ALGS: PublicKeyCredentialParameters[] = [
   { type: "public-key", alg: -8 }, // ed25519
   { type: "public-key", alg: -7 }, // es256
   { type: "public-key", alg: -257 }, // rs256
-]
+];
 
 export interface PassKeyGetOptions {
-  mediation?: "conditional",
-  userVerification?: "required" | "preferred" | "discouraged"
+  mediation?: "conditional";
+  userVerification?: "required" | "preferred" | "discouraged";
+  allowCredentials?: PublicKeyCredentialDescriptor[];
 }
 
 // A `PassKey` represents an authentication via a WebAuthn authenticator.
@@ -66,7 +67,7 @@ export class PassKey {
   // Different data is available within `PublicKeyCredentials` depending
   // on whether it was created or retrieved. We need the PRF assertion
   // only available on "get" requests, so we don't return a `PassKey` here.
-  static async create(name: string, displayName: string): Promise<void> {
+  static async create(name: string, displayName: string): Promise<PublicKeyCredential> {
     const challenge = random(32);
     const userId = random(32);
     const user = {
@@ -74,7 +75,7 @@ export class PassKey {
       name,
       displayName,
     };
-    
+
     let publicKey: PublicKeyCredentialCreationOptions = {
       challenge,
       rp: { id: RP_ID, name: RP },
@@ -93,10 +94,10 @@ export class PassKey {
         userVerification: "preferred", // default
       },
       pubKeyCredParams: ALGS,
-      extensions: { prf: { eval: { first: PRF_SALT }}},
+      extensions: { prf: { eval: { first: PRF_SALT } } },
       timeout: TIMEOUT,
     };
-        
+
     let result = (await navigator.credentials.create({ publicKey })) as PublicKeyCredential | null;
     if (!result) {
       throw new Error("common-identity: Could not create passkey");
@@ -105,23 +106,29 @@ export class PassKey {
     if (!extResults?.prf?.enabled) {
       throw new Error("common-identity: prf extension not supported.");
     }
+
+    return result;
   }
 
   // Retrieve a `PassKey` from a Web Authn authenticator.
   // In browsers, must be called via a user gesture.
-  static async get({ userVerification, mediation }: PassKeyGetOptions = {}): Promise<PassKey> {
+  static async get({
+    userVerification,
+    mediation,
+    allowCredentials = [],
+  }: PassKeyGetOptions = {}): Promise<PassKey> {
     // Select any credential available with the same `RP_ID`.
-    let credential = await navigator.credentials.get({
+    let credential = (await navigator.credentials.get({
       publicKey: {
-        allowCredentials: [],
+        allowCredentials,
         challenge: random(32),
         rpId: RP_ID,
         userVerification: userVerification ?? "preferred",
-        extensions: { prf: { eval: { first: PRF_SALT }}},
+        extensions: { prf: { eval: { first: PRF_SALT } } },
         timeout: TIMEOUT,
       },
       mediation,
-    }) as PublicKeyCredential | null;
+    })) as PublicKeyCredential | null;
 
     if (!credential) {
       throw new Error("common-identity: Could not create credentials.");
@@ -136,7 +143,7 @@ export class PassKey {
     }
     return new PassKey(credential);
   }
-  
+
   private getCredentials(): PublicKeyCredential {
     return this.credentials;
   }
diff --git a/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx b/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
index 140893043..5d4ccd4e4 100644
--- a/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
+++ b/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
@@ -10,9 +10,9 @@ interface AuthenticationContextType {
   // The authenticated user/persona.
   user: Identity | void;
   // Call PassKey registration.
-  passkeyRegister: (name: string, displayName: string) => Promise<void>;
+  passkeyRegister: (name: string, displayName: string) => Promise<PublicKeyCredential>;
   // Authenticate the user via passkey.
-  passkeyAuthenticate: () => Promise<void>;
+  passkeyAuthenticate: (descriptor?: PublicKeyCredentialDescriptor) => Promise<void>;
   // Generate a passphrase for a new user
   passphraseRegister: () => Promise<string>;
   // Authenticate via passphrase.
@@ -21,7 +21,7 @@ interface AuthenticationContextType {
   clearAuthentication: () => Promise<void>;
   // Internal: Root key.
   root: Identity | void;
-  // Internal: Persistent storage for keys. 
+  // Internal: Persistent storage for keys.
   keyStore: KeyStore | void;
 }
 
@@ -36,19 +36,19 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
   useEffect(() => {
     let ignore = false;
     async function getKeyStoreAndRoot() {
-      let keyStore = await KeyStore.open();
-      let root = await keyStore.get(ROOT_KEY);
+      const keyStore = await KeyStore.open();
+      const root = await keyStore.get(ROOT_KEY);
       if (!ignore) {
         setKeyStore(keyStore);
         setRoot(root);
       }
     }
-    getKeyStoreAndRoot(); 
+    getKeyStoreAndRoot();
     return () => {
       ignore = true;
       setKeyStore(undefined);
       setRoot(undefined);
-    }
+    };
   }, []);
 
   // When root changes, update `user` to the default persona
@@ -59,7 +59,7 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
       if (!root) {
         return;
       }
-      let user = await root.derive(DEFAULT_PERSONA);
+      const user = await root.derive(DEFAULT_PERSONA);
       if (!ignore) {
         setUser(user);
       }
@@ -68,7 +68,7 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
     return () => {
       ignore = true;
       setUser(undefined);
-    }
+    };
   }, [root]);
 
   // This calls out to WebAuthn to register a user. The state of whether
@@ -77,44 +77,50 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
   //
   // Must be called within a user gesture.
   const passkeyRegister = useCallback(async (name: string, displayName: string) => {
-    return PassKey.create(name, displayName);
+    const credential = await PassKey.create(name, displayName);
+    return credential;
   }, []);
 
-
   // This should be called when a passkey (possibly) exists for the user already,
   // and no root key has yet been stored (e.g. first login). Subsequent page loads
   // should load key from storage and not require this callback.
   //
   // Must be called within a user gesture.
-  const passkeyAuthenticate = useCallback(async () => {
-    if (!keyStore) {
-      return;
-    }
-    let passkey = await PassKey.get();
-    let root = await passkey.createRootKey();
-    await keyStore.set(ROOT_KEY, root);
-    setRoot(root);
-  }, [keyStore]);
- 
+  const passkeyAuthenticate = useCallback(
+    async (key?: PublicKeyCredentialDescriptor) => {
+      if (!keyStore) {
+        return;
+      }
+      // Pass the keyName to PassKey.get() if provided
+      const passkey = await PassKey.get({ allowCredentials: key ? [key] : [] });
+      const root = await passkey.createRootKey();
+      await keyStore.set(ROOT_KEY, root);
+      setRoot(root);
+    },
+    [keyStore],
+  );
 
   const passphraseRegister = useCallback(async () => {
     // Don't store the root identity here. Return only the
     // mnemonic so that the UI can present guidance on handling
     // the private key. The root will be derived from the mnemonic
     // on authentication.
-    let [_, mnemonic] = await Identity.generateMnemonic();
+    const [_, mnemonic] = await Identity.generateMnemonic();
     return mnemonic;
   }, []);
 
-  const passphraseAuthenticate = useCallback(async (mnemonic: string) => {
-    if (!keyStore) {
-      return;
-    }
-    let root = await Identity.fromMnemonic(mnemonic);
-    await keyStore.set(ROOT_KEY, root);
-    setRoot(root);
-  }, [keyStore]);
-  
+  const passphraseAuthenticate = useCallback(
+    async (mnemonic: string) => {
+      if (!keyStore) {
+        return;
+      }
+      const root = await Identity.fromMnemonic(mnemonic);
+      await keyStore.set(ROOT_KEY, root);
+      setRoot(root);
+    },
+    [keyStore],
+  );
+
   const clearAuthentication = useCallback(async () => {
     if (!keyStore) {
       return;
@@ -125,16 +131,18 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
   }, [keyStore]);
 
   return (
-    <AuthenticationContext.Provider value="{{" - user - passkeyAuthenticate - passkeyRegister - passphraseAuthenticate - passphraseRegister - clearAuthentication - root - keyStore - }>
+    <AuthenticationContext.Provider + value="{{" + user + passkeyAuthenticate + passkeyRegister + passphraseAuthenticate + passphraseRegister + clearAuthentication + root + keyStore + } +>
       {children}
     </AuthenticationContext.Provider>
   );
diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
index 2c9d694f5..75744ddef 100644
--- a/typescript/packages/jumble/src/views/AuthenticationView.tsx
+++ b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -1,62 +1,314 @@
 import { useAuthentication } from "@/contexts/AuthenticationContext.tsx";
 import { useCallback, useRef, useState } from "react";
+import ShapeLogo from "@/assets/ShapeLogo.svg";
+import { useAuthentication } from "@/contexts/AuthenticationContext";
+import { useCallback, useEffect, useState } from "react";
+import {
+  LuArrowLeft,
+  LuKey,
+  LuKeyRound,
+  LuCirclePlus,
+  LuLock,
+  LuTextCursorInput,
+  LuCopy,
+  LuTrash2,
+  LuCheck,
+} from "react-icons/lu";
 
-const BTN_STYLE=`bg-gray-50 border-2 p-2 w-full flex-1 cursor-pointer`;
-const PW_STYLE=`bg-gray-50 border-2 p-2 w-full flex-1`;
+const BTN_PRIMARY = `w-full px-4 py-2 bg-black text-white hover:bg-gray-800 disabled:opacity-50 flex items-center justify-center gap-2`;
+const LIST_ITEM = `w-full p-2 text-left text-sm border-2 border-black hover:-translate-y-[2px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] shadow-[1px_1px_0px_0px_rgba(0,0,0,0.3)] transition-all duration-100 ease-in-out cursor-pointer flex items-center gap-2`;
+const INPUT_STYLE = `w-full p-2 border rounded`;
+
+type AuthMethod = "passkey" | "passphrase";
+type AuthFlow = "register" | "login";
+
+interface ErrorCalloutProps {
+  error: string;
+  onDismiss: () => void;
+}
+
+interface SuccessRegistrationProps {
+  mnemonic?: string;
+  onLogin: () => void;
+  method: AuthMethod;
+}
+
+interface StoredCredential {
+  id: string;
+  type: "public-key" | "passphrase";
+  method: AuthMethod;
+}
+
+function ErrorCallout({ error, onDismiss }: ErrorCalloutProps) {
+  return (
+    <div className="bg-red-50 border-l-4 border-red-400 p-4 mb-4">
+      <div className="flex">
+        <div className="flex-1">{error}</div>
+        <button onClick="{ onDismiss; } ">×</button>
+      </div>
+    </div>
+  );
+}
+function SuccessRegistration({ mnemonic, onLogin, method }: SuccessRegistrationProps) {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = () => {
+    if (mnemonic) {
+      navigator.clipboard.writeText(mnemonic);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 750);
+    }
+  };
+
+  return (
+    <div className="text-center">
+      {mnemonic && (
+        <div className="mb-4">
+          <p className="mb-2">Your Secret Recovery Phrase:</p>
+          <div className="relative">
+            <textarea + readOnly + value="{mnemonic}" + rows="{3}" + className="w-full p-2 pr-10 border-2 border-black resize-none" + />+            <button
+              onClick={copyToClipboard}
+              className={`absolute right-2 top-1/2 transform -translate-y-1/2 ${
+                copied ? "text-green-500" : ""
+              }`}
+            >
+              {copied ? <LuCheck className="w-5 h-5" /> : <LuCopy className="w-5 h-5" />}
+            </button>
+          </div>
+          <p className="text-sm text-gray-500 mt-2">
+            Please save this phrase securely. You'll need it to log in.
+          </p>
+        </div>
+      )}
+      <button className={BTN_PRIMARY} onClick={onLogin}>
+        <LuLock className="w-5 h-5" /> Continue to Login
+      </button>
+    </div>
+  );
+}
 
 export function AuthenticationView() {
-  const { user, passkeyRegister, passkeyAuthenticate, passphraseRegister, passphraseAuthenticate } = useAuthentication();
-  if (user) {
-    throw new Error("Displaying authentication view when already authenticated.");
+  const auth = useAuthentication();
+  const [flow, setFlow] = useState<AuthFlow | null>(null);
+  const [method, setMethod] = useState<AuthMethod | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [mnemonic, setMnemonic] = useState<string | null>(null);
+  const [availableMethods, setAvailableMethods] = useState<AuthMethod[]>([]);
+  const [storedCredential, setStoredCredential] = useState<StoredCredential | null>(() => {
+    const stored = localStorage.getItem("storedCredential");
+    return stored ? JSON.parse(stored) : null;
+  });
+
+  useEffect(() => {
+    const methods: AuthMethod[] = ["passphrase"]; // Passphrase always available
+
+    // Add passkey if available
+    const isPasskeyAvailable =
+      window.location.hostname !== "localhost" && window.PublicKeyCredential !== undefined;
+
+    if (isPasskeyAvailable) {
+      methods.push("passkey");
+    }
+
+    setAvailableMethods(methods);
+    // Only set default method if there's just one option
+    if (methods.length === 1) {
+      setMethod(methods[0]);
+    }
+  }, []);
+
+  async function handleAuth<T>(action: () => Promise<T>) {
+    try {
+      setError(null);
+      return await action();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Authentication failed");
+      // Reset both flow and method to return to initial state
+      setFlow(null);
+      setMethod(null);
+    }
   }
-  const [mnemonic, setMnemonic] = useState<string>("");
-  const passphraseInput = useRef(null);
 
+  const handleRegister = useCallback(
+    async (selectedMethod: string) => {
+      if (selectedMethod === "passkey") {
+        const credential = await handleAuth(() =>
+          auth.passkeyRegister("Common Tools User", "commontoolsuser"),
+        );
+        if (!credential) throw new Error("Credential not found");
 
-  const createMnemonic = useCallback(async () => {
-    setMnemonic(await passphraseRegister());
+        const storedCred: StoredCredential = {
+          id: credential.id,
+          type: "public-key",
+          method: "passkey",
+        };
+        localStorage.setItem("storedCredential", JSON.stringify(storedCred));
+      } else {
+        const mnemonic = await auth.passphraseRegister();
+        // Store passphrase credential info
+        const storedCred: StoredCredential = {
+          id: crypto.randomUUID(), // Generate a unique ID for the passphrase credential
+          type: "passphrase",
+          method: "passphrase",
+        };
+        localStorage.setItem("storedCredential", JSON.stringify(storedCred));
+        setMnemonic(mnemonic);
+      }
+    },
+    [handleAuth, auth],
+  );
+
+  const handleLogin = useCallback(
+    async (selectedMethod: string, passphrase?: string) => {
+      if (selectedMethod === "passkey") {
+        if (storedCredential && storedCredential.type == "public-key") {
+          const credentialDescriptor: PublicKeyCredentialDescriptor = {
+            id: Uint8Array.from(atob(storedCredential.id), (c) => c.charCodeAt(0)),
+            type: storedCredential.type,
+          };
+          await handleAuth(() => auth.passkeyAuthenticate(credentialDescriptor));
+        } else {
+          await handleAuth(() => auth.passkeyAuthenticate());
+        }
+      } else if (passphrase) {
+        await handleAuth(() => auth.passphraseAuthenticate(passphrase));
+      }
+    },
+    [storedCredential, handleAuth, auth],
+  );
+
+  const handleMethodSelect = useCallback(
+    async (selectedMethod: AuthMethod) => {
+      debugger;
+      setMethod(selectedMethod);
+      if (flow === "register") {
+        await handleRegister(selectedMethod);
+      } else {
+        await handleLogin(selectedMethod);
+      }
+    },
+    [flow, setMethod, handleRegister, handleLogin],
+  );
+
+  const clearStoredCredential = useCallback(() => {
+    localStorage.removeItem("storedCredential");
+    setStoredCredential(null);
   }, []);
 
-  const authWithMnemonicInput = useCallback(async () => {
-    if (passphraseInput.current == null) { return; }
-    let passphrase = (passphraseInput.current as HTMLInputElement).value;
-    await passphraseAuthenticate(passphrase);
-    setMnemonic("");
-  }, [passphraseInput]);
-
-  const authWithMnemonicState = useCallback(async () => {
-    let passphrase = mnemonic;
-    setMnemonic("");
-    await passphraseAuthenticate(passphrase);
-  }, [mnemonic]);
-
-  if (mnemonic) {
-    return (
-      <div className="flex flex-col">
-      <div className="flex flex-col bg-gray-50 items-center justify-between border-2 p-2 m-2 flex-1"> 
-        <h3>Your Secret Recovery Key</h3>
-        <textarea
-          readOnly={true}
-          value={mnemonic}
-          className="block w-full rounded-md bg-white px-3 py-1.5">
-        </textarea>
-        <button className="{BTN_STYLE}" onClick="{ authWithMnemonicState; } ">OK</button>
-      </div>
-      </div>
-    )
+  if (auth.user) {
+    throw new Error("Already authenticated");
   }
   return (
-    <div className="flex flex-row">
-      <div className="flex flex-col bg-gray-50 items-center justify-between border-2 p-2 m-2 flex-1"> 
-        <h3>via Passkey</h3>
-        <button className="{BTN_STYLE}" onClick="{()"> passkeyRegister("Common Tools User", "commontoolsuser")}>Register</button>
-        <button className="{BTN_STYLE}" onClick="{ passkeyAuthenticate; } ">Login</button>
+    <div>
+      <div className="flex justify-center mb-4">
+        <ShapeLogo width="{128}" height="{128}" shapeColor="#7F08EA" containerColor="#B77EEA" />
       </div>
-      <div className="flex flex-col bg-gray-50 items-center justify-between border-2 p-2 m-2 flex-1">
-        <h3>via Passphrase</h3>
-        <button className="{BTN_STYLE}" onClick="{ createMnemonic; } ">Register</button>
-        <button className="{BTN_STYLE}" onClick="{ authWithMnemonicInput; } ">Login</button>
-        <input className="{PW_STYLE}" type="password" placeholder="passphrase" ref="{passphraseInput}"></input>
+      <div className="max-w-md mx-auto p-4 bg-white border-2">
+        {error && <ErrorCallout error="{error}" onDismiss="{()"> setError(null)} />}
+
+        {mnemonic ? (
+          <SuccessRegistration + mnemonic="{mnemonic}" + method="{method!}" + onLogin="{()"> {
+              setMnemonic(null);
+              setFlow("login");
+            }}
+          />
+        ) : flow === null ? (
+          <div className="space-y-4">
+            {storedCredential ? (
+              <>
+                <button + className="{BTN_PRIMARY}" + onClick="{()"> {
+                    setMethod(storedCredential.method);
+                    setFlow("login");
+                  }}
+                >
+                  <LuKey className="w-5 h-5" />
+                  {storedCredential.type === "public-key"
+                    ? `Unlock with Key (${storedCredential.id.slice(-4)})`
+                    : "Unlock with Passphrase"}
+                </button>
+                <button className="{LIST_ITEM}" onClick="{()"> setFlow("login")}>
+                  <LuLock className="w-5 h-5" /> Login with Different Method
+                </button>
+                <button className="{LIST_ITEM}" onClick="{()"> setFlow("register")}>
+                  <LuKeyRound className="w-5 h-5" /> Register New Key
+                </button>
+                <button className="{LIST_ITEM}" onClick="{ clearStoredCredential; } ">
+                  <LuTrash2 className="w-5 h-5" /> Clear Saved Credentials
+                </button>
+              </>
+            ) : (
+              <>
+                <button className="{BTN_PRIMARY}" onClick="{()"> setFlow("register")}>
+                  <LuCirclePlus className="w-5 h-5" /> Register
+                </button>
+                <button className="{BTN_PRIMARY}" onClick="{()"> setFlow("login")}>
+                  <LuLock className="w-5 h-5" /> Login
+                </button>
+              </>
+            )}
+          </div>
+        ) : flow !== null && method === null ? (
+          <div className="space-y-4">
+            <h2 className="text-xl mb-4">{flow === "login" ? "Login with" : "Register with"}</h2>
+            {availableMethods.map((m) => (
+              <button key="{m}" className="{LIST_ITEM}" onClick="{()"> handleMethodSelect(m)}>
+                {m === "passkey" ? (
+                  <>
+                    <LuKey className="w-5 h-5" /> Use Passkey
+                  </>
+                ) : (
+                  <>
+                    <LuTextCursorInput className="w-5 h-5" /> Use Passphrase
+                  </>
+                )}
+              </button>
+            ))}
+            <button className="{BTN_PRIMARY}" onClick="{()"> setFlow(null)}>
+              <LuArrowLeft className="w-5 h-5" /> Back
+            </button>
+          </div>
+        ) : method === "passphrase" ? (
+          <div className="space-y-4">
+            {flow === "register" ? (
+              <button className="{BTN_PRIMARY}" onClick="{ handleRegister; } ">
+                <LuKeyRound className="w-5 h-5" /> Register with Passphrase
+              </button>
+            ) : (
+              <form + onSubmit="{(e)"> {
+                  e.preventDefault();
+                  const form = e.target as HTMLFormElement;
+                  handleLogin(method, new FormData(form).get("passphrase") as string);
+                }}
+              >
+                <input + type="password" + name="passphrase" + className="w-full p-2 pr-10 border-2 border-black" + placeholder="Enter your passphrase" + autoComplete="current-password" + />
+                <button type="submit" className="{BTN_PRIMARY}">
+                  <LuLock className="w-5 h-5" /> Login
+                </button>
+              </form>
+            )}
+            <button className="{BTN_PRIMARY}" onClick="{()"> setFlow(null)}>
+              <LuArrowLeft className="w-5 h-5" /> Back
+            </button>
+          </div>
+        ) : null}
       </div>
     </div>
   );

From edf2aef848d381cdd41f62cbeb72712817b8abc9 Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Tue, 25 Feb 2025 12:31:24 +1000
Subject: [PATCH 2/9] Expose id from PassKey class

---
 typescript/packages/common-identity/src/pass-key.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/typescript/packages/common-identity/src/pass-key.ts b/typescript/packages/common-identity/src/pass-key.ts
index 20e77249c..c310b7314 100644
--- a/typescript/packages/common-identity/src/pass-key.ts
+++ b/typescript/packages/common-identity/src/pass-key.ts
@@ -32,6 +32,10 @@ export class PassKey {
     this.credentials = credentials;
   }
 
+  id() {
+    return this.credentials.id;
+  }
+
   // Generate a root key from a `PassKey`.
   // A root key identity is deterministically derived from a `PassKey`'s
   // PRF output, a 32-byte hash, which is used as ed25519 key material.
@@ -67,7 +71,7 @@ export class PassKey {
   // Different data is available within `PublicKeyCredentials` depending
   // on whether it was created or retrieved. We need the PRF assertion
   // only available on "get" requests, so we don't return a `PassKey` here.
-  static async create(name: string, displayName: string): Promise<PublicKeyCredential> {
+  static async create(name: string, displayName: string): Promise<PassKey> {
     const challenge = random(32);
     const userId = random(32);
     const user = {
@@ -107,7 +111,7 @@ export class PassKey {
       throw new Error("common-identity: prf extension not supported.");
     }
 
-    return result;
+    return new PassKey(result);
   }
 
   // Retrieve a `PassKey` from a Web Authn authenticator.

From aed155e4daf461044798c83b623b25b77693f04c Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Tue, 25 Feb 2025 12:31:45 +1000
Subject: [PATCH 3/9] Testing every permutation of methods and sequences

---
 .../src/contexts/AuthenticationContext.tsx    |   7 +-
 .../packages/jumble/src/utils/credentials.ts  |  46 ++++
 .../jumble/src/views/AuthenticationView.tsx   | 211 +++++++++++-------
 3 files changed, 182 insertions(+), 82 deletions(-)
 create mode 100644 typescript/packages/jumble/src/utils/credentials.ts

diff --git a/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx b/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
index 5d4ccd4e4..73b44171d 100644
--- a/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
+++ b/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
@@ -10,9 +10,9 @@ interface AuthenticationContextType {
   // The authenticated user/persona.
   user: Identity | void;
   // Call PassKey registration.
-  passkeyRegister: (name: string, displayName: string) => Promise<PublicKeyCredential>;
+  passkeyRegister: (name: string, displayName: string) => Promise<PassKey>;
   // Authenticate the user via passkey.
-  passkeyAuthenticate: (descriptor?: PublicKeyCredentialDescriptor) => Promise<void>;
+  passkeyAuthenticate: (descriptor?: PublicKeyCredentialDescriptor) => Promise<PassKey>;
   // Generate a passphrase for a new user
   passphraseRegister: () => Promise<string>;
   // Authenticate via passphrase.
@@ -89,13 +89,14 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
   const passkeyAuthenticate = useCallback(
     async (key?: PublicKeyCredentialDescriptor) => {
       if (!keyStore) {
-        return;
+        throw new Error("Key store not initialized");
       }
       // Pass the keyName to PassKey.get() if provided
       const passkey = await PassKey.get({ allowCredentials: key ? [key] : [] });
       const root = await passkey.createRootKey();
       await keyStore.set(ROOT_KEY, root);
       setRoot(root);
+      return passkey;
     },
     [keyStore],
   );
diff --git a/typescript/packages/jumble/src/utils/credentials.ts b/typescript/packages/jumble/src/utils/credentials.ts
new file mode 100644
index 000000000..6c4d617ec
--- /dev/null
+++ b/typescript/packages/jumble/src/utils/credentials.ts
@@ -0,0 +1,46 @@
+export interface StoredCredential {
+  id: string;
+  type: "public-key" | "passphrase";
+  method: "passkey" | "passphrase";
+}
+
+export function getStoredCredential(): StoredCredential | null {
+  const stored = localStorage.getItem("storedCredential");
+  return stored ? JSON.parse(stored) : null;
+}
+
+export function saveCredential(credential: StoredCredential): void {
+  localStorage.setItem("storedCredential", JSON.stringify(credential));
+}
+
+export function clearStoredCredential(): void {
+  localStorage.removeItem("storedCredential");
+}
+
+export function createPasskeyCredential(id: string): StoredCredential {
+  return {
+    id,
+    type: "public-key",
+    method: "passkey",
+  };
+}
+
+export function createPassphraseCredential(): StoredCredential {
+  return {
+    id: crypto.randomUUID(),
+    type: "passphrase",
+    method: "passphrase",
+  };
+}
+
+export function getPublicKeyCredentialDescriptor(
+  storedCredential: StoredCredential | null,
+): PublicKeyCredentialDescriptor | undefined {
+  if (storedCredential?.type === "public-key") {
+    return {
+      id: Uint8Array.from(atob(storedCredential.id), (c) => c.charCodeAt(0)),
+      type: "public-key" as PublicKeyCredentialType,
+    };
+  }
+  return undefined;
+}
diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
index 75744ddef..9e5315840 100644
--- a/typescript/packages/jumble/src/views/AuthenticationView.tsx
+++ b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -14,10 +14,18 @@ import {
   LuTrash2,
   LuCheck,
 } from "react-icons/lu";
+import {
+  type StoredCredential,
+  getStoredCredential,
+  saveCredential,
+  clearStoredCredential,
+  createPasskeyCredential,
+  createPassphraseCredential,
+  getPublicKeyCredentialDescriptor,
+} from "@/utils/credentials";
 
 const BTN_PRIMARY = `w-full px-4 py-2 bg-black text-white hover:bg-gray-800 disabled:opacity-50 flex items-center justify-center gap-2`;
 const LIST_ITEM = `w-full p-2 text-left text-sm border-2 border-black hover:-translate-y-[2px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] shadow-[1px_1px_0px_0px_rgba(0,0,0,0.3)] transition-all duration-100 ease-in-out cursor-pointer flex items-center gap-2`;
-const INPUT_STYLE = `w-full p-2 border rounded`;
 
 type AuthMethod = "passkey" | "passphrase";
 type AuthFlow = "register" | "login";
@@ -31,12 +39,7 @@ interface SuccessRegistrationProps {
   mnemonic?: string;
   onLogin: () => void;
   method: AuthMethod;
-}
-
-interface StoredCredential {
-  id: string;
-  type: "public-key" | "passphrase";
-  method: AuthMethod;
+  credentialId?: string;
 }
 
 function ErrorCallout({ error, onDismiss }: ErrorCalloutProps) {
@@ -49,7 +52,13 @@ function ErrorCallout({ error, onDismiss }: ErrorCalloutProps) {
     </div>
   );
 }
-function SuccessRegistration({ mnemonic, onLogin, method }: SuccessRegistrationProps) {
+
+function SuccessRegistration({
+  mnemonic,
+  onLogin,
+  method,
+  credentialId,
+}: SuccessRegistrationProps) {
   const [copied, setCopied] = useState(false);
 
   const copyToClipboard = () => {
@@ -62,29 +71,38 @@ function SuccessRegistration({ mnemonic, onLogin, method }: SuccessRegistrationP
 
   return (
     <div className="text-center">
-      {mnemonic && (
+      {method === "passkey" ? (
         <div className="mb-4">
-          <p className="mb-2">Your Secret Recovery Phrase:</p>
-          <div className="relative">
-            <textarea - readOnly - value="{mnemonic}" - rows="{3}" - className="w-full p-2 pr-10 border-2 border-black resize-none" - />-            <button
-              onClick={copyToClipboard}
-              className={`absolute right-2 top-1/2 transform -translate-y-1/2 ${
-                copied ? "text-green-500" : ""
-              }`}
-            >
-              {copied ? <LuCheck className="w-5 h-5" /> : <LuCopy className="w-5 h-5" />}
-            </button>
-          </div>
-          <p className="text-sm text-gray-500 mt-2">
-            Please save this phrase securely. You'll need it to log in.
-          </p>
+          <p className="mb-2">Passkey successfully registered!</p>
+          {credentialId && (
+            <p className="text-sm text-gray-500 mt-2">Key ID: ...{credentialId.slice(-4)}</p>
+          )}
         </div>
+      ) : (
+        mnemonic && (
+          <div className="mb-4">
+            <p className="mb-2">Your Secret Recovery Phrase:</p>
+            <div className="relative">
+              <textarea
+                readOnly
+                value={mnemonic}
+                rows={3}
+                className="w-full p-2 pr-10 border-2 border-black resize-none"
+              />
+              <button
+                onClick={copyToClipboard}
+                className={`absolute right-2 top-1/2 transform -translate-y-1/2 ${
+                  copied ? "text-green-500" : ""
+                }`}
+              >
+                {copied ? <LuCheck className="w-5 h-5" /> : <LuCopy className="w-5 h-5" />}
+              </button>
+            </div>
+            <p className="text-sm text-gray-500 mt-2">
+              Please save this phrase securely. You'll need it to log in.
+            </p>
+          </div>
+        )
       )}
       <button className={BTN_PRIMARY} onClick={onLogin}>
         <LuLock className="w-5 h-5" /> Continue to Login
@@ -99,11 +117,12 @@ export function AuthenticationView() {
   const [method, setMethod] = useState<AuthMethod | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [mnemonic, setMnemonic] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [registrationSuccess, setRegistrationSuccess] = useState(false);
   const [availableMethods, setAvailableMethods] = useState<AuthMethod[]>([]);
-  const [storedCredential, setStoredCredential] = useState<StoredCredential | null>(() => {
-    const stored = localStorage.getItem("storedCredential");
-    return stored ? JSON.parse(stored) : null;
-  });
+  const [storedCredential, setStoredCredential] = useState<StoredCredential | null>(() =>
+    getStoredCredential(),
+  );
 
   useEffect(() => {
     const methods: AuthMethod[] = ["passphrase"]; // Passphrase always available
@@ -123,17 +142,20 @@ export function AuthenticationView() {
     }
   }, []);
 
-  async function handleAuth<T>(action: () => Promise<T>) {
+  const handleAuth = useCallback(async <T,>(action: () => Promise<T>) => {
     try {
       setError(null);
+      setIsProcessing(true);
       return await action();
     } catch (e) {
       setError(e instanceof Error ? e.message : "Authentication failed");
       // Reset both flow and method to return to initial state
       setFlow(null);
       setMethod(null);
+    } finally {
+      setIsProcessing(false);
     }
-  }
+  }, []);
 
   const handleRegister = useCallback(
     async (selectedMethod: string) => {
@@ -142,22 +164,10 @@ export function AuthenticationView() {
           auth.passkeyRegister("Common Tools User", "commontoolsuser"),
         );
         if (!credential) throw new Error("Credential not found");
-
-        const storedCred: StoredCredential = {
-          id: credential.id,
-          type: "public-key",
-          method: "passkey",
-        };
-        localStorage.setItem("storedCredential", JSON.stringify(storedCred));
+        setMethod("passkey");
+        setRegistrationSuccess(true);
       } else {
         const mnemonic = await auth.passphraseRegister();
-        // Store passphrase credential info
-        const storedCred: StoredCredential = {
-          id: crypto.randomUUID(), // Generate a unique ID for the passphrase credential
-          type: "passphrase",
-          method: "passphrase",
-        };
-        localStorage.setItem("storedCredential", JSON.stringify(storedCred));
         setMnemonic(mnemonic);
       }
     },
@@ -167,17 +177,38 @@ export function AuthenticationView() {
   const handleLogin = useCallback(
     async (selectedMethod: string, passphrase?: string) => {
       if (selectedMethod === "passkey") {
-        if (storedCredential && storedCredential.type == "public-key") {
-          const credentialDescriptor: PublicKeyCredentialDescriptor = {
-            id: Uint8Array.from(atob(storedCredential.id), (c) => c.charCodeAt(0)),
-            type: storedCredential.type,
-          };
-          await handleAuth(() => auth.passkeyAuthenticate(credentialDescriptor));
-        } else {
-          await handleAuth(() => auth.passkeyAuthenticate());
-        }
+        const credentialDescriptor = getPublicKeyCredentialDescriptor(storedCredential);
+
+        await handleAuth(async () => {
+          setMethod("passkey");
+          setFlow("login");
+          debugger;
+          const passkey = await auth.passkeyAuthenticate(credentialDescriptor);
+
+          // Store credentials before completing authentication
+          if (!storedCredential) {
+            // Only store if we don't already have one
+            const storedCred = createPasskeyCredential(passkey.id());
+            saveCredential(storedCred);
+            setStoredCredential(storedCred);
+            // Add a small delay to ensure the UI updates
+            await new Promise((resolve) => setTimeout(resolve, 100));
+          }
+
+          return passkey;
+        });
       } else if (passphrase) {
-        await handleAuth(() => auth.passphraseAuthenticate(passphrase));
+        await handleAuth(async () => {
+          await auth.passphraseAuthenticate(passphrase);
+
+          if (!storedCredential) {
+            // Only store if we don't already have one
+            const storedCred = createPassphraseCredential();
+            saveCredential(storedCred);
+            setStoredCredential(storedCred);
+            await new Promise((resolve) => setTimeout(resolve, 100));
+          }
+        });
       }
     },
     [storedCredential, handleAuth, auth],
@@ -185,25 +216,23 @@ export function AuthenticationView() {
 
   const handleMethodSelect = useCallback(
     async (selectedMethod: AuthMethod) => {
-      debugger;
       setMethod(selectedMethod);
       if (flow === "register") {
         await handleRegister(selectedMethod);
-      } else {
-        await handleLogin(selectedMethod);
+      } else if (flow === "login") {
+        if (selectedMethod === "passkey") {
+          await handleLogin(selectedMethod); // This login already handles credential storage
+        }
+        // For passphrase, we'll wait for the form submission
       }
     },
-    [flow, setMethod, handleRegister, handleLogin],
+    [flow, handleRegister, handleLogin],
   );
 
-  const clearStoredCredential = useCallback(() => {
-    localStorage.removeItem("storedCredential");
-    setStoredCredential(null);
-  }, []);
-
   if (auth.user) {
     throw new Error("Already authenticated");
   }
+
   return (
     <div>
       <div className="flex justify-center mb-4">
@@ -212,13 +241,23 @@ export function AuthenticationView() {
       <div className="max-w-md mx-auto p-4 bg-white border-2">
         {error && <ErrorCallout error={error} onDismiss={() => setError(null)} />}
 
-        {mnemonic ? (
+        {isProcessing ? (
+          <div className="text-center py-4">
+            <p>Please follow the browser's prompts to continue...</p>
+          </div>
+        ) : mnemonic || registrationSuccess ? (
           <SuccessRegistration
-            mnemonic={mnemonic}
+            mnemonic={mnemonic || undefined}
             method={method!}
-            onLogin={() => {
-              setMnemonic(null);
-              setFlow("login");
+            credentialId={storedCredential?.id}
+            onLogin={async () => {
+              if (method === "passkey") {
+                await handleLogin("passkey");
+              } else {
+                setMnemonic(null);
+                setRegistrationSuccess(false);
+                setFlow("login");
+              }
             }}
           />
         ) : flow === null ? (
@@ -227,9 +266,13 @@ export function AuthenticationView() {
               <>
                 <button
                   className={BTN_PRIMARY}
-                  onClick={() => {
-                    setMethod(storedCredential.method);
-                    setFlow("login");
+                  onClick={async () => {
+                    if (storedCredential.method === "passkey") {
+                      await handleLogin("passkey");
+                    } else {
+                      setMethod(storedCredential.method);
+                      setFlow("login");
+                    }
                   }}
                 >
                   <LuKey className="w-5 h-5" />
@@ -243,7 +286,13 @@ export function AuthenticationView() {
                 <button className={LIST_ITEM} onClick={() => setFlow("register")}>
                   <LuKeyRound className="w-5 h-5" /> Register New Key
                 </button>
-                <button className={LIST_ITEM} onClick={clearStoredCredential}>
+                <button
+                  className={LIST_ITEM}
+                  onClick={() => {
+                    clearStoredCredential();
+                    setStoredCredential(null);
+                  }}
+                >
                   <LuTrash2 className="w-5 h-5" /> Clear Saved Credentials
                 </button>
               </>
@@ -262,7 +311,11 @@ export function AuthenticationView() {
           <div className="space-y-4">
             <h2 className="text-xl mb-4">{flow === "login" ? "Login with" : "Register with"}</h2>
             {availableMethods.map((m) => (
-              <button key={m} className={LIST_ITEM} onClick={() => handleMethodSelect(m)}>
+              <button
+                key={m}
+                className={LIST_ITEM}
+                onClick={async () => await handleMethodSelect(m)}
+              >
                 {m === "passkey" ? (
                   <>
                     <LuKey className="w-5 h-5" /> Use Passkey
@@ -281,7 +334,7 @@ export function AuthenticationView() {
         ) : method === "passphrase" ? (
           <div className="space-y-4">
             {flow === "register" ? (
-              <button className={BTN_PRIMARY} onClick={handleRegister}>
+              <button className={BTN_PRIMARY} onClick={() => handleRegister("passphrase")}>
                 <LuKeyRound className="w-5 h-5" /> Register with Passphrase
               </button>
             ) : (

From 7a063c1ab4032a6a7de5ed3e6092332f6f88c04e Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Tue, 25 Feb 2025 12:45:14 +1000
Subject: [PATCH 4/9] Re-order methods

---
 typescript/packages/jumble/src/views/AuthenticationView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
index 9e5315840..4e9ee66ad 100644
--- a/typescript/packages/jumble/src/views/AuthenticationView.tsx
+++ b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -125,8 +125,7 @@ export function AuthenticationView() {
   );
 
   useEffect(() => {
-    const methods: AuthMethod[] = ["passphrase"]; // Passphrase always available
-
+    const methods: AuthMethod[] = []; // Passphrase always available
     // Add passkey if available
     const isPasskeyAvailable =
       window.location.hostname !== "localhost" && window.PublicKeyCredential !== undefined;
@@ -135,6 +134,8 @@ export function AuthenticationView() {
       methods.push("passkey");
     }
 
+    methods.push("passphrase");
+
     setAvailableMethods(methods);
     // Only set default method if there's just one option
     if (methods.length === 1) {
@@ -182,7 +183,6 @@ export function AuthenticationView() {
         await handleAuth(async () => {
           setMethod("passkey");
           setFlow("login");
-          debugger;
           const passkey = await auth.passkeyAuthenticate(credentialDescriptor);
 
           // Store credentials before completing authentication

From d6496cf84bc51954ce2d4d93219e629875fc987a Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Wed, 26 Feb 2025 09:59:44 +1000
Subject: [PATCH 5/9] Remove unused timeouts

---
 .../packages/jumble/src/views/AuthenticationView.tsx       | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
index 4e9ee66ad..6fd655157 100644
--- a/typescript/packages/jumble/src/views/AuthenticationView.tsx
+++ b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -1,7 +1,5 @@
 import { useAuthentication } from "@/contexts/AuthenticationContext.tsx";
-import { useCallback, useRef, useState } from "react";
 import ShapeLogo from "@/assets/ShapeLogo.svg";
-import { useAuthentication } from "@/contexts/AuthenticationContext";
 import { useCallback, useEffect, useState } from "react";
 import {
   LuArrowLeft,
@@ -187,12 +185,9 @@ export function AuthenticationView() {
 
           // Store credentials before completing authentication
           if (!storedCredential) {
-            // Only store if we don't already have one
             const storedCred = createPasskeyCredential(passkey.id());
             saveCredential(storedCred);
             setStoredCredential(storedCred);
-            // Add a small delay to ensure the UI updates
-            await new Promise((resolve) => setTimeout(resolve, 100));
           }
 
           return passkey;
@@ -202,11 +197,9 @@ export function AuthenticationView() {
           await auth.passphraseAuthenticate(passphrase);
 
           if (!storedCredential) {
-            // Only store if we don't already have one
             const storedCred = createPassphraseCredential();
             saveCredential(storedCred);
             setStoredCredential(storedCred);
-            await new Promise((resolve) => setTimeout(resolve, 100));
           }
         });
       }

From 05409877b36ae00a27278ecbcfaaf572be9474a8 Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Wed, 26 Feb 2025 10:03:29 +1000
Subject: [PATCH 6/9] Remove redundant method vs type

---
 .../packages/jumble/src/contexts/AuthenticationContext.tsx   | 2 +-
 typescript/packages/jumble/src/utils/credentials.ts          | 5 +----
 typescript/packages/jumble/src/views/AuthenticationView.tsx  | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx b/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
index 73b44171d..479b5d0f0 100644
--- a/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
+++ b/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
@@ -106,7 +106,7 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
     // mnemonic so that the UI can present guidance on handling
     // the private key. The root will be derived from the mnemonic
     // on authentication.
-    const [_, mnemonic] = await Identity.generateMnemonic();
+    const [, mnemonic] = await Identity.generateMnemonic();
     return mnemonic;
   }, []);
 
diff --git a/typescript/packages/jumble/src/utils/credentials.ts b/typescript/packages/jumble/src/utils/credentials.ts
index 6c4d617ec..8e383746f 100644
--- a/typescript/packages/jumble/src/utils/credentials.ts
+++ b/typescript/packages/jumble/src/utils/credentials.ts
@@ -1,6 +1,5 @@
 export interface StoredCredential {
   id: string;
-  type: "public-key" | "passphrase";
   method: "passkey" | "passphrase";
 }
 
@@ -20,7 +19,6 @@ export function clearStoredCredential(): void {
 export function createPasskeyCredential(id: string): StoredCredential {
   return {
     id,
-    type: "public-key",
     method: "passkey",
   };
 }
@@ -28,7 +26,6 @@ export function createPasskeyCredential(id: string): StoredCredential {
 export function createPassphraseCredential(): StoredCredential {
   return {
     id: crypto.randomUUID(),
-    type: "passphrase",
     method: "passphrase",
   };
 }
@@ -36,7 +33,7 @@ export function createPassphraseCredential(): StoredCredential {
 export function getPublicKeyCredentialDescriptor(
   storedCredential: StoredCredential | null,
 ): PublicKeyCredentialDescriptor | undefined {
-  if (storedCredential?.type === "public-key") {
+  if (storedCredential?.method === "passkey") {
     return {
       id: Uint8Array.from(atob(storedCredential.id), (c) => c.charCodeAt(0)),
       type: "public-key" as PublicKeyCredentialType,
diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
index 6fd655157..d95389ee3 100644
--- a/typescript/packages/jumble/src/views/AuthenticationView.tsx
+++ b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -269,7 +269,7 @@ export function AuthenticationView() {
                   }}
                 >
                   <LuKey className="w-5 h-5" />
-                  {storedCredential.type === "public-key"
+                  {storedCredential.method === "passkey"
                     ? `Unlock with Key (${storedCredential.id.slice(-4)})`
                     : "Unlock with Passphrase"}
                 </button>

From 591e8d4198a5e5809f852e1143ce8ce129c20e23 Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Wed, 26 Feb 2025 10:06:29 +1000
Subject: [PATCH 7/9] Introduce consts for passkey and passphrase

---
 .../packages/jumble/src/utils/credentials.ts  |  7 ++-
 .../jumble/src/views/AuthenticationView.tsx   | 43 +++++++++++--------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/typescript/packages/jumble/src/utils/credentials.ts b/typescript/packages/jumble/src/utils/credentials.ts
index 8e383746f..9aea85264 100644
--- a/typescript/packages/jumble/src/utils/credentials.ts
+++ b/typescript/packages/jumble/src/utils/credentials.ts
@@ -1,6 +1,11 @@
+export const AUTH_METHOD_PASSKEY = "passkey" as const;
+export const AUTH_METHOD_PASSPHRASE = "passphrase" as const;
+
+export type AuthMethod = typeof AUTH_METHOD_PASSKEY | typeof AUTH_METHOD_PASSPHRASE;
+
 export interface StoredCredential {
   id: string;
-  method: "passkey" | "passphrase";
+  method: AuthMethod;
 }
 
 export function getStoredCredential(): StoredCredential | null {
diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
index d95389ee3..1feb0cc20 100644
--- a/typescript/packages/jumble/src/views/AuthenticationView.tsx
+++ b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -20,12 +20,14 @@ import {
   createPasskeyCredential,
   createPassphraseCredential,
   getPublicKeyCredentialDescriptor,
+  AuthMethod,
+  AUTH_METHOD_PASSKEY,
+  AUTH_METHOD_PASSPHRASE,
 } from "@/utils/credentials";
 
 const BTN_PRIMARY = `w-full px-4 py-2 bg-black text-white hover:bg-gray-800 disabled:opacity-50 flex items-center justify-center gap-2`;
 const LIST_ITEM = `w-full p-2 text-left text-sm border-2 border-black hover:-translate-y-[2px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] shadow-[1px_1px_0px_0px_rgba(0,0,0,0.3)] transition-all duration-100 ease-in-out cursor-pointer flex items-center gap-2`;
 
-type AuthMethod = "passkey" | "passphrase";
 type AuthFlow = "register" | "login";
 
 interface ErrorCalloutProps {
@@ -69,7 +71,7 @@ function SuccessRegistration({
 
   return (
     <div className="text-center">
-      {method === "passkey" ? (
+      {method === AUTH_METHOD_PASSKEY ? (
         <div className="mb-4">
           <p className="mb-2">Passkey successfully registered!</p>
           {credentialId && (
@@ -129,10 +131,10 @@ export function AuthenticationView() {
       window.location.hostname !== "localhost" && window.PublicKeyCredential !== undefined;
 
     if (isPasskeyAvailable) {
-      methods.push("passkey");
+      methods.push(AUTH_METHOD_PASSKEY);
     }
 
-    methods.push("passphrase");
+    methods.push(AUTH_METHOD_PASSPHRASE);
 
     setAvailableMethods(methods);
     // Only set default method if there's just one option
@@ -158,12 +160,12 @@ export function AuthenticationView() {
 
   const handleRegister = useCallback(
     async (selectedMethod: string) => {
-      if (selectedMethod === "passkey") {
+      if (selectedMethod === AUTH_METHOD_PASSKEY) {
         const credential = await handleAuth(() =>
           auth.passkeyRegister("Common Tools User", "commontoolsuser"),
         );
         if (!credential) throw new Error("Credential not found");
-        setMethod("passkey");
+        setMethod(AUTH_METHOD_PASSKEY);
         setRegistrationSuccess(true);
       } else {
         const mnemonic = await auth.passphraseRegister();
@@ -175,11 +177,11 @@ export function AuthenticationView() {
 
   const handleLogin = useCallback(
     async (selectedMethod: string, passphrase?: string) => {
-      if (selectedMethod === "passkey") {
+      if (selectedMethod === AUTH_METHOD_PASSKEY) {
         const credentialDescriptor = getPublicKeyCredentialDescriptor(storedCredential);
 
         await handleAuth(async () => {
-          setMethod("passkey");
+          setMethod(AUTH_METHOD_PASSKEY);
           setFlow("login");
           const passkey = await auth.passkeyAuthenticate(credentialDescriptor);
 
@@ -213,7 +215,7 @@ export function AuthenticationView() {
       if (flow === "register") {
         await handleRegister(selectedMethod);
       } else if (flow === "login") {
-        if (selectedMethod === "passkey") {
+        if (selectedMethod === AUTH_METHOD_PASSKEY) {
           await handleLogin(selectedMethod); // This login already handles credential storage
         }
         // For passphrase, we'll wait for the form submission
@@ -244,8 +246,8 @@ export function AuthenticationView() {
             method={method!}
             credentialId={storedCredential?.id}
             onLogin={async () => {
-              if (method === "passkey") {
-                await handleLogin("passkey");
+              if (method === AUTH_METHOD_PASSKEY) {
+                await handleLogin(AUTH_METHOD_PASSKEY);
               } else {
                 setMnemonic(null);
                 setRegistrationSuccess(false);
@@ -260,8 +262,8 @@ export function AuthenticationView() {
                 <button
                   className={BTN_PRIMARY}
                   onClick={async () => {
-                    if (storedCredential.method === "passkey") {
-                      await handleLogin("passkey");
+                    if (storedCredential.method === AUTH_METHOD_PASSKEY) {
+                      await handleLogin(AUTH_METHOD_PASSKEY);
                     } else {
                       setMethod(storedCredential.method);
                       setFlow("login");
@@ -269,7 +271,7 @@ export function AuthenticationView() {
                   }}
                 >
                   <LuKey className="w-5 h-5" />
-                  {storedCredential.method === "passkey"
+                  {storedCredential.method === AUTH_METHOD_PASSKEY
                     ? `Unlock with Key (${storedCredential.id.slice(-4)})`
                     : "Unlock with Passphrase"}
                 </button>
@@ -309,7 +311,7 @@ export function AuthenticationView() {
                 className={LIST_ITEM}
                 onClick={async () => await handleMethodSelect(m)}
               >
-                {m === "passkey" ? (
+                {m === AUTH_METHOD_PASSKEY ? (
                   <>
                     <LuKey className="w-5 h-5" /> Use Passkey
                   </>
@@ -324,10 +326,13 @@ export function AuthenticationView() {
               <LuArrowLeft className="w-5 h-5" /> Back
             </button>
           </div>
-        ) : method === "passphrase" ? (
+        ) : method === AUTH_METHOD_PASSPHRASE ? (
           <div className="space-y-4">
             {flow === "register" ? (
-              <button className={BTN_PRIMARY} onClick={() => handleRegister("passphrase")}>
+              <button
+                className={BTN_PRIMARY}
+                onClick={() => handleRegister(AUTH_METHOD_PASSPHRASE)}
+              >
                 <LuKeyRound className="w-5 h-5" /> Register with Passphrase
               </button>
             ) : (
@@ -335,12 +340,12 @@ export function AuthenticationView() {
                 onSubmit={(e) => {
                   e.preventDefault();
                   const form = e.target as HTMLFormElement;
-                  handleLogin(method, new FormData(form).get("passphrase") as string);
+                  handleLogin(method, new FormData(form).get(AUTH_METHOD_PASSPHRASE) as string);
                 }}
               >
                 <input
                   type="password"
-                  name="passphrase"
+                  name={AUTH_METHOD_PASSPHRASE}
                   className="w-full p-2 pr-10 border-2 border-black"
                   placeholder="Enter your passphrase"
                   autoComplete="current-password"

From fae6884a68ce9ae10b5368c8149866130ab66f6b Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Wed, 26 Feb 2025 10:11:19 +1000
Subject: [PATCH 8/9] Document failure case

---
 typescript/packages/common-identity/src/pass-key.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/typescript/packages/common-identity/src/pass-key.ts b/typescript/packages/common-identity/src/pass-key.ts
index c310b7314..dde70e0b3 100644
--- a/typescript/packages/common-identity/src/pass-key.ts
+++ b/typescript/packages/common-identity/src/pass-key.ts
@@ -39,10 +39,13 @@ export class PassKey {
   // Generate a root key from a `PassKey`.
   // A root key identity is deterministically derived from a `PassKey`'s
   // PRF output, a 32-byte hash, which is used as ed25519 key material.
+  // Note: Root keys can only be created from PassKeys obtained via PassKey.get()
   async createRootKey(): Promise<Identity> {
     let seed = this.prf();
     if (!seed) {
-      throw new Error("common-identity: No prf found from PassKey");
+      throw new Error(
+        "common-identity: No PRF found. This PassKey appears to have just been created - root keys can only be generated from PassKeys obtained via PassKey.get()",
+      );
     }
 
     return await Identity.fromRaw(seed);

From 7c24e890ffaa72b9fc0c4109f172447162b6d20f Mon Sep 17 00:00:00 2001
From: Ben Follington <5009316+bfollington@users.noreply.github.com>
Date: Wed, 26 Feb 2025 10:11:34 +1000
Subject: [PATCH 9/9] Comments and error handling

---
 .../packages/jumble/src/contexts/AuthenticationContext.tsx    | 4 ++--
 typescript/packages/jumble/src/views/AuthenticationView.tsx   | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx b/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
index 479b5d0f0..8d0fd3025 100644
--- a/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
+++ b/typescript/packages/jumble/src/contexts/AuthenticationContext.tsx
@@ -91,7 +91,7 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
       if (!keyStore) {
         throw new Error("Key store not initialized");
       }
-      // Pass the keyName to PassKey.get() if provided
+      // if we can, we prompt directly for the passed credential
       const passkey = await PassKey.get({ allowCredentials: key ? [key] : [] });
       const root = await passkey.createRootKey();
       await keyStore.set(ROOT_KEY, root);
@@ -113,7 +113,7 @@ export const AuthenticationProvider: React.FC<{ children: React.ReactNode }> = (
   const passphraseAuthenticate = useCallback(
     async (mnemonic: string) => {
       if (!keyStore) {
-        return;
+        throw new Error("Key store not initialized");
       }
       const root = await Identity.fromMnemonic(mnemonic);
       await keyStore.set(ROOT_KEY, root);
diff --git a/typescript/packages/jumble/src/views/AuthenticationView.tsx b/typescript/packages/jumble/src/views/AuthenticationView.tsx
index 1feb0cc20..7e17d12e8 100644
--- a/typescript/packages/jumble/src/views/AuthenticationView.tsx
+++ b/typescript/packages/jumble/src/views/AuthenticationView.tsx
@@ -125,7 +125,7 @@ export function AuthenticationView() {
   );
 
   useEffect(() => {
-    const methods: AuthMethod[] = []; // Passphrase always available
+    const methods: AuthMethod[] = [];
     // Add passkey if available
     const isPasskeyAvailable =
       window.location.hostname !== "localhost" && window.PublicKeyCredential !== undefined;
@@ -134,6 +134,7 @@ export function AuthenticationView() {
       methods.push(AUTH_METHOD_PASSKEY);
     }
 
+    // Passphrase always available, but second in list
     methods.push(AUTH_METHOD_PASSPHRASE);
 
     setAvailableMethods(methods);
</textarea>