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
This commit is contained in:
Claude
2026-01-17 19:44:01 +00:00
parent 14c73c07a3
commit 2534507a15
2 changed files with 283 additions and 35 deletions

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,14 @@ import {
Copy,
Check,
AlertCircle,
Eye,
Key,
ShieldAlert,
} 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 +45,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 +57,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 +85,8 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
if (!open) {
setLoading(false);
setError(null);
setReadonlyInput("");
setNsecInput("");
setBunkerUrl("");
setQrDataUrl(null);
setConnectUri(null);
@@ -84,7 +99,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 +133,109 @@ 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);
}
}
// Bunker URL login
async function loginWithBunkerUrl() {
if (!bunkerUrl.trim()) {
@@ -267,14 +391,22 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
</DialogHeader>
<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 +449,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

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>