Add basic login

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+@jsr:registry=https://npm.jsr.io

package-lock.json

@@ -7,6 +7,10 @@
 		"": {
 			"name": "squalk",
 			"version": "0.0.1",
+			"dependencies": {
+				"@nostr/gadgets": "npm:@jsr/nostr__gadgets@^0.1.8",
+				"@nostr/tools": "npm:@jsr/nostr__tools@^2.23.3"
+			},
 			"devDependencies": {
 				"@eslint/compat": "^2.0.4",
 				"@eslint/js": "^10.0.1",
@@ -331,6 +335,30 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@jsr/fiatjaf__lru-cache": {
+			"version": "0.0.1",
+			"resolved": "https://npm.jsr.io/~/11/@jsr/fiatjaf__lru-cache/0.0.1.tgz",
+			"integrity": "sha512-9MbsYMHWGe751L4E7XpxV3jWydd+N6RJv+c7tYtK03lST5xdcULn2QZorImZgCbP8qUu47n1RL7RrqvjZdmXPg=="
+		},
+		"node_modules/@jsr/henrygd__semaphore": {
+			"version": "0.0.2",
+			"resolved": "https://npm.jsr.io/~/11/@jsr/henrygd__semaphore/0.0.2.tgz",
+			"integrity": "sha512-nrwZ8HaqU1Agb2ij8omIxaOCAsKkDHWcwS9hTRumPhZuptwh6/0BJExBd8+eClTYM7jBnZxK+cP4WJRTcHBvCA=="
+		},
+		"node_modules/@jsr/nostr__tools": {
+			"version": "2.23.3",
+			"resolved": "https://npm.jsr.io/~/11/@jsr/nostr__tools/2.23.3.tgz",
+			"integrity": "sha512-jknaAXP0YMnibM7hd4K6+CpASOMHuP5b8fBV9i5OKv5KHvcjTZClW1epBbwdybFrsi01RcmWwiYdSwUGnfmGAA==",
+			"dependencies": {
+				"@noble/ciphers": "2.1.1",
+				"@noble/curves": "2.0.1",
+				"@noble/hashes": "2.0.1",
+				"@scure/base": "2.0.0",
+				"@scure/bip32": "2.0.1",
+				"@scure/bip39": "2.0.1",
+				"nostr-wasm": "0.1.0"
+			}
+		},
 		"node_modules/@napi-rs/wasm-runtime": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -350,6 +378,73 @@
 				"@emnapi/runtime": "^1.7.1"
 			}
 		},
+		"node_modules/@noble/ciphers": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-2.1.1.tgz",
+			"integrity": "sha512-bysYuiVfhxNJuldNXlFEitTVdNnYUc+XNJZd7Qm2a5j1vZHgY+fazadNFWFaMK/2vye0JVlxV3gHmC0WDfAOQw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20.19.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@noble/curves": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@noble/curves/-/curves-2.0.1.tgz",
+			"integrity": "sha512-vs1Az2OOTBiP4q0pwjW5aF0xp9n4MxVrmkFBxc6EKZc6ddYx5gaZiAsZoq0uRRXWbi3AT/sBqn05eRPtn1JCPw==",
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "2.0.1"
+			},
+			"engines": {
+				"node": ">= 20.19.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@noble/hashes": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+			"integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20.19.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@nostr/gadgets": {
+			"name": "@jsr/nostr__gadgets",
+			"version": "0.1.8",
+			"resolved": "https://npm.jsr.io/~/11/@jsr/nostr__gadgets/0.1.8.tgz",
+			"integrity": "sha512-N6890VkkXqXxIVlp/fOIQRaHOmNrIZrdafua/0kSSsko8JImuT3hFYJxG9jt0jpx+/18QG0ogaFrXOZdWgS2Qg==",
+			"dependencies": {
+				"@jsr/fiatjaf__lru-cache": "^0.0.1",
+				"@jsr/henrygd__semaphore": "^0.0.2",
+				"@jsr/nostr__tools": "^2.23.0",
+				"@noble/hashes": "2.0.1",
+				"idb-keyval": "^6.2.1"
+			}
+		},
+		"node_modules/@nostr/tools": {
+			"name": "@jsr/nostr__tools",
+			"version": "2.23.3",
+			"resolved": "https://npm.jsr.io/~/11/@jsr/nostr__tools/2.23.3.tgz",
+			"integrity": "sha512-jknaAXP0YMnibM7hd4K6+CpASOMHuP5b8fBV9i5OKv5KHvcjTZClW1epBbwdybFrsi01RcmWwiYdSwUGnfmGAA==",
+			"dependencies": {
+				"@noble/ciphers": "2.1.1",
+				"@noble/curves": "2.0.1",
+				"@noble/hashes": "2.0.1",
+				"@scure/base": "2.0.0",
+				"@scure/bip32": "2.0.1",
+				"@scure/bip39": "2.0.1",
+				"nostr-wasm": "0.1.0"
+			}
+		},
 		"node_modules/@oxc-project/types": {
 			"version": "0.127.0",
 			"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.127.0.tgz",
@@ -631,6 +726,42 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@scure/base": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@scure/base/-/base-2.0.0.tgz",
+			"integrity": "sha512-3E1kpuZginKkek01ovG8krQ0Z44E3DHPjc5S2rjJw9lZn3KSQOs8S7wqikF/AH7iRanHypj85uGyxk0XAyC37w==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@scure/bip32": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-2.0.1.tgz",
+			"integrity": "sha512-4Md1NI5BzoVP+bhyJaY3K6yMesEFzNS1sE/cP+9nuvE7p/b0kx9XbpDHHFl8dHtufcbdHRUUQdRqLIPHN/s7yA==",
+			"license": "MIT",
+			"dependencies": {
+				"@noble/curves": "2.0.1",
+				"@noble/hashes": "2.0.1",
+				"@scure/base": "2.0.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@scure/bip39": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-2.0.1.tgz",
+			"integrity": "sha512-PsxdFj/d2AcJcZDX1FXN3dDgitDDTmwf78rKZq1a6c1P1Nan1X/Sxc7667zU3U+AN60g7SxxP0YCVw2H/hBycg==",
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "2.0.1",
+				"@scure/base": "2.0.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
 		"node_modules/@standard-schema/spec": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -1908,6 +2039,12 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/idb-keyval": {
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
+			"integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/ignore": {
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2423,6 +2560,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/nostr-wasm": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/nostr-wasm/-/nostr-wasm-0.1.0.tgz",
+			"integrity": "sha512-78BTryCLcLYv96ONU8Ws3Q1JzjlAt+43pWQhIl86xZmWeegYCNLPml7yQ+gG3vR6V5h4XGj+TxO+SS5dsThQIA==",
+			"license": "MIT"
+		},
 		"node_modules/obug": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",

package.json

@@ -36,5 +36,9 @@
 		"typescript": "^6.0.2",
 		"typescript-eslint": "^8.58.1",
 		"vite": "^8.0.7"
+	},
+	"dependencies": {
+		"@nostr/gadgets": "npm:@jsr/nostr__gadgets@^0.1.8",
+		"@nostr/tools": "npm:@jsr/nostr__tools@^2.23.3"
 	}
 }

src/lib/auth.svelte.ts

@@ -0,0 +1,38 @@
+import type { NostrUser } from "@nostr/gadgets/metadata";
+import type { WindowNostr } from "@nostr/tools/nip07";
+
+declare global {
+  interface Window {
+    nostr?: WindowNostr;
+  }
+}
+
+let user = $state<NostrUser | null>(null);
+let signer = $state<WindowNostr | null>(null);
+
+export const auth = {
+  get user() {
+    return user;
+  },
+  get signer() {
+    return signer;
+  },
+};
+
+export async function login() {
+  if (!window.nostr) {
+    alert(
+      "No Nostr extension found. Please install a Nostr extension like nos2x.",
+    );
+    return;
+  }
+  const pubkey = await window.nostr.getPublicKey();
+  signer = window.nostr;
+  const { loadNostrUser } = await import("@nostr/gadgets/metadata");
+  user = await loadNostrUser(pubkey);
+}
+
+export function logout() {
+  user = null;
+  signer = null;
+}

src/lib/components/LeftSidebar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { rooms, community } from "$lib/mock";
+  import { auth, login, logout } from "$lib/auth.svelte";
 
   type Props = {
     mode: "simple" | "full";
@@ -9,6 +10,7 @@
   let { mode, activeRoom }: Props = $props();
 
   const groups = [...new Set(rooms.map((r) => r.group))];
+
 </script>
 
 <aside
@@ -66,9 +68,36 @@
     </nav>
   </div>
 
-  <button
+  {#if auth.user}
-    class="mt-3 w-full rounded bg-brand px-3 py-1.5 font-medium text-sm text-white hover:bg-brand-hover"
+    <button
-  >
+      onclick={() => {
-    Join with Nostr
+        if (confirm("Log out?")) logout();
-  </button>
+      }}
+      class="mt-3 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-200"
+      aria-label="Account options"
+    >
+      {#if auth.user.metadata.picture}
+        <img
+          src={auth.user.metadata.picture}
+          alt=""
+          class="h-7 w-7 rounded-full object-cover"
+        />
+      {:else}
+        <span
+          class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gray-300 text-xs font-semibold text-gray-600"
+          aria-hidden="true"
+        >
+          {auth.user.shortName.slice(0, 1).toUpperCase()}
+        </span>
+      {/if}
+      <span class="truncate font-medium">{auth.user.shortName}</span>
+    </button>
+  {:else}
+    <button
+      onclick={login}
+      class="mt-3 w-full rounded bg-brand px-3 py-1.5 font-medium text-sm text-white hover:bg-brand-hover"
+    >
+      Login
+    </button>
+  {/if}
 </aside>