create-fedi-app 0.1.0

package/dist/templates/modules/nostr-identity/hooks/useIdentityFlow.ts

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import { useIdentity } from '../lib/nostr';
+import type { NostrEvent } from '../lib/nostr';
+
+export function useIdentityFlow() {
+  const { pubkey, npub, displayNpub, getPublicKey, signEvent, isConnecting } = useIdentity();
+  const [localPubkey, setLocalPubkey] = useState<string | null>(null);
+  const [lastSignedEvent, setLastSignedEvent] = useState<NostrEvent | null>(null);
+  const [signError, setSignError] = useState<Error | null>(null);
+  const [isConnectingLocal, setIsConnectingLocal] = useState(false);
+
+  const activePubkey = pubkey ?? localPubkey;
+
+  async function connect() {
+    setIsConnectingLocal(true);
+    try {
+      const pk = await getPublicKey();
+      if (pk) setLocalPubkey(pk);
+      return pk;
+    } finally {
+      setIsConnectingLocal(false);
+    }
+  }
+
+  async function signTextNote(content: string): Promise<NostrEvent | null> {
+    setSignError(null);
+    const signingPubkey = activePubkey ?? (await connect());
+    if (!signingPubkey) {
+      setSignError(new Error('Connect your Nostr identity first'));
+      return null;
+    }
+
+    try {
+      const event = await signEvent({
+        kind: 1,
+        content,
+        tags: [],
+        created_at: Math.floor(Date.now() / 1000),
+      });
+      if (event) setLastSignedEvent(event);
+      return event;
+    } catch (err) {
+      setSignError(err instanceof Error ? err : new Error('Sign failed'));
+      return null;
+    }
+  }
+
+  return {
+    pubkey: activePubkey,
+    npub,
+    displayNpub,
+    isConnected: !!activePubkey,
+    isConnecting: isConnecting || isConnectingLocal,
+    connect,
+    signTextNote,
+    lastSignedEvent,
+    signError,
+  };
+}

package/dist/templates/modules/nostr-identity/lib/nostr-utils.ts

@@ -0,0 +1,30 @@
+import { bech32 } from '@scure/base';
+
+/**
+ * Derives a stable HSL color from a hex pubkey using a simple string hash.
+ */
+export function pubkeyToHsl(pubkey: string): { h: number; s: number; l: number } {
+  let hash = 0;
+  for (let i = 0; i < pubkey.length; i++) {
+    hash = pubkey.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return {
+    h: Math.abs(hash) % 360,
+    s: 60,
+    l: 50,
+  };
+}
+
+/** Converts a hex-encoded pubkey to bech32 npub format. */
+export function pubkeyToNpub(hex: string): string {
+  const bytes = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < hex.length; i += 2) {
+    bytes[i / 2] = parseInt(hex.slice(i, i + 2), 16);
+  }
+  return bech32.encodeFromBytes('npub', bytes);
+}
+
+/** Truncated npub for compact display, e.g. `npub1abc...xyz4`. */
+export function truncateNpub(npub: string): string {
+  return npub.slice(0, 8) + '...' + npub.slice(-4);
+}

package/dist/templates/modules/nostr-identity/module.json

@@ -0,0 +1,15 @@
+{
+  "name": "nostr-identity",
+  "description": "NIP-07 Nostr identity connection and signed message demos",
+  "dependencies": [],
+  "devDependencies": [],
+  "files": [
+    { "src": "components/nostr/IdentityBadge.tsx", "dest": "components/nostr/IdentityBadge.tsx", "merge": "add" },
+    { "src": "components/nostr/SignedMessage.tsx", "dest": "components/nostr/SignedMessage.tsx", "merge": "add" },
+    { "src": "components/nostr/NostrLogin.tsx", "dest": "components/nostr/NostrLogin.tsx", "merge": "add" },
+    { "src": "hooks/useIdentityFlow.ts", "dest": "hooks/useIdentityFlow.ts", "merge": "add" },
+    { "src": "lib/nostr-utils.ts", "dest": "lib/nostr-utils.ts", "merge": "add" },
+    { "src": "app/demo/nostr/page.tsx", "dest": "app/demo/nostr/page.tsx", "merge": "add" }
+  ],
+  "envVars": []
+}

package/dist/templates/modules/payment-gated-content/app/api/payment-gate/invoice/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+import { generateInvoice } from '../../../../lib/payment-gate';
+
+export async function POST(request: Request) {
+  let body: { contentId?: string; amountSats?: number; memo?: string };
+
+  try {
+    body = (await request.json()) as typeof body;
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
+  }
+
+  const { contentId, amountSats, memo } = body;
+
+  if (!contentId || typeof contentId !== 'string') {
+    return NextResponse.json({ error: 'contentId is required' }, { status: 400 });
+  }
+
+  if (!amountSats || typeof amountSats !== 'number' || amountSats < 1) {
+    return NextResponse.json({ error: 'amountSats must be a positive number' }, { status: 400 });
+  }
+
+  const invoice = await generateInvoice({ contentId, amountSats, memo });
+  return NextResponse.json(invoice);
+}

package/dist/templates/modules/payment-gated-content/app/api/payment-gate/verify/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from 'next/server';
+import { setPaymentCookie, verifyPayment } from '../../../../lib/payment-gate';
+
+export async function POST(request: Request) {
+  let body: { paymentId?: string; preimage?: string; contentId?: string };
+
+  try {
+    body = (await request.json()) as typeof body;
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
+  }
+
+  const { paymentId, preimage, contentId } = body;
+
+  if (!paymentId || !preimage || !contentId) {
+    return NextResponse.json(
+      { error: 'paymentId, preimage, and contentId are required' },
+      { status: 400 },
+    );
+  }
+
+  const result = await verifyPayment(paymentId, preimage);
+  if (!result.valid) {
+    return NextResponse.json({ error: result.reason }, { status: 402 });
+  }
+
+  if (result.record.contentId !== contentId) {
+    return NextResponse.json({ error: 'Content mismatch' }, { status: 403 });
+  }
+
+  const response = NextResponse.json({
+    ok: true,
+    contentId: result.record.contentId,
+    paidAt: result.record.paidAt,
+  });
+
+  setPaymentCookie(response, contentId, paymentId);
+  return response;
+}

package/dist/templates/modules/payment-gated-content/app/demo/payment-gated/article/page.tsx

@@ -0,0 +1,71 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { cookies } from 'next/headers';
+import { checkPaymentAccess } from '../../../../lib/payment-gate';
+import { redirect } from 'next/navigation';
+
+export const metadata: Metadata = {
+  title: 'Gated Article',
+  description:
+    'Proxy-protected article route for the payment-gated content demo. Requires a valid payment cookie set after Lightning verification.',
+  openGraph: {
+    title: 'Gated Article',
+    description:
+      'Proxy-protected article route for the payment-gated content demo. Requires a valid payment cookie set after Lightning verification.',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'Gated Article',
+    description:
+      'Proxy-protected article route for the payment-gated content demo. Requires a valid payment cookie set after Lightning verification.',
+  },
+};
+
+const CONTENT_ID = 'demo-article';
+
+export default async function ProtectedArticlePage() {
+  const cookieStore = await cookies();
+  const hasAccess = await checkPaymentAccess(cookieStore, CONTENT_ID);
+
+  if (!hasAccess) {
+    redirect('/demo/payment-gated?redirect=/demo/payment-gated/article');
+  }
+
+  return (
+    <div className="min-h-dvh bg-[var(--color-bg)] font-[family-name:var(--font-body)] text-[var(--color-text)]">
+      <div
+        className="mx-auto w-full max-w-[390px] px-4 pt-6"
+        style={{ paddingBottom: 'max(5rem, env(safe-area-inset-bottom, 20px))' }}
+      >
+        <Link
+          href="/demo/payment-gated"
+          className="mb-6 inline-block text-xs text-[var(--color-text-muted)] transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+        >
+          ← back to demo
+        </Link>
+
+        <header className="mb-6 space-y-2">
+          <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold leading-tight text-[var(--color-text)]">
+            Proxy-protected route
+          </h1>
+          <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            You reached this page because <code className="font-mono text-xs">proxy.ts</code> found a
+            valid payment cookie. Without it, you would have been redirected to the paywall.
+          </p>
+        </header>
+
+        <article className="space-y-3 text-sm leading-[1.65] text-[var(--color-text-muted)]">
+          <p>
+            This route demonstrates network-boundary enforcement. Even if someone removes the paywall
+            component from the client bundle, the proxy still blocks unauthenticated requests to
+            protected paths.
+          </p>
+          <p>
+            In production, point protected routes at real premium content: PDF downloads, API
+            handlers, or server-rendered pages that must never leak without payment proof.
+          </p>
+        </article>
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/payment-gated-content/app/demo/payment-gated/page.tsx

@@ -0,0 +1,134 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { cookies } from 'next/headers';
+import { PayGate } from '../../../components/payment-gated/PayGate';
+import { checkPaymentAccess } from '../../../lib/payment-gate';
+
+export const metadata: Metadata = {
+  title: 'Payment Gate',
+  description:
+    'Demo of Lightning paywalled content: preview an article for free, pay sats to unlock the full text, and keep access via a signed payment cookie.',
+  openGraph: {
+    title: 'Payment Gate',
+    description:
+      'Demo of Lightning paywalled content: preview an article for free, pay sats to unlock the full text, and keep access via a signed payment cookie.',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'Payment Gate',
+    description:
+      'Demo of Lightning paywalled content: preview an article for free, pay sats to unlock the full text, and keep access via a signed payment cookie.',
+  },
+};
+
+const CONTENT_ID = 'demo-article';
+const PRICE_SATS = 50;
+
+const ARTICLE_PREVIEW = (
+  <article className="space-y-3 px-1 py-2">
+    <h2 className="font-[family-name:var(--font-display)] text-xl font-semibold text-[var(--color-text)]">
+      Why sats unlock content
+    </h2>
+    <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+      Lightning payments settle in seconds with cryptographic proof. A preimage returned from{' '}
+      <code className="font-mono text-xs">sendPayment()</code> is enough for your server to grant
+      access without accounts or passwords.
+    </p>
+    <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+      This preview shows the opening paragraphs. The rest of the article covers cookie design,
+      proxy checks at the network boundary, and production hardening tips…
+    </p>
+  </article>
+);
+
+const ARTICLE_FULL = (
+  <article className="space-y-4">
+    <h2 className="font-[family-name:var(--font-display)] text-xl font-semibold text-[var(--color-text)]">
+      Why sats unlock content
+    </h2>
+    <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+      Lightning payments settle in seconds with cryptographic proof. A preimage returned from{' '}
+      <code className="font-mono text-xs">sendPayment()</code> is enough for your server to grant
+      access without accounts or passwords.
+    </p>
+    <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+      In this template, your app generates a BOLT11 invoice on the server and stores the expected
+      preimage alongside the pending payment. When the user pays, they submit that preimage to{' '}
+      <code className="font-mono text-xs">/api/payment-gate/verify</code>. The server marks the
+      invoice paid and sets an HttpOnly cookie signed with HMAC.
+    </p>
+    <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+      <code className="font-mono text-xs">proxy.ts</code> runs before protected routes such as{' '}
+      <code className="font-mono text-xs">/demo/payment-gated/article</code>. If the cookie is
+      missing or invalid, the request is redirected back here. That keeps direct URL access gated
+      even when someone bypasses the React paywall UI.
+    </p>
+    <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+      For production, replace the in-memory store with your database module, connect a real Lightning
+      node for invoice creation, and rotate <code className="font-mono text-xs">PAYMENT_GATE_SECRET</code>{' '}
+      via Doppler. The client flow stays the same.
+    </p>
+    <Link
+      href="/demo/payment-gated/article"
+      className="inline-block text-sm font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+      style={{ color: 'var(--color-accent)' }}
+    >
+      Open proxy-protected route →
+    </Link>
+  </article>
+);
+
+export default async function PaymentGatedDemoPage() {
+  const cookieStore = await cookies();
+  const hasAccess = await checkPaymentAccess(cookieStore, CONTENT_ID);
+
+  return (
+    <div className="min-h-dvh bg-[var(--color-bg)] font-[family-name:var(--font-body)] text-[var(--color-text)]">
+      <div
+        className="mx-auto w-full max-w-[390px] px-4 pt-6"
+        style={{ paddingBottom: 'max(5rem, env(safe-area-inset-bottom, 20px))' }}
+      >
+        <Link
+          href="/demo"
+          className="mb-6 inline-block text-xs text-[var(--color-text-muted)] transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+        >
+          ← back
+        </Link>
+
+        <header className="mb-8 space-y-2">
+          <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold leading-tight text-[var(--color-text)]">
+            Payment-gated content
+          </h1>
+          <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Lock articles, downloads, or API responses behind a one-time Lightning payment. Access
+            persists in a signed cookie after verification.
+          </p>
+        </header>
+
+        {hasAccess ? (
+          <div className="space-y-4">
+            <div
+              className="rounded-lg px-3 py-2 text-xs font-semibold"
+              style={{
+                background: 'var(--color-accent-dim)',
+                color: 'var(--color-accent)',
+                borderRadius: 'var(--radius-md)',
+              }}
+              role="status"
+            >
+              Unlocked: payment verified
+            </div>
+            {ARTICLE_FULL}
+          </div>
+        ) : (
+          <PayGate
+            contentId={CONTENT_ID}
+            priceSats={PRICE_SATS}
+            memo="Unlock demo article"
+            preview={ARTICLE_PREVIEW}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/payment-gated-content/components/payment-gated/PayGate.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { PayButton } from '../webln/PayButton';
+import { formatSats } from '../../lib/payment-history';
+
+type TInvoiceResponse = {
+  paymentId: string;
+  invoice: string;
+  amountSats: number;
+  memo: string;
+  devPreimage?: string;
+};
+
+interface IPayGateProps {
+  contentId: string;
+  priceSats: number;
+  memo?: string;
+  preview: React.ReactNode;
+  onUnlocked?: () => void;
+}
+
+type TGateStep = 'loading' | 'ready' | 'verifying' | 'error';
+
+/**
+ * Paywall UI: blurred preview, server invoice QR, WebLN pay button, and refresh link.
+ */
+export function PayGate({
+  contentId,
+  priceSats,
+  memo,
+  preview,
+  onUnlocked,
+}: IPayGateProps) {
+  const [step, setStep] = useState<TGateStep>('loading');
+  const [invoiceData, setInvoiceData] = useState<TInvoiceResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const verifyPayment = useCallback(
+    async (paymentId: string, preimage: string) => {
+      setStep('verifying');
+      setError(null);
+
+      const res = await fetch('/api/payment-gate/verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ paymentId, preimage, contentId }),
+      });
+
+      if (!res.ok) {
+        const data = (await res.json()) as { error?: string };
+        setError(data.error ?? 'Verification failed');
+        setStep('error');
+        return false;
+      }
+
+      onUnlocked?.();
+      window.location.reload();
+      return true;
+    },
+    [contentId, onUnlocked],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadInvoice() {
+      setStep('loading');
+      setError(null);
+
+      const res = await fetch('/api/payment-gate/invoice', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          contentId,
+          amountSats: priceSats,
+          memo: memo ?? `Unlock content (${contentId})`,
+        }),
+      });
+
+      if (cancelled) return;
+
+      if (!res.ok) {
+        setError('Could not create invoice');
+        setStep('error');
+        return;
+      }
+
+      const data = (await res.json()) as TInvoiceResponse;
+      setInvoiceData(data);
+      setStep('ready');
+    }
+
+    void loadInvoice();
+    return () => {
+      cancelled = true;
+    };
+  }, [contentId, priceSats, memo]);
+
+  useEffect(() => {
+    if (
+      process.env.NODE_ENV !== 'development' ||
+      !invoiceData?.devPreimage ||
+      step !== 'ready'
+    ) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      void verifyPayment(invoiceData.paymentId, invoiceData.devPreimage!);
+    }, 5000);
+
+    return () => window.clearTimeout(timer);
+  }, [invoiceData, step, verifyPayment]);
+
+  async function handleCopy() {
+    if (!invoiceData?.invoice) return;
+    await navigator.clipboard.writeText(invoiceData.invoice);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  }
+
+  function handleRefresh() {
+    window.location.reload();
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="relative overflow-hidden rounded-xl" style={{ borderRadius: 'var(--radius-lg)' }}>
+        <div
+          className="pointer-events-none select-none blur-sm opacity-60"
+          aria-hidden
+        >
+          {preview}
+        </div>
+        <div
+          className="absolute inset-0 flex items-end justify-center bg-gradient-to-t from-[var(--color-bg)] via-[var(--color-bg)]/80 to-transparent px-4 pb-4 pt-16"
+          aria-hidden
+        />
+      </div>
+
+      <div
+        className="rounded-xl p-4 space-y-4"
+        style={{
+          background: 'var(--color-surface-1)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 'var(--radius-lg)',
+        }}
+      >
+        <div className="space-y-1">
+          <p className="text-sm font-semibold" style={{ color: 'var(--color-text)' }}>
+            Unlock full article
+          </p>
+          <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
+            Pay {formatSats(priceSats)} once to read the complete content. Your browser stores
+            proof of payment in a secure cookie.
+          </p>
+        </div>
+
+        {step === 'loading' && (
+          <p
+            className="text-xs font-mono"
+            style={{ color: 'var(--color-text-subtle)' }}
+            aria-live="polite"
+          >
+            Generating invoice…
+          </p>
+        )}
+
+        {step === 'verifying' && (
+          <p
+            className="text-xs font-mono"
+            style={{ color: 'var(--color-text-subtle)' }}
+            aria-live="polite"
+          >
+            Verifying payment…
+          </p>
+        )}
+
+        {invoiceData && step !== 'loading' && (
+          <div
+            className="rounded-xl p-4 flex flex-col gap-3"
+            style={{
+              background: 'var(--color-surface-2)',
+              borderRadius: 'var(--radius-lg)',
+            }}
+            aria-label={`Invoice for ${formatSats(priceSats)}`}
+          >
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-sm font-semibold" style={{ color: 'var(--color-text)' }}>
+                {formatSats(invoiceData.amountSats)}
+              </span>
+              {invoiceData.memo && (
+                <span
+                  className="text-xs truncate max-w-[50%]"
+                  style={{ color: 'var(--color-text-muted)' }}
+                >
+                  {invoiceData.memo}
+                </span>
+              )}
+            </div>
+
+            <div
+              className="mx-auto flex w-full max-w-[160px] items-center justify-center rounded-lg p-3"
+              style={{ background: 'var(--color-surface-1)' }}
+              aria-label="Invoice QR code"
+            >
+              <QRCodeSVG
+                value={invoiceData.invoice}
+                size={136}
+                level="M"
+                bgColor="transparent"
+                fgColor="var(--color-text)"
+              />
+            </div>
+
+            <p className="text-center text-xs" style={{ color: 'var(--color-text-subtle)' }}>
+              {process.env.NODE_ENV === 'development'
+                ? 'Simulated payment in 5 seconds (dev only)'
+                : 'Scan with a Lightning wallet or pay below'}
+            </p>
+
+            <button
+              type="button"
+              onClick={handleCopy}
+              className="w-full rounded-lg px-4 py-2 text-sm font-medium transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80 active:opacity-70"
+              style={{
+                background: 'var(--color-surface-1)',
+                color: 'var(--color-text)',
+                borderRadius: 'var(--radius-md)',
+              }}
+              aria-label={copied ? 'Invoice copied to clipboard' : 'Copy invoice to clipboard'}
+            >
+              {copied ? 'Copied!' : 'Copy invoice'}
+            </button>
+
+            <PayButton
+              invoice={invoiceData.invoice}
+              amountSats={invoiceData.amountSats}
+              memo={invoiceData.memo}
+              onSuccess={(preimage) => {
+                void verifyPayment(invoiceData.paymentId, preimage);
+              }}
+            />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-xs" style={{ color: 'var(--color-error, #ef4444)' }} role="alert">
+            {error}
+          </p>
+        )}
+
+        <button
+          type="button"
+          onClick={handleRefresh}
+          className="text-xs font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+          style={{ color: 'var(--color-accent)' }}
+        >
+          Already paid? Refresh
+        </button>
+      </div>
+    </div>
+  );
+}