highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-04-08 22:47:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance login options with read-only and nsec support (#126)

Browse Source 
* feat: enhance login options with read-only and nsec support

- Add read-only login mode supporting:
  - npub (bech32 public key)
  - nprofile (bech32 profile with relay hints)
  - hex public key
  - NIP-05 addresses (user@domain.com)

- Add private key (nsec) login with security warning
  - Supports nsec1... format
  - Supports 64-char hex private key
  - Shows prominent security warning about localStorage storage

- Reorganize user menu to show login before theme option

- Use ReadonlyAccount from applesauce-accounts for read-only mode
- Use PrivateKeyAccount from applesauce-accounts for nsec login
- Update LoginDialog with 4 tabs: Extension, Read-Only, Private Key, Remote
- All account types properly registered via registerCommonAccountTypes()

Technical notes:
- ReadonlySigner throws errors on sign/encrypt operations
- Existing components naturally handle accounts without signing capability
- Hub/ActionRunner already syncs with account signers automatically

* feat: add generate identity button to login dialog

- Add "Generate Identity" button above login tabs
- Uses Wand2 icon from lucide-react
- Creates new key pair using PrivateKeyAccount.generateNew()
- Automatically stores nsec in localStorage and sets as active account
- Provides quick onboarding for new users without external wallet setup

* feat: add useAccount hook for signing capability detection

Created a centralized hook to check account signing capabilities and
refactored components to distinguish between signing and read-only operations.

New hook (src/hooks/useAccount.ts):
- Returns account, pubkey, canSign, signer, isLoggedIn
- Detects ReadonlyAccount vs signing accounts
- Provides clear API for checking signing capability

Refactored components:
- ChatViewer: Use canSign for message composer, replying, actions
  - Show "Sign in to send messages" for read-only accounts
  - Disable message input for accounts without signing
- SpellDialog: Use canSign for publishing spells
  - Show clear warning for read-only accounts
  - Updated error messages to mention read-only limitation
- useEmojiSearch: Use pubkey for loading custom emoji lists
  - Works correctly with both signing and read-only accounts

Benefits:
- Clear separation between read (pubkey) and write (canSign, signer) operations
- Read-only accounts can browse, view profiles, load data
- Signing operations properly disabled for read-only accounts
- Consistent pattern across the codebase for account checks
- Better UX with specific messages about account capabilities

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Alejandro
2026-01-17 21:14:44 +01:00
committed by GitHub
parent 5300d87d53
commit ee2b62f2d6
6 changed files with 421 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/ChatViewer.tsx
View File

@@ -15,7 +15,6 @@ import {
import { nip19 } from "nostr-tools";
import { getZapRequest } from "applesauce-common/helpers/zap";
import { toast } from "sonner";
import accountManager from "@/services/accounts";
import eventStore from "@/services/event-store";
import type {
ChatProtocol,
@@ -51,6 +50,7 @@ import {
import { useProfileSearch } from "@/hooks/useProfileSearch";
import { useEmojiSearch } from "@/hooks/useEmojiSearch";
import { useCopy } from "@/hooks/useCopy";
import { useAccount } from "@/hooks/useAccount";
import { Label } from "./ui/label";
import {
Tooltip,
@@ -437,9 +437,8 @@ export function ChatViewer({
}: ChatViewerProps) {
const { addWindow } = useGrimoire();
// Get active account
const activeAccount = use$(accountManager.active$);
const hasActiveAccount = !!activeAccount;
// Get active account with signing capability
const { pubkey, canSign, signer } = useAccount();
// Profile search for mentions
const { searchProfiles } = useProfileSearch();
@@ -513,14 +512,14 @@ export function ChatViewer({
async (query: string) => {
const availableActions = adapter.getActions({
conversation: conversation || undefined,
activePubkey: activeAccount?.pubkey,
activePubkey: pubkey,
});
const lowerQuery = query.toLowerCase();
return availableActions.filter((action) =>
action.name.toLowerCase().includes(lowerQuery),
);
},
[adapter, conversation, activeAccount],
[adapter, conversation, pubkey],
);
// Cleanup subscriptions when conversation changes or component unmounts
@@ -596,7 +595,7 @@ export function ChatViewer({
emojiTags?: EmojiTag[],
blobAttachments?: BlobAttachment[],
) => {
if (!conversation || !hasActiveAccount || isSending) return;
if (!conversation || !canSign || isSending) return;
// Check if this is a slash command
const slashCmd = parseSlashCommand(content);
@@ -605,8 +604,8 @@ export function ChatViewer({
setIsSending(true);
try {
const result = await adapter.executeAction(slashCmd.command, {
activePubkey: activeAccount.pubkey,
activeSigner: activeAccount.signer,
activePubkey: pubkey!,
activeSigner: signer!,
conversation,
});
@@ -649,13 +648,13 @@ export function ChatViewer({
// Handle command execution from autocomplete
const handleCommandExecute = useCallback(
async (action: ChatAction) => {
if (!conversation || !hasActiveAccount || isSending) return;
if (!conversation || !canSign || isSending) return;
setIsSending(true);
try {
const result = await adapter.executeAction(action.name, {
activePubkey: activeAccount.pubkey,
activeSigner: activeAccount.signer,
activePubkey: pubkey!,
activeSigner: signer!,
conversation,
});
@@ -673,7 +672,7 @@ export function ChatViewer({
setIsSending(false);
}
},
[conversation, hasActiveAccount, isSending, adapter, activeAccount],
[conversation, canSign, isSending, adapter, pubkey, signer],
);
// Handle reply button click
@@ -987,7 +986,7 @@ export function ChatViewer({
adapter={adapter}
conversation={conversation}
onReply={handleReply}
canReply={hasActiveAccount}
canReply={canSign}
onScrollToMessage={handleScrollToMessage}
/>
);
@@ -1001,8 +1000,8 @@ export function ChatViewer({
)}
</div>
{/* Message composer - only show if user has active account */}
{hasActiveAccount ? (
{/* Message composer - only show if user can sign */}
{canSign ? (
<div className="border-t px-2 py-1 pb-0">
{replyTo && (
<ComposerReplyPreview

298
src/components/nostr/LoginDialog.tsx
View File

@@ -7,8 +7,10 @@ import {
import {
ExtensionAccount,
NostrConnectAccount,
ReadonlyAccount,
PrivateKeyAccount,
} from "applesauce-accounts/accounts";
import { generateSecretKey } from "nostr-tools";
import { generateSecretKey, nip19 } from "nostr-tools";
import QRCode from "qrcode";
import {
Dialog,
@@ -27,9 +29,15 @@ import {
Copy,
Check,
AlertCircle,
Eye,
Key,
ShieldAlert,
Wand2,
} from "lucide-react";
import accounts from "@/services/accounts";
import pool from "@/services/relay-pool";
import { resolveNip05, isNip05 } from "@/lib/nip05";
import { isValidHexPubkey, normalizeHex } from "@/lib/nostr-validation";
// Default relays for NIP-46 communication
const DEFAULT_NIP46_RELAYS = [
@@ -38,7 +46,7 @@ const DEFAULT_NIP46_RELAYS = [
"wss://nos.lol",
];
type LoginTab = "extension" | "nostr-connect";
type LoginTab = "extension" | "readonly" | "nsec" | "nostr-connect";
interface LoginDialogProps {
open: boolean;
@@ -50,6 +58,12 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// Read-only login state
const [readonlyInput, setReadonlyInput] = useState("");
// Private key (nsec) login state
const [nsecInput, setNsecInput] = useState("");
// NIP-46 state
const [bunkerUrl, setBunkerUrl] = useState("");
const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
@@ -72,6 +86,8 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
if (!open) {
setLoading(false);
setError(null);
setReadonlyInput("");
setNsecInput("");
setBunkerUrl("");
setQrDataUrl(null);
setConnectUri(null);
@@ -84,7 +100,13 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
}, [open]);
const handleSuccess = useCallback(
(account: ExtensionAccount<unknown> | NostrConnectAccount<unknown>) => {
(
account:
| ExtensionAccount<unknown>
| NostrConnectAccount<unknown>
| ReadonlyAccount<unknown>
| PrivateKeyAccount<unknown>,
) => {
accounts.addAccount(account);
accounts.setActive(account);
onOpenChange(false);
@@ -112,6 +134,127 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
}
}
// Read-only login
async function loginWithReadonly() {
if (!readonlyInput.trim()) {
setError("Please enter a pubkey, npub, nprofile, or NIP-05 address");
return;
}
setLoading(true);
setError(null);
try {
let pubkey: string;
// Try npub/nprofile decode
if (
readonlyInput.startsWith("npub") ||
readonlyInput.startsWith("nprofile")
) {
try {
const decoded = nip19.decode(readonlyInput);
if (decoded.type === "npub") {
pubkey = decoded.data;
} else if (decoded.type === "nprofile") {
pubkey = decoded.data.pubkey;
} else {
throw new Error("Invalid format");
}
} catch (err) {
throw new Error(
`Invalid bech32 identifier: ${err instanceof Error ? err.message : "unknown error"}`,
);
}
}
// Try hex pubkey
else if (isValidHexPubkey(readonlyInput)) {
pubkey = normalizeHex(readonlyInput);
}
// Try NIP-05
else if (isNip05(readonlyInput)) {
const resolved = await resolveNip05(readonlyInput);
if (!resolved) {
throw new Error(
`Failed to resolve NIP-05 identifier: ${readonlyInput}`,
);
}
pubkey = resolved;
} else {
throw new Error(
"Invalid format. Supported: npub1..., nprofile1..., hex pubkey, or user@domain.com",
);
}
const account = ReadonlyAccount.fromPubkey(pubkey);
handleSuccess(account);
} catch (err) {
console.error("Read-only login error:", err);
setError(err instanceof Error ? err.message : "Failed to create account");
} finally {
setLoading(false);
}
}
// Private key (nsec) login
async function loginWithNsec() {
if (!nsecInput.trim()) {
setError("Please enter a private key");
return;
}
setLoading(true);
setError(null);
try {
let account: PrivateKeyAccount<unknown>;
// Try nsec decode
if (nsecInput.startsWith("nsec")) {
try {
account = PrivateKeyAccount.fromKey(nsecInput);
} catch (err) {
throw new Error(
`Invalid nsec: ${err instanceof Error ? err.message : "unknown error"}`,
);
}
}
// Try hex private key
else if (/^[0-9a-f]{64}$/i.test(nsecInput)) {
account = PrivateKeyAccount.fromKey(nsecInput);
} else {
throw new Error(
"Invalid format. Supported: nsec1... or 64-character hex private key",
);
}
handleSuccess(account);
} catch (err) {
console.error("Nsec login error:", err);
setError(err instanceof Error ? err.message : "Failed to create account");
} finally {
setLoading(false);
}
}
// Generate new identity
async function generateNewIdentity() {
setLoading(true);
setError(null);
try {
const account = PrivateKeyAccount.generateNew();
handleSuccess(account);
} catch (err) {
console.error("Generate identity error:", err);
setError(
err instanceof Error ? err.message : "Failed to generate identity",
);
} finally {
setLoading(false);
}
}
// Bunker URL login
async function loginWithBunkerUrl() {
if (!bunkerUrl.trim()) {
@@ -266,15 +409,42 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
</DialogDescription>
</DialogHeader>
<Button
onClick={generateNewIdentity}
disabled={loading}
variant="outline"
className="w-full"
>
{loading ? (
<>
<Loader2 className="mr-2 size-4 animate-spin" />
Generating...
</>
) : (
<>
<Wand2 className="mr-2 size-4" />
Generate Identity
</>
)}
</Button>
<Tabs value={tab} onValueChange={(v) => setTab(v as LoginTab)}>
<TabsList className="grid w-full grid-cols-2">
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="extension" className="gap-2">
<Puzzle className="size-4" />
Extension
<span className="hidden sm:inline">Extension</span>
</TabsTrigger>
<TabsTrigger value="readonly" className="gap-2">
<Eye className="size-4" />
<span className="hidden sm:inline">Read-Only</span>
</TabsTrigger>
<TabsTrigger value="nsec" className="gap-2">
<Key className="size-4" />
<span className="hidden sm:inline">Private Key</span>
</TabsTrigger>
<TabsTrigger value="nostr-connect" className="gap-2">
<QrCode className="size-4" />
Nostr Connect
<span className="hidden sm:inline">Remote</span>
</TabsTrigger>
</TabsList>
@@ -317,6 +487,122 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
</Button>
</TabsContent>
<TabsContent value="readonly" className="space-y-4">
<p className="text-sm text-muted-foreground">
Browse Nostr in read-only mode. You can view content but cannot
sign events or post.
</p>
{error && tab === "readonly" && (
<div className="flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
<AlertCircle className="mt-0.5 size-4 shrink-0" />
<span>{error}</span>
</div>
)}
<div className="space-y-2">
<label
htmlFor="readonly-input"
className="text-sm font-medium leading-none"
>
Public Key or Identifier
</label>
<Input
id="readonly-input"
placeholder="npub1..., nprofile1..., hex pubkey, or user@domain.com"
value={readonlyInput}
onChange={(e) => setReadonlyInput(e.target.value)}
disabled={loading}
/>
<p className="text-xs text-muted-foreground">
Supports npub, nprofile, hex pubkey, or NIP-05 addresses
</p>
</div>
<Button
onClick={loginWithReadonly}
disabled={loading || !readonlyInput.trim()}
className="w-full"
>
{loading ? (
<>
<Loader2 className="mr-2 size-4 animate-spin" />
Loading...
</>
) : (
<>
<Eye className="mr-2 size-4" />
Continue in Read-Only Mode
</>
)}
</Button>
</TabsContent>
<TabsContent value="nsec" className="space-y-4">
<div className="flex items-start gap-2 rounded-md border border-red-500/50 bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-400">
<ShieldAlert className="mt-0.5 size-4 shrink-0" />
<div className="space-y-1">
<p className="font-medium">Security Warning</p>
<p>
Entering your private key is not recommended. Your key will be
stored in browser localStorage and could be exposed. Consider
using an extension or remote signer instead.
</p>
</div>
</div>
<p className="text-sm text-muted-foreground">
Log in by pasting your private key (nsec or hex format). Only use
this on trusted devices.
</p>
{error && tab === "nsec" && (
<div className="flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
<AlertCircle className="mt-0.5 size-4 shrink-0" />
<span>{error}</span>
</div>
)}
<div className="space-y-2">
<label
htmlFor="nsec-input"
className="text-sm font-medium leading-none"
>
Private Key
</label>
<Input
id="nsec-input"
type="password"
placeholder="nsec1... or hex private key"
value={nsecInput}
onChange={(e) => setNsecInput(e.target.value)}
disabled={loading}
/>
<p className="text-xs text-muted-foreground">
Supports nsec or 64-character hex private key
</p>
</div>
<Button
onClick={loginWithNsec}
disabled={loading || !nsecInput.trim()}
className="w-full"
variant="destructive"
>
{loading ? (
<>
<Loader2 className="mr-2 size-4 animate-spin" />
Loading...
</>
) : (
<>
<Key className="mr-2 size-4" />
Log in with Private Key
</>
)}
</Button>
</TabsContent>
<TabsContent value="nostr-connect" className="space-y-4">
<p className="text-sm text-muted-foreground">
Log in using NIP-46 remote signing. Scan the QR code with a signer

22
src/components/nostr/SpellDialog.tsx
View File

@@ -11,8 +11,6 @@ import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { use$ } from "applesauce-react/hooks";
import accounts from "@/services/accounts";
import { parseReqCommand } from "@/lib/req-parser";
import { reconstructCommand, detectCommandType } from "@/lib/spell-conversion";
import type { ParsedSpell, SpellEvent } from "@/types/spell";
@@ -20,6 +18,7 @@ import { Loader2 } from "lucide-react";
import { saveSpell } from "@/services/spell-storage";
import { LocalSpell } from "@/services/db";
import { PublishSpellAction } from "@/actions/publish-spell";
import { useAccount } from "@/hooks/useAccount";
/**
* Filter command to show only spell-relevant parts
@@ -79,7 +78,7 @@ export function SpellDialog({
existingSpell,
onSuccess,
}: SpellDialogProps) {
const activeAccount = use$(accounts.active$);
const { canSign } = useAccount();
// Form state
const [alias, setAlias] = useState("");
@@ -186,9 +185,11 @@ export function SpellDialog({
const handlePublish = async () => {
if (!isFormValid) return;
// Check for active account
if (!activeAccount) {
setErrorMessage("No active account. Please sign in first.");
// Check for signing capability
if (!canSign) {
setErrorMessage(
"You need a signing account to publish. Read-only accounts cannot publish.",
);
setPublishingState("error");
return;
}
@@ -363,10 +364,11 @@ export function SpellDialog({
</div>
)}
{/* No account warning */}
{!activeAccount && (
{/* No signing capability warning */}
{!canSign && (
<div className="rounded-md border border-yellow-500 bg-yellow-50 dark:bg-yellow-950/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400">
You need to sign in to publish spells.
You need a signing account to publish spells. Read-only accounts
cannot publish.
</div>
)}
</div>
@@ -384,7 +386,7 @@ export function SpellDialog({
</Button>
<Button
onClick={handlePublish}
disabled={!isFormValid || !activeAccount || isBusy}
disabled={!isFormValid || !canSign || isBusy}
>
{(publishingState === "signing" ||
publishingState === "publishing") && (

58
src/components/nostr/user-menu.tsx
View File

@@ -157,38 +157,11 @@ export default function UserMenu() {
</>
)}
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger className="cursor-crosshair">
<Palette className="size-4 mr-2" />
Theme
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
{availableThemes.map((theme) => (
<DropdownMenuItem
key={theme.id}
className="cursor-crosshair"
onClick={() => setTheme(theme.id)}
>
<span
className={`size-2 rounded-full mr-2 ${
themeId === theme.id
? "bg-primary"
: "bg-muted-foreground/30"
}`}
/>
{theme.name}
</DropdownMenuItem>
))}
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={logout} className="cursor-crosshair">
Log out
</DropdownMenuItem>
</>
) : (
<>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger className="cursor-crosshair">
<Palette className="size-4 mr-2" />
@@ -213,10 +186,37 @@ export default function UserMenu() {
))}
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
</>
) : (
<>
<DropdownMenuItem onClick={() => setShowLogin(true)}>
Log in
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger className="cursor-crosshair">
<Palette className="size-4 mr-2" />
Theme
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
{availableThemes.map((theme) => (
<DropdownMenuItem
key={theme.id}
className="cursor-crosshair"
onClick={() => setTheme(theme.id)}
>
<span
className={`size-2 rounded-full mr-2 ${
themeId === theme.id
? "bg-primary"
: "bg-muted-foreground/30"
}`}
/>
{theme.name}
</DropdownMenuItem>
))}
</DropdownMenuSubContent>
</DropdownMenuSub>
</>
)}
</DropdownMenuContent>

69
src/hooks/useAccount.ts Normal file
View File

@@ -0,0 +1,69 @@
import { useMemo } from "react";
import { use$ } from "applesauce-react/hooks";
import accounts from "@/services/accounts";
/**
* Hook to access the active account with signing capability detection
*
* @returns {object} Account state
* @property {IAccount | undefined} account - The full active account object
* @property {string | undefined} pubkey - The account's public key (available for all account types)
* @property {boolean} canSign - Whether the account can sign events (false for read-only accounts)
* @property {ISigner | undefined} signer - The signer instance (undefined for read-only accounts)
* @property {boolean} isLoggedIn - Whether any account is active (including read-only)
*
* @example
* // For read-only operations (viewing profiles, loading data)
* const { pubkey, isLoggedIn } = useAccount();
* if (pubkey) {
* // Load user's relay list, emoji list, etc.
* }
*
* @example
* // For signing operations (posting, publishing, uploading)
* const { canSign, signer, pubkey } = useAccount();
* if (canSign) {
* // Can publish events
* await adapter.sendMessage({ activePubkey: pubkey, activeSigner: signer, ... });
* } else {
* // Show "log in to post" message
* }
*/
export function useAccount() {
const account = use$(accounts.active$);
return useMemo(() => {
if (!account) {
return {
account: undefined,
pubkey: undefined,
canSign: false,
signer: undefined,
isLoggedIn: false,
};
}
// Check if the account has a functional signer
// Read-only accounts have a signer that throws errors on sign operations
// We detect this by checking for the ReadonlySigner type or checking signer methods
const signer = account.signer;
let canSign = false;
if (signer) {
// ReadonlyAccount from applesauce-accounts has a ReadonlySigner
// that throws on signEvent, nip04, nip44 operations
// We can detect it by checking if it's an instance with the expected methods
// but we'll use a safer approach: check the account type name
const accountType = account.constructor.name;
canSign = accountType !== "ReadonlyAccount";
}
return {
account,
pubkey: account.pubkey,
canSign,
signer: canSign ? signer : undefined,
isLoggedIn: true,
};
}, [account]);
}

11
src/hooks/useEmojiSearch.ts
View File

@@ -1,13 +1,12 @@
import { useEffect, useMemo, useRef } from "react";
import { use$ } from "applesauce-react/hooks";
import {
EmojiSearchService,
type EmojiSearchResult,
} from "@/services/emoji-search";
import { UNICODE_EMOJIS } from "@/lib/unicode-emojis";
import eventStore from "@/services/event-store";
import accounts from "@/services/accounts";
import type { NostrEvent } from "@/types/nostr";
import { useAccount } from "./useAccount";
/**
* Hook to provide emoji search functionality with automatic indexing
@@ -15,7 +14,7 @@ import type { NostrEvent } from "@/types/nostr";
*/
export function useEmojiSearch(contextEvent?: NostrEvent) {
const serviceRef = useRef<EmojiSearchService | null>(null);
const activeAccount = use$(accounts.active$);
const { pubkey } = useAccount();
// Create service instance (singleton per component mount)
if (!serviceRef.current) {
@@ -35,12 +34,10 @@ export function useEmojiSearch(contextEvent?: NostrEvent) {
// Subscribe to user's emoji list (kind 10030) and emoji sets (kind 30030)
useEffect(() => {
if (!activeAccount?.pubkey) {
if (!pubkey) {
return;
}
const pubkey = activeAccount.pubkey;
// Subscribe to user's emoji list (kind 10030 - replaceable)
const userEmojiList$ = eventStore.replaceable(10030, pubkey);
const userEmojiSub = userEmojiList$.subscribe({
@@ -99,7 +96,7 @@ export function useEmojiSearch(contextEvent?: NostrEvent) {
// Clear custom emojis but keep unicode
service.clearCustom();
};
}, [activeAccount?.pubkey, service]);
}, [pubkey, service]);
// Memoize search function
const searchEmojis = useMemo(