@graffiti-garden/implementation-decentralized 0.0.7 → 0.0.9

package/src/3-protocol/4-graffiti.ts

@@ -37,6 +37,7 @@ import {
   type LabeledMessage,
   type MessageStream,
 } from "../1-services/4-inboxes";
+import { GraffitiErrorUnauthorized } from "../1-services/utilities";
 
 import {
   StringEncoder,
@@ -133,6 +134,7 @@ export interface GraffitiDecentralizedOptions {
 }
 
 const CONCURRENCY = 16;
+const LOCAL_STORAGE_REMEMBERED_HANDLE_KEY = "graffiti-login-remembered-handle";
 
 export class GraffitiDecentralized implements Graffiti {
   protected readonly dids = new DecentralizedIdentifiers();
@@ -188,10 +190,11 @@ export class GraffitiDecentralized implements Graffiti {
     this.sessionEvents.addEventListener("login", async (event) => {
       if (!(event instanceof CustomEvent)) return;
       const detail = event.detail as GraffitiLoginEvent["detail"];
-      if (
-        detail.error !== undefined &&
-        !("manual" in detail && detail.manual)
-      ) {
+
+      if (detail.error !== undefined) {
+        // If "manual", the window was closed by the user, nothing to do
+        if ("manual" in detail && detail.manual) return;
+
         alert("Login failed: " + detail.error.message);
         const actor = detail.session?.actor;
         let handle: string | undefined;
@@ -202,9 +205,46 @@ export class GraffitiDecentralized implements Graffiti {
             console.error("Failed to handle actor:", error);
           }
         }
+        // Open the login window again with the failed actor
         this.login_(handle);
+        return;
+      }
+
+      const actor = detail.session.actor;
+
+      let handle: string | undefined;
+      try {
+        handle = await this.actorToHandle(actor);
+      } catch (error) {
+        console.error("Failed to load handle from actor:", error);
+      }
+
+      if (handle) {
+        await this.rememberHandleInPasswordManager(handle, actor);
       }
     });
+
+    // If any methods throw an unauthorized error,
+    // log out the used session
+    for (const method of [
+      "post",
+      "get",
+      "delete",
+      "postMedia",
+      "getMedia",
+      "deleteMedia",
+    ]) {
+      const fn = (this as any)[method];
+      (this as any)[method] = async (...args: unknown[]) => {
+        try {
+          return await fn(...args);
+        } catch (e) {
+          const session = args[args.length - 1] as any;
+          await this.tryLogoutIfUnauthorized(e, session);
+          throw e;
+        }
+      };
+    }
   }
 
   readonly actorToHandle: Graffiti["actorToHandle"] =
@@ -241,7 +281,10 @@ export class GraffitiDecentralized implements Graffiti {
         const input = template?.querySelector(
           "#username",
         ) as HTMLInputElement | null;
-        input?.setAttribute("value", proposedHandle);
+        const rememberedHandle =
+          proposedHandle ||
+          (await this.getRememberedHandleFromPasswordManager());
+        if (input) input.value = rememberedHandle ?? "";
         input?.addEventListener("focus", () => input?.select());
         setTimeout(() => input?.focus(), 0);
 
@@ -353,6 +396,105 @@ export class GraffitiDecentralized implements Graffiti {
     }
   }
 
+  protected async rememberHandleInPasswordManager(
+    handle: string,
+    actor: string,
+  ) {
+    if (typeof window === "undefined") return;
+
+    const credentials = window.navigator.credentials;
+
+    const PasswordCredentialConstructor = (
+      window as unknown as {
+        PasswordCredential?: new (data: {
+          id: string;
+          password: string;
+          name?: string;
+        }) => Credential;
+      }
+    ).PasswordCredential;
+
+    if (!credentials?.store || !PasswordCredentialConstructor) {
+      this.rememberHandleInBrowserStorage(handle);
+      return;
+    }
+
+    try {
+      const credential = new PasswordCredentialConstructor({
+        id: handle,
+        // Graffiti logins use external authorization; this stable placeholder
+        // allows browsers/password managers to persist the handle.
+        password: "no-password",
+        name: handle,
+      });
+      await credentials.store(credential);
+    } catch (error) {
+      console.error("Failed to remember handle in password manager:", error);
+      this.rememberHandleInBrowserStorage(handle);
+    }
+  }
+
+  protected async getRememberedHandleFromPasswordManager() {
+    if (typeof window === "undefined") return undefined;
+
+    const credentials = window.navigator.credentials;
+    const PasswordCredentialConstructor = (
+      window as unknown as {
+        PasswordCredential?: new (data: {
+          id: string;
+          password: string;
+          name?: string;
+        }) => Credential;
+      }
+    ).PasswordCredential;
+    if (!credentials?.get || !PasswordCredentialConstructor) {
+      return this.getRememberedHandleFromBrowserStorage();
+    }
+
+    try {
+      const credential = await credentials.get({
+        password: true,
+        mediation: "optional",
+      } as any);
+      if (
+        credential &&
+        "id" in credential &&
+        typeof credential.id === "string"
+      ) {
+        return credential.id;
+      }
+    } catch (error) {
+      console.error("Failed to load handle from password manager:", error);
+      return this.getRememberedHandleFromBrowserStorage();
+    }
+
+    return undefined;
+  }
+
+  protected rememberHandleInBrowserStorage(handle: string) {
+    if (typeof window === "undefined") return;
+
+    try {
+      window.localStorage.setItem(LOCAL_STORAGE_REMEMBERED_HANDLE_KEY, handle);
+    } catch (error) {
+      console.error("Failed to remember handle in browser storage:", error);
+    }
+  }
+
+  protected getRememberedHandleFromBrowserStorage() {
+    if (typeof window === "undefined") return undefined;
+
+    try {
+      return (
+        window.localStorage.getItem(LOCAL_STORAGE_REMEMBERED_HANDLE_KEY) ??
+        undefined
+      );
+    } catch (error) {
+      console.error("Failed to load handle from browser storage:", error);
+      return undefined;
+    }
+  }
+
   logout: Graffiti["logout"] = async (session) => {
     await this.sessions.logout(session.actor);
   };
@@ -720,6 +862,7 @@ export class GraffitiDecentralized implements Graffiti {
             error: next.error,
             origin: allInboxes[next.index].serviceEndpoint,
           };
+          this.tryLogoutIfUnauthorized(next.error, session);
         } else if (next.result.done) {
           // Store the cursor for future use
           const inbox = allInboxes[next.index];
@@ -783,6 +926,9 @@ export class GraffitiDecentralized implements Graffiti {
           }
         }
       }
+    } catch (e) {
+      this.tryLogoutIfUnauthorized(e, session);
+      throw e;
     } finally {
       await Promise.all(
         iterators.map<Promise<void>>(async (it) => {
@@ -823,6 +969,15 @@ export class GraffitiDecentralized implements Graffiti {
     return this.discoverMeta<{}>(channels, {}, cursors, session);
   };
 
+  protected async tryLogoutIfUnauthorized(
+    e: unknown,
+    session?: GraffitiSession | null,
+  ) {
+    if (e instanceof GraffitiErrorUnauthorized && session) {
+      await this.sessions.logout(session.actor);
+    }
+  }
+
   async announceObject(
     object: GraffitiObjectBase,
     tags: Uint8Array[],