feaeet: add passkeys support

apps/csms/src/db/auth-schema.ts

@@ -1,4 +1,5 @@
-import { pgTable, text, timestamp, boolean } from "drizzle-orm/pg-core";
+import { relations } from "drizzle-orm";
+import { pgTable, text, timestamp, boolean, integer, index } from "drizzle-orm/pg-core";
 
 export const user = pgTable("user", {
   id: text("id").primaryKey(),
@@ -19,7 +20,9 @@ export const user = pgTable("user", {
   displayUsername: text("display_username"),
 });
 
-export const session = pgTable("session", {
+export const session = pgTable(
+  "session",
+  {
     id: text("id").primaryKey(),
     expiresAt: timestamp("expires_at").notNull(),
     token: text("token").notNull().unique(),
@@ -33,9 +36,13 @@ export const session = pgTable("session", {
       .notNull()
       .references(() => user.id, { onDelete: "cascade" }),
     impersonatedBy: text("impersonated_by"),
-});
+  },
+  (table) => [index("session_userId_idx").on(table.userId)],
+);
 
-export const account = pgTable("account", {
+export const account = pgTable(
+  "account",
+  {
     id: text("id").primaryKey(),
     accountId: text("account_id").notNull(),
     providerId: text("provider_id").notNull(),
@@ -53,9 +60,13 @@ export const account = pgTable("account", {
     updatedAt: timestamp("updated_at")
       .$onUpdate(() => /* @__PURE__ */ new Date())
       .notNull(),
-});
+  },
+  (table) => [index("account_userId_idx").on(table.userId)],
+);
 
-export const verification = pgTable("verification", {
+export const verification = pgTable(
+  "verification",
+  {
     id: text("id").primaryKey(),
     identifier: text("identifier").notNull(),
     value: text("value").notNull(),
@@ -65,11 +76,56 @@ export const verification = pgTable("verification", {
       .defaultNow()
       .$onUpdate(() => /* @__PURE__ */ new Date())
       .notNull(),
-});
+  },
+  (table) => [index("verification_identifier_idx").on(table.identifier)],
+);
 
-export const jwks = pgTable("jwks", {
+export const passkey = pgTable(
+  "passkey",
+  {
     id: text("id").primaryKey(),
+    name: text("name"),
     publicKey: text("public_key").notNull(),
-  privateKey: text("private_key").notNull(),
+    userId: text("user_id")
-  createdAt: timestamp("created_at").notNull(),
+      .notNull()
-});
+      .references(() => user.id, { onDelete: "cascade" }),
+    credentialID: text("credential_id").notNull(),
+    counter: integer("counter").notNull(),
+    deviceType: text("device_type").notNull(),
+    backedUp: boolean("backed_up").notNull(),
+    transports: text("transports"),
+    createdAt: timestamp("created_at"),
+    aaguid: text("aaguid"),
+  },
+  (table) => [
+    index("passkey_userId_idx").on(table.userId),
+    index("passkey_credentialID_idx").on(table.credentialID),
+  ],
+);
+
+export const userRelations = relations(user, ({ many }) => ({
+  sessions: many(session),
+  accounts: many(account),
+  passkeys: many(passkey),
+}));
+
+export const sessionRelations = relations(session, ({ one }) => ({
+  user: one(user, {
+    fields: [session.userId],
+    references: [user.id],
+  }),
+}));
+
+export const accountRelations = relations(account, ({ one }) => ({
+  user: one(user, {
+    fields: [account.userId],
+    references: [user.id],
+  }),
+}));
+
+export const passkeyRelations = relations(passkey, ({ one }) => ({
+  user: one(user, {
+    fields: [passkey.userId],
+    references: [user.id],
+  }),
+}));

apps/csms/src/lib/auth.ts

@@ -1,27 +1,26 @@
-import { betterAuth } from 'better-auth'
+import { betterAuth } from "better-auth";
-import { drizzleAdapter } from 'better-auth/adapters/drizzle'
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
-import { useDrizzle } from './db.js'
+import { useDrizzle } from "./db.js";
-import * as schema from '@/db/schema.ts'
+import * as schema from "@/db/schema.ts";
-import { admin, bearer, username } from 'better-auth/plugins'
+import { admin, bearer, username } from "better-auth/plugins";
+import { passkey } from "@better-auth/passkey";
 
 export const auth = betterAuth({
   database: drizzleAdapter(useDrizzle(), {
-    provider: 'pg',
+    provider: "pg",
     schema: {
       ...schema,
     },
   }),
-  trustedOrigins: [
+  trustedOrigins: [process.env.WEB_ORIGIN ?? "http://localhost:3000"],
-    process.env.WEB_ORIGIN ?? 'http://localhost:3000',
-  ],
   user: {
     additionalFields: {},
   },
   emailAndPassword: {
     enabled: true,
   },
-  plugins: [admin(), username(), bearer()],
+  plugins: [admin(), username(), bearer(), passkey()],
   advanced: {
-    cookiePrefix: 'helios_auth',
+    cookiePrefix: "helios_auth",
   },
-})
+});

apps/web/app/dashboard/settings/page.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Button, CloseButton, Spinner } from "@heroui/react";
+import { Fingerprint, TrashBin } from "@gravity-ui/icons";
+import { authClient } from "@/lib/auth-client";
+
+type Passkey = {
+  id: string;
+  name?: string | null;
+  createdAt: Date | string;
+  deviceType?: string | null;
+};
+
+export default function SettingsPage() {
+  const [passkeys, setPasskeys] = useState<Passkey[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [adding, setAdding] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  const loadPasskeys = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await authClient.passkey.listUserPasskeys();
+      setPasskeys((res.data as Passkey[] | null) ?? []);
+    } catch {
+      setError("获取 Passkey 列表失败");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadPasskeys();
+  }, [loadPasskeys]);
+
+  const handleAdd = async () => {
+    setError("");
+    setSuccess("");
+    setAdding(true);
+    try {
+      const res = await authClient.passkey.addPasskey();
+      if (res?.error) {
+        setError(res.error.message ?? "注册 Passkey 失败");
+      } else {
+        setSuccess("Passkey 注册成功");
+        await loadPasskeys();
+      }
+    } catch {
+      setError("注册 Passkey 失败，请重试");
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    setError("");
+    setSuccess("");
+    setDeletingId(id);
+    try {
+      const res = await authClient.passkey.deletePasskey({ id });
+      if (res?.error) {
+        setError(res.error.message ?? "删除 Passkey 失败");
+      } else {
+        setPasskeys((prev) => prev.filter((p) => p.id !== id));
+        setSuccess("Passkey 已删除");
+      }
+    } catch {
+      setError("删除 Passkey 失败，请重试");
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold text-foreground">账号设置</h1>
+        <p className="mt-0.5 text-sm text-muted">管理您的安全凭据</p>
+      </div>
+
+      {error && (
+        <Alert status="danger">
+          <Alert.Indicator />
+          <Alert.Content>
+            <Alert.Description>{error}</Alert.Description>
+          </Alert.Content>
+          <CloseButton onPress={() => setError("")} />
+        </Alert>
+      )}
+      {success && (
+        <Alert status="success">
+          <Alert.Indicator />
+          <Alert.Content>
+            <Alert.Description>{success}</Alert.Description>
+          </Alert.Content>
+          <CloseButton onPress={() => setSuccess("")} />
+        </Alert>
+      )}
+
+      {/* Passkey section */}
+      <div className="rounded-xl border border-border bg-surface-secondary">
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+          <div className="flex items-center gap-3">
+            <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
+              <Fingerprint className="size-5 text-accent" />
+            </div>
+            <div>
+              <p className="text-sm font-semibold text-foreground">Passkey</p>
+              <p className="text-xs text-muted">使用设备生物识别或 PIN 免密登录</p>
+            </div>
+          </div>
+          <Button size="sm" variant="secondary" isDisabled={adding} onPress={handleAdd}>
+            {adding ? <Spinner size="sm" /> : "添加 Passkey"}
+          </Button>
+        </div>
+
+        {loading ? (
+          <div className="flex justify-center py-8">
+            <Spinner />
+          </div>
+        ) : passkeys.length === 0 ? (
+          <div className="py-8 text-center text-sm text-muted">尚未添加任何 Passkey</div>
+        ) : (
+          <ul className="divide-y divide-border">
+            {passkeys.map((pk) => (
+              <li key={pk.id} className="flex items-center justify-between px-5 py-3.5">
+                <div className="flex items-center gap-3">
+                  <Fingerprint className="size-4 shrink-0 text-muted" />
+                  <div>
+                    <p className="text-sm font-medium text-foreground">
+                      {pk.name ?? pk.deviceType ?? "Passkey"}
+                    </p>
+                    <p className="text-xs text-muted">
+                      添加于{" "}
+                      {new Date(pk.createdAt).toLocaleString("zh-CN", {
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                      })}
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  isIconOnly
+                  size="sm"
+                  variant="danger-soft"
+                  isDisabled={deletingId === pk.id}
+                  onPress={() => handleDelete(pk.id)}
+                >
+                  {deletingId === pk.id ? <Spinner size="sm" /> : <TrashBin className="size-4" />}
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/app/login/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Alert, Button, Card, CloseButton, Input, Label, TextField } from "@heroui/react";
-import { Thunderbolt } from "@gravity-ui/icons";
+import { Fingerprint, Thunderbolt } from "@gravity-ui/icons";
 import { authClient } from "@/lib/auth-client";
 
 export default function LoginPage() {
@@ -14,6 +14,7 @@ export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [passkeyLoading, setPasskeyLoading] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -38,6 +39,24 @@ export default function LoginPage() {
     }
   };
 
+  const handlePasskey = async () => {
+    setError("");
+    setPasskeyLoading(true);
+    try {
+      const res = await authClient.signIn.passkey();
+      if (res?.error) {
+        setError(res.error.message ?? "Passkey 登录失败");
+      } else {
+        router.push("/dashboard");
+        router.refresh();
+      }
+    } catch {
+      setError("Passkey 登录失败，请重试");
+    } finally {
+      setPasskeyLoading(false);
+    }
+  };
+
   return (
     <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-4">
       {/* Brand */}
@@ -97,6 +116,27 @@ export default function LoginPage() {
             <Button className="mt-2 w-full" isDisabled={loading} type="submit">
               {loading ? "登录中…" : "登录"}
             </Button>
+            <div className="relative flex items-center gap-3">
+              <div className="h-px flex-1 bg-border" />
+              <span className="text-xs text-muted">或</span>
+              <div className="h-px flex-1 bg-border" />
+            </div>
+            <Button
+              className="w-full"
+              variant="secondary"
+              isDisabled={passkeyLoading}
+              type="button"
+              onPress={handlePasskey}
+            >
+              {passkeyLoading ? (
+                "验证中…"
+              ) : (
+                <>
+                  <Fingerprint className="size-4" />
+                  使用 Passkey 登录
+                </>
+              )}
+            </Button>
           </form>
         </Card.Content>
       </Card>

apps/web/components/sidebar.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useState } from 'react'
-import { CreditCard, ListCheck, Person, PlugConnection, Thunderbolt, Xmark, Bars } from '@gravity-ui/icons'
+import { CreditCard, Gear, ListCheck, Person, PlugConnection, Thunderbolt, Xmark, Bars } from '@gravity-ui/icons'
 import SidebarFooter from '@/components/sidebar-footer'
 import { useSession } from '@/lib/auth-client'
 
@@ -15,6 +15,10 @@ const navItems = [
   { href: '/dashboard/users', label: '用户管理', icon: Person, adminOnly: true },
 ]
 
+const settingsItems = [
+  { href: '/dashboard/settings', label: '账号设置', icon: Gear },
+]
+
 function NavContent({ pathname, isAdmin, onNavigate }: { pathname: string; isAdmin: boolean; onNavigate?: () => void }) {
   return (
     <>
@@ -58,6 +62,32 @@ function NavContent({ pathname, isAdmin, onNavigate }: { pathname: string; isAdm
             </Link>
           )
         })}
+        <p className="mb-1 mt-3 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
+          设置
+        </p>
+        {settingsItems.map((item) => {
+          const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
+          const Icon = item.icon
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={onNavigate}
+              className={[
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-accent/10 text-accent'
+                  : 'text-muted hover:bg-surface-tertiary hover:text-foreground',
+              ].join(' ')}
+            >
+              <Icon className="size-4 shrink-0" />
+              <span>{item.label}</span>
+              {isActive && (
+                <span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />
+              )}
+            </Link>
+          )
+        })}
       </nav>
 
       {/* Footer */}

apps/web/lib/auth-client.ts

@@ -1,9 +1,10 @@
 import { createAuthClient } from "better-auth/react";
 import { adminClient, usernameClient } from "better-auth/client/plugins";
+import { passkeyClient } from "@better-auth/passkey/client";
 
 export const authClient = createAuthClient({
   baseURL: process.env.NEXT_PUBLIC_CSMS_URL ?? "http://localhost:3001",
-  plugins: [usernameClient(), adminClient()],
+  plugins: [usernameClient(), adminClient(), passkeyClient()],
 });
 
 export const { signIn, signOut, signUp, useSession } = authClient;

package.json

@@ -32,5 +32,8 @@
     "npm-run-all": "^4.1.5",
     "oxfmt": "^0.36.0",
     "oxlint": "^1.52.0"
+  },
+  "dependencies": {
+    "@better-auth/passkey": "^1.5.4"
   }
 }