@graffiti-garden/implementation-decentralized 0.1.2 → 0.1.3

package/src/3-protocol/2-handles.ts

@@ -13,16 +13,14 @@ export class Handles {
   actorToHandle: Graffiti["actorToHandle"] = async (actor) => {
     const actorDocument = await this.services.dids.resolve(actor);
 
-    const handleDid = actorDocument.alsoKnownAs?.at(0);
+    const handleDid = actorDocument.alsoKnownAs?.find((alias) =>
+      alias.startsWith(HANDLE_DID_PREFIX),
+    );
     if (!handleDid) {
       throw new GraffitiErrorNotFound(
         `Handle for actor DID ${actor} not found`,
       );
     }
-    if (!handleDid.startsWith(HANDLE_DID_PREFIX)) {
-      throw new Error(`Handle DID ${handleDid} is not a valid handle`);
-    }
-
     const handle = handleDid.slice(HANDLE_DID_PREFIX.length);
 
     const handleDocument = await this.services.dids.resolve(handleDid);

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

@@ -220,7 +220,7 @@ export class GraffitiDecentralized implements Graffiti {
       }
 
       if (handle) {
-        await this.rememberHandleInPasswordManager(handle, actor);
+        this.rememberHandleInBrowserStorage(handle);
       }
     });
 
@@ -282,8 +282,7 @@ export class GraffitiDecentralized implements Graffiti {
           "#username",
         ) as HTMLInputElement | null;
         const rememberedHandle =
-          proposedHandle ||
-          (await this.getRememberedHandleFromPasswordManager());
+          proposedHandle || this.getRememberedHandleFromBrowserStorage();
         if (input) input.value = rememberedHandle ?? "";
         input?.addEventListener("focus", () => input?.select());
         setTimeout(() => input?.focus(), 0);
@@ -328,6 +327,12 @@ export class GraffitiDecentralized implements Graffiti {
               this.login_(handle);
             }
           });
+        template
+          ?.querySelector("#graffiti-login-forgot")
+          ?.addEventListener("click", (e) => {
+            e.preventDefault();
+            void this.loginWithoutHandle();
+          });
       } else {
         template = await this.modal?.displayTemplate("graffiti-login-welcome");
         template
@@ -396,79 +401,44 @@ 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,
+  protected async loginWithoutHandle() {
+    const template = await this.modal?.displayTemplate("graffiti-login-provider");
+    const defaultProvider = new URL("/", this.identityCreatorEndpoint);
+    const provider = template?.querySelector("#graffiti-provider") as HTMLInputElement | null;
+    if (provider) provider.value = defaultProvider.host;
+    provider?.addEventListener("focus", () => provider.select());
+    setTimeout(() => provider?.focus(), 0);
+
+    template
+      ?.querySelector("#graffiti-login-provider-form")
+      ?.addEventListener("submit", (event) => {
+        event.preventDefault();
+        try {
+          const domain = provider?.value.trim() ?? "";
+          const origin = domain === defaultProvider.host
+            ? defaultProvider
+            : new URL(`https://${domain}`);
+          if (
+            !origin.hostname || origin.username || origin.password ||
+            origin.pathname !== "/" || origin.search || origin.hash
+          ) throw new Error("Invalid provider domain");
+
+          const url = new URL("/forgot-handle", origin);
+          url.searchParams.set("redirect_uri", window.location.toString());
+          window.location.assign(url.toString());
+        } catch {
+          alert("Enter a valid provider domain.");
+        }
       });
-      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();
-    }
+    template
+      ?.querySelector("#graffiti-login-provider-back")
+      ?.addEventListener("click", (event) => {
+        event.preventDefault();
+        void this.login_("");
+      });
 
-    return undefined;
+    await this.modal?.open();
   }
 
   protected rememberHandleInBrowserStorage(handle: string) {

package/src/3-protocol/login-dialog.html.ts

@@ -37,7 +37,21 @@ export const template = `<template id="graffiti-login-welcome">
     </button>
   </form>
 
-  <p>
-    Don't&nbsp;have&nbsp;a Graffiti&nbsp;handle? <a id="graffiti-login-new">Create&nbsp;one</a>.
-  </p>
+  <div style="display: grid; gap: 0.5em">
+    <p><a href="#" id="graffiti-login-forgot">Forgot your handle?</a></p>
+    <p>Don't&nbsp;have&nbsp;a Graffiti&nbsp;handle? <a id="graffiti-login-new">Create&nbsp;one</a>.</p>
+  </div>
+</template>
+
+<template id="graffiti-login-provider">
+  <h1>
+    <a target="_blank" href="https://graffiti.garden">Graffiti Log&nbsp;In</a>
+  </h1>
+
+  <form id="graffiti-login-provider-form">
+    <label for="graffiti-provider">Where did you create your Graffiti account?</label>
+    <input id="graffiti-provider" type="text" autocapitalize="none" spellcheck="false" required>
+    <button type="submit">Continue to provider</button>
+  </form>
+  <p><a href="#" id="graffiti-login-provider-back">← Back</a></p>
 </template>`;

package/src/index.spec.ts

@@ -13,7 +13,8 @@ import { Authorization } from "./1-services/1-authorization";
 import { StorageBuckets } from "./1-services/3-storage-buckets";
 import { Inboxes } from "./1-services/4-inboxes";
 import { Sessions } from "./3-protocol/1-sessions";
-import { afterAll, beforeAll, describe } from "vitest";
+import { afterAll, beforeAll, describe, expect, test } from "vitest";
+import { decode as dagCborDecode, encode as dagCborEncode } from "@ipld/dag-cbor";
 import { Handles } from "./3-protocol/2-handles";
 import { didTests } from "./1-services/2-dids-tests";
 import { storageBucketTests } from "./1-services/3-storage-buckets-tests";
@@ -106,6 +107,107 @@ describe("GraffitiDecentralized Tests", () => {
     () => sessions[1],
   );
 
+  test("OAuth codes require approval from the selected account", async () => {
+    const account = decentralizedTestUsers[0];
+    const redirectUri = "https://client.example/callback";
+    const endpoint = "https://localhost:5173/app/oauth/authorize";
+    const cookie = `account_${account.accountId}=${account.token}`;
+    const headers = {
+      Cookie: cookie,
+      "X-Graffiti-Account": String(account.accountId),
+      "Content-Type": "application/json",
+      Origin: "https://localhost:5173",
+    };
+    const request = (scope: string[], requestHeaders: HeadersInit = headers) =>
+      fetch(endpoint, {
+        method: "POST",
+        headers: requestHeaders,
+        body: JSON.stringify({ redirect_uri: redirectUri, state: "test-state", scope }),
+      });
+
+    const navigation = await fetch(
+      `${endpoint}?account=${account.accountId}&redirect_uri=${encodeURIComponent(redirectUri)}`,
+      { headers: { Cookie: cookie } },
+    );
+    expect(navigation.status).toBe(404);
+
+    expect((await request([account.bucketEndpoint], { Cookie: cookie })).status).toBe(401);
+    expect((await request([account.bucketEndpoint], {
+      ...headers,
+      Origin: "https://attacker.example",
+    })).status).toBe(403);
+    expect((await request([decentralizedTestUsers[1].bucketEndpoint])).status).toBe(403);
+
+    const approval = await request([account.bucketEndpoint]);
+    expect(approval.status).toBe(200);
+    const { redirectUri: callback } = await approval.json() as { redirectUri: string };
+    const code = new URL(callback).searchParams.get("code");
+    expect(code).toBeTruthy();
+    expect(new URL(callback).searchParams.get("state")).toBe("test-state");
+
+    const exchange = await fetch("https://localhost:5173/app/oauth/token", {
+      method: "POST",
+      body: new URLSearchParams({ code: code!, redirect_uri: redirectUri }),
+    });
+    expect(exchange.status).toBe(200);
+    expect((await exchange.json()).access_token).toBeTypeOf("string");
+  });
+
+  test("deleting a bucket removes its values and rejects requests to its old URL", async () => {
+    const account = decentralizedTestUsers[0];
+    const smallKey = crypto.randomUUID();
+    const largeKey = crypto.randomUUID();
+    const largeValue = new Uint8Array(32 * 1024 + 1).fill(7);
+    const authorization = { Authorization: `Bearer ${account.token}` };
+
+    for (const [key, value] of [
+      [smallKey, new Uint8Array([1, 2, 3])],
+      [largeKey, largeValue],
+    ] as const) {
+      const response = await fetch(`${account.bucketEndpoint}/value/${key}`, {
+        method: "PUT",
+        headers: authorization,
+        body: value,
+      });
+      expect(response.status).toBe(201);
+    }
+
+    const r2Key = `${account.bucketId}/${largeKey}`;
+    expect(await environment.storedR2ObjectExists(r2Key)).toBe(true);
+
+    const deletion = await fetch(
+      `https://localhost:5173/app/service-instances/bucket/service/${account.bucketId}`,
+      {
+        method: "DELETE",
+        headers: {
+          Cookie: `account_${account.accountId}=${account.token}`,
+          "X-Graffiti-Account": String(account.accountId),
+        },
+      },
+    );
+    expect(deletion.status).toBe(200);
+
+    expect(await environment.storedR2ObjectExists(r2Key)).toBe(false);
+    for (const key of [smallKey, largeKey]) {
+      const response = await fetch(`${account.bucketEndpoint}/value/${key}`);
+      expect(response.status).toBe(404);
+    }
+    const batch = await fetch(`${account.bucketEndpoint}/values`, {
+      method: "POST",
+      headers: { "Content-Type": "application/cbor" },
+      body: dagCborEncode({ keys: [smallKey, largeKey], maxValueBytes: largeValue.length }).slice(),
+    });
+    expect((dagCborDecode(await batch.arrayBuffer()) as { results: { status: number }[] }).results)
+      .toEqual([{ status: 404 }, { status: 404 }]);
+
+    const putAfterDeletion = await fetch(`${account.bucketEndpoint}/value/${smallKey}`, {
+      method: "PUT",
+      headers: authorization,
+      body: new Uint8Array([4]),
+    });
+    expect(putAfterDeletion.status).toBe(404);
+  });
+
   // How to log in/out vvv
   async function login(handle: string) {
     const actor = await handleMethods.handleToActor(handle);