create-githat-app 1.8.3 → 1.8.6

package/dist/cli.js

@@ -21,7 +21,7 @@ var DEPS = {
       next: "^16.0.0",
       react: "^19.0.0",
       "react-dom": "^19.0.0",
-      "@githat/nextjs": "^0.13.0",
+      "@githat/nextjs": "^0.13.3",
       "@githat/ui": "^1.0.0"
     },
     devDependencies: {
@@ -36,7 +36,7 @@ var DEPS = {
       react: "^19.0.0",
       "react-dom": "^19.0.0",
       "react-router-dom": "^7.0.0",
-      "@githat/nextjs": "^0.13.0",
+      "@githat/nextjs": "^0.13.3",
       "@githat/ui": "^1.0.0"
     },
     devDependencies: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-githat-app",
-  "version": "1.8.3",
+  "version": "1.8.6",
   "description": "GitHat CLI — scaffold apps and manage the skills marketplace",
   "type": "module",
   "bin": {

package/templates/agent/app/(auth)/sign-in/magic/page.tsx.hbs

@@ -0,0 +1,11 @@
+'use client';
+import { Suspense } from 'react';
+import { MagicLinkVerify } from '@githat/nextjs';
+
+export default function MagicLinkPage() {
+  return (
+    <Suspense fallback={null}>
+      <MagicLinkVerify />
+    </Suspense>
+  );
+}

package/templates/agent/app/account/activity/page.tsx.hbs

@@ -0,0 +1,176 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useAuditLog } from '@githat/nextjs';
+import type { AuditEvent, AuditEventType } from '@githat/nextjs';
+
+const EVENT_ICONS: Record<string, string> = {
+  login_success: '✓',
+  login_failed: '✗',
+  mfa_enabled: '🔒',
+  mfa_disabled: '🔓',
+  mfa_challenge_failed: '⚠',
+  password_changed: '🔑',
+  email_verified: '✉',
+  passkey_added: '🔐',
+  passkey_removed: '🗑',
+  magic_link_requested: '✉',
+  session_revoked: '⊗',
+  account_locked: '⛔',
+  user_created: '★',
+};
+
+const EVENT_LABELS: Record<string, string> = {
+  login_success: 'Signed in',
+  login_failed: 'Failed sign-in attempt',
+  mfa_enabled: '2FA enabled',
+  mfa_disabled: '2FA disabled',
+  mfa_challenge_failed: '2FA challenge failed',
+  password_changed: 'Password changed',
+  email_verified: 'Email verified',
+  passkey_added: 'Passkey added',
+  passkey_removed: 'Passkey removed',
+  magic_link_requested: 'Magic link sent',
+  session_revoked: 'Session revoked',
+  account_locked: 'Account locked',
+  user_created: 'Account created',
+};
+
+/**
+ * /account/activity — Sign-in audit log for {{businessName}}.
+ *
+ * Immutable per-user record of auth events. Paginated table view
+ * with type icon, when, IP, user-agent, and country flag.
+ */
+export default function ActivityPage() {
+  const { list } = useAuditLog();
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  async function load(append = false) {
+    if (append) setLoadingMore(true); else setLoading(true);
+    setError(null);
+    try {
+      const result = await list({ limit: 50, ...(append && cursor ? { cursor } : {}) });
+      setEvents((prev) => append ? [...prev, ...result.events] : result.events);
+      setCursor(result.nextCursor);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load activity');
+    } finally {
+      if (append) setLoadingMore(false); else setLoading(false);
+    }
+  }
+
+  useEffect(() => { load(); }, []);
+
+  return (
+    <main
+      style=\{{
+        maxWidth: '900px',
+        margin: '0 auto',
+        padding: 'var(--space-8, 2rem) var(--space-4, 1rem)',
+        color: 'var(--fg, #111)',
+      }}
+    >
+      <header style=\{{ marginBottom: '1.5rem' }}>
+        <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
+          <a href="/account/security" style=\{{ color: 'var(--fg-muted, #666)', textDecoration: 'none', fontSize: '0.875rem' }}>
+            Security
+          </a>
+          <span style=\{{ color: 'var(--fg-muted, #666)' }}>›</span>
+          <span style=\{{ fontSize: '0.875rem' }}>Activity</span>
+        </div>
+        <h1 style=\{{ fontSize: '1.875rem', fontWeight: 700, margin: 0 }}>Sign-in activity</h1>
+        <p style=\{{ color: 'var(--fg-muted, #666)', marginTop: '0.25rem' }}>
+          Immutable record of security events for your {{businessName}} account.
+        </p>
+      </header>
+
+      {error && (
+        <div style=\{{ padding: '0.75rem 1rem', background: '#fef2f2', border: '1px solid #fecaca', borderRadius: '6px', color: '#dc2626', marginBottom: '1rem' }}>
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>Loading activity...</p>
+      ) : events.length === 0 ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>No activity found.</p>
+      ) : (
+        <>
+          <div style=\{{ overflowX: 'auto' }}>
+            <table style=\{{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
+              <thead>
+                <tr style=\{{ borderBottom: '1px solid var(--border, #e5e7eb)', textAlign: 'left' }}>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600, color: 'var(--fg-muted, #666)', width: '2rem' }}></th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>Event</th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>When</th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>IP</th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>Country</th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>Device</th>
+                </tr>
+              </thead>
+              <tbody>
+                {events.map((evt, i) => {
+                  const meta = evt.metadata as Record<string, string | undefined>;
+                  const ua = meta?.userAgent || '';
+                  const truncatedUa = ua.length > 50 ? ua.slice(0, 50) + '…' : ua;
+                  return (
+                    <tr
+                      key={evt.sk || i}
+                      style=\{{ borderBottom: '1px solid var(--border, #e5e7eb)' }}
+                    >
+                      <td style=\{{ padding: '0.6rem 0.75rem', textAlign: 'center', fontSize: '1rem' }}>
+                        {EVENT_ICONS[evt.action] || '•'}
+                      </td>
+                      <td style=\{{ padding: '0.6rem 0.75rem', fontWeight: 500 }}>
+                        {EVENT_LABELS[evt.action] || evt.action}
+                      </td>
+                      <td style=\{{ padding: '0.6rem 0.75rem', color: 'var(--fg-muted, #666)', whiteSpace: 'nowrap' }}>
+                        {new Date(evt.created_at).toLocaleString()}
+                      </td>
+                      <td style=\{{ padding: '0.6rem 0.75rem', color: 'var(--fg-muted, #666)', fontFamily: 'monospace' }}>
+                        {meta?.ipAddress || '—'}
+                      </td>
+                      <td style=\{{ padding: '0.6rem 0.75rem', color: 'var(--fg-muted, #666)' }}>
+                        {meta?.country || '—'}
+                      </td>
+                      <td
+                        style=\{{ padding: '0.6rem 0.75rem', color: 'var(--fg-muted, #666)', maxWidth: '280px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                        title={ua}
+                      >
+                        {truncatedUa || '—'}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {cursor && (
+            <div style=\{{ marginTop: '1.5rem', textAlign: 'center' }}>
+              <button
+                onClick={() => load(true)}
+                disabled={loadingMore}
+                style=\{{
+                  padding: '0.5rem 1.5rem',
+                  background: 'transparent',
+                  border: '1px solid var(--border, #e5e7eb)',
+                  borderRadius: '6px',
+                  cursor: loadingMore ? 'not-allowed' : 'pointer',
+                  fontSize: '0.875rem',
+                }}
+              >
+                {loadingMore ? 'Loading...' : 'Load more'}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </main>
+  );
+}

package/templates/agent/app/account/security/page.tsx.hbs

@@ -26,7 +26,53 @@ export default function SecurityPage() {
           Manage two-factor authentication for your {{businessName}} account.
         </p>
       </header>
+
       <MfaManager />
+
+      <nav style=\{{ marginTop: '2.5rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+        <a
+          href="/account/sessions"
+          style=\{{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0.875rem 1.25rem',
+            border: '1px solid var(--border, #e5e7eb)',
+            borderRadius: '8px',
+            textDecoration: 'none',
+            color: 'var(--fg, #111)',
+          }}
+        >
+          <div>
+            <div style=\{{ fontWeight: 600, fontSize: '0.9rem' }}>Active sessions</div>
+            <div style=\{{ fontSize: '0.8rem', color: 'var(--fg-muted, #666)', marginTop: '0.125rem' }}>
+              See and revoke devices signed in to your account
+            </div>
+          </div>
+          <span style=\{{ color: 'var(--fg-muted, #666)' }}>›</span>
+        </a>
+        <a
+          href="/account/activity"
+          style=\{{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0.875rem 1.25rem',
+            border: '1px solid var(--border, #e5e7eb)',
+            borderRadius: '8px',
+            textDecoration: 'none',
+            color: 'var(--fg, #111)',
+          }}
+        >
+          <div>
+            <div style=\{{ fontWeight: 600, fontSize: '0.9rem' }}>Sign-in activity</div>
+            <div style=\{{ fontSize: '0.8rem', color: 'var(--fg-muted, #666)', marginTop: '0.125rem' }}>
+              Review your account&apos;s sign-in history
+            </div>
+          </div>
+          <span style=\{{ color: 'var(--fg-muted, #666)' }}>›</span>
+        </a>
+      </nav>
     </main>
   );
 }

package/templates/agent/app/account/sessions/page.tsx.hbs

@@ -0,0 +1,180 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSessions } from '@githat/nextjs';
+import type { Session } from '@githat/nextjs';
+
+/**
+ * /account/sessions — Active session management for {{businessName}}.
+ *
+ * Lists all active sessions with device/IP/country info.
+ * Users can revoke individual sessions or sign out everywhere else.
+ */
+export default function SessionsPage() {
+  const { list, revoke, revokeAll } = useSessions();
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [revoking, setRevoking] = useState<string | null>(null);
+  const [revokingAll, setRevokingAll] = useState(false);
+
+  async function load() {
+    setLoading(true);
+    setError(null);
+    try {
+      const { sessions: data } = await list();
+      setSessions(data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load sessions');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { load(); }, []);
+
+  async function handleRevoke(sessionId: string) {
+    setRevoking(sessionId);
+    try {
+      await revoke(sessionId);
+      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to revoke session');
+    } finally {
+      setRevoking(null);
+    }
+  }
+
+  async function handleRevokeAll() {
+    if (!confirm('Sign out of all other devices?')) return;
+    setRevokingAll(true);
+    try {
+      await revokeAll();
+      setSessions((prev) => prev.filter((s) => s.current));
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to revoke sessions');
+    } finally {
+      setRevokingAll(false);
+    }
+  }
+
+  const otherCount = sessions.filter((s) => !s.current).length;
+
+  return (
+    <main
+      style=\{{
+        maxWidth: '720px',
+        margin: '0 auto',
+        padding: 'var(--space-8, 2rem) var(--space-4, 1rem)',
+        color: 'var(--fg, #111)',
+      }}
+    >
+      <header style=\{{ marginBottom: '1.5rem' }}>
+        <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
+          <a href="/account/security" style=\{{ color: 'var(--fg-muted, #666)', textDecoration: 'none', fontSize: '0.875rem' }}>
+            Security
+          </a>
+          <span style=\{{ color: 'var(--fg-muted, #666)' }}>›</span>
+          <span style=\{{ fontSize: '0.875rem' }}>Active sessions</span>
+        </div>
+        <h1 style=\{{ fontSize: '1.875rem', fontWeight: 700, margin: 0 }}>Active sessions</h1>
+        <p style=\{{ color: 'var(--fg-muted, #666)', marginTop: '0.25rem' }}>
+          Devices signed in to your {{businessName}} account.
+        </p>
+      </header>
+
+      {error && (
+        <div style=\{{ padding: '0.75rem 1rem', background: '#fef2f2', border: '1px solid #fecaca', borderRadius: '6px', color: '#dc2626', marginBottom: '1rem' }}>
+          {error}
+        </div>
+      )}
+
+      {otherCount > 0 && (
+        <div style=\{{ marginBottom: '1.5rem' }}>
+          <button
+            onClick={handleRevokeAll}
+            disabled={revokingAll}
+            style=\{{
+              padding: '0.5rem 1.25rem',
+              background: '#fef2f2',
+              color: '#dc2626',
+              border: '1px solid #fecaca',
+              borderRadius: '6px',
+              cursor: revokingAll ? 'not-allowed' : 'pointer',
+              fontWeight: 500,
+            }}
+          >
+            {revokingAll ? 'Signing out...' : `Sign out everywhere else (${otherCount})`}
+          </button>
+        </div>
+      )}
+
+      {loading ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>Loading sessions...</p>
+      ) : sessions.length === 0 ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>No active sessions found.</p>
+      ) : (
+        <div style=\{{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          {sessions.map((session) => (
+            <div
+              key={session.id}
+              style=\{{
+                padding: '1rem 1.25rem',
+                border: session.current ? '1px solid #6366f1' : '1px solid var(--border, #e5e7eb)',
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+                gap: '1rem',
+              }}
+            >
+              <div style=\{{ flex: 1, minWidth: 0 }}>
+                <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
+                  <span style=\{{ fontWeight: 600, fontSize: '0.9rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {session.userAgent || 'Unknown device'}
+                  </span>
+                  {session.current && (
+                    <span style=\{{
+                      padding: '0.1rem 0.5rem',
+                      background: '#ede9fe',
+                      color: '#6366f1',
+                      borderRadius: '999px',
+                      fontSize: '0.75rem',
+                      fontWeight: 600,
+                      whiteSpace: 'nowrap',
+                    }}>
+                      This device
+                    </span>
+                  )}
+                </div>
+                <div style=\{{ fontSize: '0.8rem', color: 'var(--fg-muted, #666)', display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+                  {session.ipAddress && <span>{session.ipAddress}</span>}
+                  {session.country && <span>{session.country}</span>}
+                  <span>Last active {new Date(session.lastActiveAt).toLocaleDateString()}</span>
+                </div>
+              </div>
+              {!session.current && (
+                <button
+                  onClick={() => handleRevoke(session.id)}
+                  disabled={revoking === session.id}
+                  style=\{{
+                    padding: '0.375rem 0.875rem',
+                    background: 'transparent',
+                    border: '1px solid var(--border, #e5e7eb)',
+                    borderRadius: '6px',
+                    cursor: revoking === session.id ? 'not-allowed' : 'pointer',
+                    fontSize: '0.875rem',
+                    whiteSpace: 'nowrap',
+                    flexShrink: 0,
+                  }}
+                >
+                  {revoking === session.id ? 'Revoking...' : 'Revoke'}
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

package/templates/base/README.md.hbs

@@ -100,6 +100,44 @@ const domains = await list();      // includes verificationStatus
 Once verified, links in emails point to `https://{{domain}}/reset-password?token=…`
 — users never see githat.io.
 
+## Webhooks
+
+Subscribe to GitHat auth events from your backend via HTTP callbacks. Use the
+GitHat dashboard (`/webhooks`) or the `useWebhooks()` hook to register an endpoint:
+
+```ts
+import { useWebhooks } from '@githat/nextjs';
+
+const { create, list, listDeliveries } = useWebhooks();
+const webhook = await create('https://yourapp.com/hooks/githat', ['user.signed_in', 'user.created']);
+// Save webhook.secret — it's shown only once and used to verify HMAC signatures.
+```
+
+Each delivery sends `X-GitHat-Signature: sha256=<hmac>` so you can verify authenticity.
+
+## Active sessions
+
+Users can view and revoke active sessions at `/account/sessions`. Each session
+shows the user agent, IP, country, and last active time. The current session is
+marked "This device". The `useSessions()` hook backs this page:
+
+```ts
+import { useSessions } from '@githat/nextjs';
+const { list, revoke, revokeAll } = useSessions();
+```
+
+## Sign-in activity
+
+`/account/activity` shows an immutable audit log of every auth event
+(sign-ins, MFA toggles, passkey changes, etc.) with IP, country, and device.
+Paginated with `useAuditLog()`:
+
+```ts
+import { useAuditLog } from '@githat/nextjs';
+const { list } = useAuditLog();
+const { events, nextCursor } = await list({ limit: 50 });
+```
+
 ## Two-factor authentication
 
 Users can enable TOTP-based 2FA at `/account/security` (the page is
@@ -111,9 +149,73 @@ once at enrollment for account recovery.
 `<SignInForm/>` and `<MfaChallenge/>` from `@githat/nextjs` handle
 the entire flow end-to-end — no integration code needed.
 
+## Magic-link sign-in (passwordless)
+
+`<SignInForm/>` exposes a "Use a magic link instead" toggle. Users
+type their email, get a one-time link, and sign in without a password.
+The route at `/sign-in/magic` is scaffolded for you and renders
+`<MagicLinkVerify/>`, which handles the token verification and
+MFA-challenge handoff automatically.
+
+Magic-link emails ship from the same per-app branded sender as
+password-reset emails (verify your domain at `/account/security`
+or via `useEmailDomains()` to upgrade from `auth@githat.io` to
+`auth@yourdomain`).
+
+## Passkey sign-in (Face ID, Touch ID, hardware keys)
+
+`<SignInForm/>` automatically shows a passkey button when the
+browser supports WebAuthn. Users can register a passkey from
+`/account/security` (in `<MfaManager/>`'s "Your passkeys" section).
+Once registered, sign-in is one click + biometric — no email,
+no password, no codes.
+
+Passkeys are origin-bound to your domain — they only work on
+your site, never elsewhere, even if a user has the same passkey
+"saved" in their password manager. This is the correct security
+model.
+
 ## Learn More
 
 - [GitHat Documentation](https://githat.io/docs)
 - [Branded Auth Emails Guide](https://githat.io/docs/email-domains)
 - [SDK Reference](https://www.npmjs.com/package/@githat/nextjs)
 - [API Reference](https://githat.io/docs/api)
+
+## Marketplace template
+
+If you scaffolded with `--template marketplace`, your product catalog lives in one place:
+
+```
+src/data/products.ts
+```
+
+### Adding products
+
+Open `src/data/products.ts` and add entries to the `PRODUCTS` array:
+
+```ts
+{
+  id: 'my-product',           // unique, URL-safe string
+  name: 'My product',
+  description: 'A short description shown on the card.',
+  price: 12.99,               // numeric, in your currency's base unit
+  category: 'food',           // must match a slug in src/lib/categories.ts
+  inStock: true,
+}
+```
+
+The homepage, cart shell, and search page all import from this file via
+`getAvailableProducts()` — no other changes needed.
+
+### Adding categories
+
+Open `src/lib/categories.ts` and add entries to the `CATEGORIES` array.
+Keep `slug` values lowercase and hyphen-separated (used in URLs).
+
+### Moving to a real database
+
+When you're ready to persist products in a backend (Postgres, DynamoDB,
+Sebastn), replace `getAvailableProducts()` in `app/page.tsx` with a
+`fetch()` to your API. The `Product` interface in `src/data/products.ts`
+stays the same so your UI components don't need to change.

package/templates/classroom/app/(auth)/sign-in/magic/page.tsx.hbs

@@ -0,0 +1,11 @@
+'use client';
+import { Suspense } from 'react';
+import { MagicLinkVerify } from '@githat/nextjs';
+
+export default function MagicLinkPage() {
+  return (
+    <Suspense fallback={null}>
+      <MagicLinkVerify />
+    </Suspense>
+  );
+}