auth.ts

); } const allDbs = [...dbDrivers, ...ormAdapters]; export function DatabaseSection() { const pg = allDbs.find((d) => d.name === "PostgreSQL")!; const others = allDbs.filter((d) => d.name !== "PostgreSQL"); return (

{/* PostgreSQL — intentionally larger feature tile */}

{pg.icon()} {pg.name}

{/* Other databases */} {others.map((db) => (

{db.icon()} {db.name}

))}

); } export function SocialProvidersSection() { const providerBadges: Record = { Cognito: "CG", Railway: "RW", Paybin: "PB", WeChat: "WC", }; return (

{socialProviders.length}+ Providers

{socialProviders.map((provider) => { const Icon = providerIcons[provider]; return ( {Icon ? ( Icon() ) : ( {providerBadges[provider] ?? provider.slice(0, 2).toUpperCase()} )} {provider} ); })}

); } const featuredIcons: Record ReactNode> = { "Next.js": () => ( ), TanStack: () => ( ), }; const featured = [ { name: "Next.js", icon: "nextJS", href: "/docs/integrations/next", snippet: "export { GET, POST } from '@/auth'", }, { name: "TanStack", icon: "tanstack", href: "/docs/integrations/tanstack", snippet: "createServerFileRoute().createRouter(auth)", }, { name: "Nuxt", icon: "nuxt", href: "/docs/integrations/nuxt", snippet: "export default defineNuxtPlugin(auth)", }, { name: "SvelteKit", icon: "svelteKit", href: "/docs/integrations/svelte-kit", snippet: "export const handle = auth.handle", }, { name: "Astro", icon: "astro", href: "/docs/integrations/astro", snippet: "export const { GET, POST } = auth", }, { name: "Hono", icon: "hono", href: "/docs/integrations/hono", snippet: "app.on(['GET','POST'], auth.handler)", }, ] as const; const moreFrameworks = [ { name: "React", icon: "react", href: "/docs/integrations/react" }, { name: "Vue", icon: "vue", href: "/docs/integrations/vue" }, { name: "Remix", icon: "remix", href: "/docs/integrations/remix" }, { name: "Solid Start", icon: "solidStart", href: "/docs/integrations/solid-start", }, { name: "Express", icon: "express", href: "/docs/integrations/express" }, { name: "Fastify", icon: "fastify", href: "/docs/integrations/fastify" }, { name: "NestJS", icon: "nestJS", href: "/docs/integrations/nestjs" }, { name: "Elysia", icon: "elysia", href: "/docs/integrations/elysia" }, { name: "Nitro", icon: "nitro", href: "/docs/integrations/nitro" }, { name: "Expo", icon: "expo", href: "/docs/integrations/expo" }, { name: "Lynx", icon: "lynx", href: "/docs/integrations/lynx" }, { name: "Encore", icon: "encore", href: "/docs/integrations/encore" }, { name: "Convex", icon: "convex", href: "/docs/integrations/convex" }, ] as const; export function IntegrationsSection() { return (

{/* Featured integrations */}

{featured.map((fw) => { const customIcon = featuredIcons[fw.name]; const fallbackIcon = frameworkIcons[fw.icon as keyof typeof frameworkIcons]; const renderIcon = customIcon || fallbackIcon; return ( {renderIcon?.()} {fw.name} {fw.snippet} ); })}

{/* More frameworks */}

+ {moreFrameworks.length} more

{moreFrameworks.map((fw) => { const iconFn = frameworkIcons[fw.icon as keyof typeof frameworkIcons]; return ( {iconFn?.()} {fw.name} ); })}

); } export function PluginEcosystem() { const half = Math.ceil(plugins.length / 2); const row1 = plugins.slice(0, half); const row2 = plugins.slice(half); return (

Plugin Ecosystem browse all →

{/* Row 1 — scrolls left */}

{[...row1, ...row1].map((plugin, i) => ( {plugin.name} {categoryLabels[plugin.category]} ))}

{/* Row 2 — scrolls right */}

{[...row2, ...row2].map((plugin, i) => ( {plugin.name} {categoryLabels[plugin.category]} ))}

{/* Side fades */}

); } export function AiNativeSection() { const steps = [ { label: "mcp", text: "Connected to better-auth docs" }, { label: "skill", text: "better-auth/add-provider → google" }, { label: "skill", text: "better-auth/add-plugin → two-factor" }, { label: "write", text: "lib/auth.ts", lines: 14 }, { label: "done", text: "Google OAuth + 2FA configured" }, ]; const mcpClients = [ { name: "Claude Code", cmd: "claude mcp add better-auth" }, { name: "Cursor", cmd: "cursor mcp add better-auth" }, { name: "VS Code", cmd: "code --add-mcp better-auth" }, ]; return (

AI Native

Your auth lives in{" "} your codebase {" "} — so AI can configure it. Ships with{" "} MCP server ,{" "} Claude Code skills , and{" "} Cursor rules .

{/* Prompt line */}

› Add Google login and 2FA to my app

{/* Steps */}

{steps.map((step) => (

{step.label} {step.text} {"lines" in step && typeof step.lines === "number" && ( +{step.lines} )} {step.label === "done" && ( )}

))}

{/* MCP clients */}

{mcpClients.map((mc) => (

{mc.name}


									{mc.cmd}

))}

); }