@flaredev/cli 0.1.1 → 0.2.0

package/templates/app/components/auth/ui.tsx

@@ -0,0 +1,96 @@
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+/*
+ * The auth screens' controls. They read the theme tokens (--brand, --button-radius,
+ * --radius, --font-theme), so the same markup takes each theme's shape and colour.
+ */
+
+export const AuthInput = forwardRef<HTMLInputElement, React.ComponentProps<"input">>(function AuthInput({ className, ...props }, ref) {
+  return (
+    <input
+      ref={ref}
+      className={cn(
+        "h-11 w-full rounded-[calc(var(--radius)-2px)] border border-border bg-surface px-3.5 text-[15px] text-foreground outline-none transition-[border-color,box-shadow]",
+        "placeholder:text-foreground-muted/80 focus-visible:border-brand focus-visible:ring-[3px] focus-visible:ring-brand/20",
+        "aria-invalid:border-danger aria-invalid:ring-danger/15 disabled:opacity-60",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export function AuthLabel({ className, ...props }: React.ComponentProps<"label">) {
+  return <label className={cn("text-sm font-medium text-foreground", className)} {...props} />;
+}
+
+export function PrimaryButton({ className, pending, children, ...props }: React.ComponentProps<"button"> & { pending?: boolean }) {
+  return (
+    <button
+      className={cn(
+        "relative inline-flex h-11 w-full items-center justify-center gap-2 rounded-[var(--button-radius)] bg-brand px-4 text-[15px] font-medium text-brand-foreground",
+        "[background-image:var(--brand-gradient,none)] transition-[filter,opacity] hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-60",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+        className,
+      )}
+      disabled={pending || props.disabled}
+      {...props}
+    >
+      {pending && <span className="size-4 animate-spin rounded-full border-2 border-current border-r-transparent" aria-hidden="true" />}
+      {children}
+    </button>
+  );
+}
+
+export function SecondaryButton({ className, ...props }: React.ComponentProps<"button">) {
+  return (
+    <button
+      className={cn(
+        "inline-flex h-11 w-full items-center justify-center gap-2.5 rounded-[var(--button-radius)] border border-border bg-surface px-4 text-[15px] font-medium text-foreground",
+        "transition-colors hover:bg-surface-muted disabled:cursor-not-allowed disabled:opacity-60",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+        className,
+      )}
+      type="button"
+      {...props}
+    />
+  );
+}
+
+export function TextButton({ className, ...props }: React.ComponentProps<"button">) {
+  return (
+    <button
+      type="button"
+      className={cn("text-sm font-medium text-link underline-offset-4 hover:underline focus-visible:underline focus-visible:outline-none disabled:opacity-60", className)}
+      {...props}
+    />
+  );
+}
+
+export function Divider({ children = "or" }: { children?: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3 text-xs text-foreground-muted uppercase" role="separator">
+      <span className="h-px flex-1 bg-border" />
+      {children}
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+export function FormMessage({ tone = "error", children }: { tone?: "error" | "info" | "success"; children: React.ReactNode }) {
+  if (!children) return null;
+  return (
+    <p
+      role={tone === "error" ? "alert" : "status"}
+      className={cn(
+        "rounded-[calc(var(--radius)-2px)] px-3 py-2.5 text-sm",
+        tone === "error" && "bg-danger/10 text-danger",
+        tone === "info" && "bg-surface-muted text-foreground",
+        tone === "success" && "bg-success/10 text-success",
+      )}
+    >
+      {children}
+    </p>
+  );
+}

package/templates/app/components/dashboard/dashboard-nav.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export interface NavLink {
+  href: string;
+  label: string;
+}
+
+/** The dashboard's section links, with the current one marked. */
+export function DashboardNav({ links }: { links: NavLink[] }) {
+  const pathname = usePathname();
+  return (
+    <nav aria-label="Dashboard" className="-mb-px flex gap-1 overflow-x-auto">
+      {links.map((link) => {
+        const current = link.href === "/dashboard" ? pathname === "/dashboard" : pathname.startsWith(link.href);
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            aria-current={current ? "page" : undefined}
+            className={cn(
+              "border-b-2 px-3 py-3 text-sm font-medium whitespace-nowrap text-foreground-muted transition-colors hover:text-foreground",
+              current ? "border-brand text-foreground" : "border-transparent",
+            )}
+          >
+            {link.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

package/templates/app/components/marketing/product-preview.tsx

@@ -0,0 +1,70 @@
+import { site } from "@/lib/site";
+
+/**
+ * A drawing of the app in CSS, not a screenshot, so it takes the theme's colours and
+ * type. Replace it with a real screenshot of your product when you have one.
+ */
+export function ProductPreview() {
+  const rows = [
+    ["Northwind", "Active", "$4,200"],
+    ["Brightline", "Trial", "$1,150"],
+    ["Vandelay", "Active", "$9,800"],
+    ["Globex", "Paused", "$640"],
+  ];
+  const bars = [38, 52, 44, 68, 57, 76, 71, 88, 80, 94, 86, 100];
+  return (
+    <div aria-hidden="true" className="relative mx-auto w-full max-w-5xl">
+      <div className="absolute -inset-x-10 -top-10 -bottom-20 -z-10 rounded-[3rem] bg-gradient-to-b from-brand/15 via-brand/5 to-transparent blur-2xl" />
+      <div className="overflow-hidden rounded-[calc(var(--radius)+10px)] border border-border bg-surface shadow-2xl shadow-foreground/10">
+        <div className="flex items-center gap-2 border-b border-border px-4 py-3">
+          <span className="size-3 rounded-full bg-border" />
+          <span className="size-3 rounded-full bg-border" />
+          <span className="size-3 rounded-full bg-border" />
+          <span className="ml-3 h-6 flex-1 rounded-md bg-surface-muted" />
+        </div>
+        <div className="grid grid-cols-[180px_1fr] max-sm:grid-cols-1">
+          <div className="flex flex-col gap-1.5 border-r border-border bg-surface-muted/60 p-4 max-sm:hidden">
+            <span className="mb-3 flex items-center gap-2 text-sm font-semibold">
+              <span className="size-5 rounded-md bg-brand [background-image:var(--brand-gradient,none)]" />
+              {site.name}
+            </span>
+            {["Overview", "Customers", "Invoices", "Reports", "Settings"].map((item, index) => (
+              <span key={item} className={`rounded-md px-2.5 py-1.5 text-xs ${index === 0 ? "bg-surface font-medium text-foreground shadow-sm" : "text-foreground-muted"}`}>
+                {item}
+              </span>
+            ))}
+          </div>
+          <div className="flex flex-col gap-5 p-6">
+            <div className="grid grid-cols-3 gap-3">
+              {[
+                ["Revenue", "$48,290", "+12%"],
+                ["Customers", "1,284", "+8%"],
+                ["Churn", "1.9%", "-0.4%"],
+              ].map(([label, value, change]) => (
+                <div key={label} className="rounded-[var(--radius)] border border-border p-3">
+                  <p className="text-[11px] text-foreground-muted">{label}</p>
+                  <p className="mt-1 text-lg font-semibold tabular-nums">{value}</p>
+                  <p className="text-[11px] text-success">{change}</p>
+                </div>
+              ))}
+            </div>
+            <div className="flex h-28 items-end gap-1.5 rounded-[var(--radius)] border border-border p-3">
+              {bars.map((height, index) => (
+                <span key={index} className="flex-1 rounded-t-sm bg-brand/80 [background-image:var(--brand-gradient,none)]" style={{ height: `${height}%`, opacity: 0.35 + index * 0.055 }} />
+              ))}
+            </div>
+            <div className="rounded-[var(--radius)] border border-border">
+              {rows.map(([name, status, amount]) => (
+                <div key={name} className="flex items-center justify-between border-b border-border px-3 py-2 text-xs last:border-b-0">
+                  <span className="font-medium">{name}</span>
+                  <span className="rounded-full bg-surface-muted px-2 py-0.5 text-foreground-muted">{status}</span>
+                  <span className="tabular-nums">{amount}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/app/components/marketing/site-header.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { BrandMark } from "@/components/auth/auth-shell";
+import { site } from "@/lib/site";
+
+/** The public site's top bar. Static on purpose: it doesn't read the session, so the home page can be cached. */
+export function SiteHeader() {
+  return (
+    <header className="sticky top-0 z-30 border-b border-border/60 bg-background/80 backdrop-blur-md">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-6 px-6">
+        <Link href="/" className="flex items-center gap-2.5 font-semibold">
+          <BrandMark link={false} className="[&_span_span]:size-8 [&_span_span]:text-base" />
+          {site.name}
+        </Link>
+        <nav aria-label="Main" className="hidden items-center gap-7 text-sm text-foreground-muted md:flex">
+          <a href="#features" className="hover:text-foreground">
+            Features
+          </a>
+          <a href="#customers" className="hover:text-foreground">
+            Customers
+          </a>
+          <a href={site.links.support} className="hover:text-foreground">
+            Contact
+          </a>
+        </nav>
+        <div className="flex items-center gap-2">
+          <Link href="/sign-in" className="rounded-[var(--button-radius)] px-3 py-2 text-sm font-medium text-foreground-muted hover:text-foreground">
+            Log in
+          </Link>
+          <Link
+            href="/sign-up"
+            className="rounded-[var(--button-radius)] bg-brand px-4 py-2 text-sm font-medium text-brand-foreground [background-image:var(--brand-gradient,none)] hover:brightness-95"
+          >
+            Sign up
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/app/components/sign-out-button.tsx

@@ -10,7 +10,7 @@ export function SignOutButton() {
         await authClient.signOut();
         window.location.assign("/sign-in");
       }}
-      className="rounded-md border border-[var(--border)] px-3 py-1.5 text-sm font-medium hover:bg-[var(--surface-muted)]"
+      className="rounded-[var(--button-radius)] border border-border bg-surface px-3 py-1.5 text-sm font-medium hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
     >
       Sign out
     </button>

package/templates/app/components/ui/checkbox.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import { cn } from "@/lib/utils"
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="grid place-content-center text-current transition-none">
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/templates/app/components/ui/radio-group.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { CircleIcon } from "lucide-react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+import { cn } from "@/lib/utils"
+
+function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn("grid gap-3", className)} {...props} />
+}
+
+function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator data-slot="radio-group-indicator" className="relative flex items-center justify-center">
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

package/templates/app/db/auth-schema.ts

@@ -1,118 +1,167 @@
-/**
- * Better Auth tables (user, session, account, verification), including the admin
- * plugin's columns (user.role/banned/ban_reason/ban_expires, session.impersonated_by).
- * Generated with `auth generate --adapter drizzle --dialect sqlite` (better-auth 1.7.5).
- * Re-generate if you add Better Auth plugins that extend the schema.
- */
-import { relations, sql } from "drizzle-orm";
-import { sqliteTable, text, integer, index } from "drizzle-orm/sqlite-core";
-
-export const user = sqliteTable("user", {
-  id: text("id").primaryKey(),
-  name: text("name").notNull(),
-  email: text("email").notNull().unique(),
-  emailVerified: integer("email_verified", { mode: "boolean" })
-    .default(false)
-    .notNull(),
-  image: text("image"),
-  createdAt: integer("created_at", { mode: "timestamp_ms" })
-    .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
-    .notNull(),
-  updatedAt: integer("updated_at", { mode: "timestamp_ms" })
-    .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
-    .$onUpdate(() => /* @__PURE__ */ new Date())
-    .notNull(),
-  role: text("role"),
-  banned: integer("banned", { mode: "boolean" }).default(false),
-  banReason: text("ban_reason"),
-  banExpires: integer("ban_expires", { mode: "timestamp_ms" }),
-});
-
-export const session = sqliteTable(
-  "session",
-  {
-    id: text("id").primaryKey(),
-    expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
-    token: text("token").notNull().unique(),
-    createdAt: integer("created_at", { mode: "timestamp_ms" })
-      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
-      .notNull(),
-    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
-      .$onUpdate(() => /* @__PURE__ */ new Date())
-      .notNull(),
-    ipAddress: text("ip_address"),
-    userAgent: text("user_agent"),
-    userId: text("user_id")
-      .notNull()
-      .references(() => user.id, { onDelete: "cascade" }),
-    impersonatedBy: text("impersonated_by"),
-  },
-  (table) => [index("session_userId_idx").on(table.userId)],
-);
-
-export const account = sqliteTable(
-  "account",
-  {
-    id: text("id").primaryKey(),
-    accountId: text("account_id").notNull(),
-    providerId: text("provider_id").notNull(),
-    userId: text("user_id")
-      .notNull()
-      .references(() => user.id, { onDelete: "cascade" }),
-    accessToken: text("access_token"),
-    refreshToken: text("refresh_token"),
-    idToken: text("id_token"),
-    accessTokenExpiresAt: integer("access_token_expires_at", {
-      mode: "timestamp_ms",
-    }),
-    refreshTokenExpiresAt: integer("refresh_token_expires_at", {
-      mode: "timestamp_ms",
-    }),
-    scope: text("scope"),
-    password: text("password"),
-    createdAt: integer("created_at", { mode: "timestamp_ms" })
-      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
-      .notNull(),
-    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
-      .$onUpdate(() => /* @__PURE__ */ new Date())
-      .notNull(),
-  },
-  (table) => [index("account_userId_idx").on(table.userId)],
-);
-
-export const verification = sqliteTable(
-  "verification",
-  {
-    id: text("id").primaryKey(),
-    identifier: text("identifier").notNull(),
-    value: text("value").notNull(),
-    expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
-    createdAt: integer("created_at", { mode: "timestamp_ms" })
-      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
-      .notNull(),
-    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
-      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
-      .$onUpdate(() => /* @__PURE__ */ new Date())
-      .notNull(),
-  },
-  (table) => [index("verification_identifier_idx").on(table.identifier)],
-);
-
-export const userRelations = relations(user, ({ many }) => ({
-  sessions: many(session),
-  accounts: many(account),
-}));
-
-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],
-  }),
-}));
+/**
+ * Better Auth tables (user, session, account, verification), including the admin
+ * plugin's columns (user.role/banned/ban_reason/ban_expires, session.impersonated_by),
+ * the two-factor plugin (user.two_factor_enabled, two_factor) and passkeys (passkey).
+ * Every sign-in method's tables exist whether or not lib/auth-config.ts switches it on.
+ * Generated with `auth generate --adapter drizzle --dialect sqlite` (better-auth 1.7.5).
+ * Re-generate if you add Better Auth plugins that extend the schema.
+ */
+import { relations, sql } from "drizzle-orm";
+import { sqliteTable, text, integer, index } from "drizzle-orm/sqlite-core";
+
+export const user = sqliteTable("user", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email").notNull().unique(),
+  emailVerified: integer("email_verified", { mode: "boolean" })
+    .default(false)
+    .notNull(),
+  image: text("image"),
+  createdAt: integer("created_at", { mode: "timestamp_ms" })
+    .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+    .notNull(),
+  updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+    .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+    .$onUpdate(() => /* @__PURE__ */ new Date())
+    .notNull(),
+  role: text("role"),
+  banned: integer("banned", { mode: "boolean" }).default(false),
+  banReason: text("ban_reason"),
+  banExpires: integer("ban_expires", { mode: "timestamp_ms" }),
+  twoFactorEnabled: integer("two_factor_enabled", { mode: "boolean" }).default(false),
+});
+
+export const session = sqliteTable(
+  "session",
+  {
+    id: text("id").primaryKey(),
+    expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
+    token: text("token").notNull().unique(),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .notNull(),
+    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+    ipAddress: text("ip_address"),
+    userAgent: text("user_agent"),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    impersonatedBy: text("impersonated_by"),
+  },
+  (table) => [index("session_userId_idx").on(table.userId)],
+);
+
+export const account = sqliteTable(
+  "account",
+  {
+    id: text("id").primaryKey(),
+    accountId: text("account_id").notNull(),
+    providerId: text("provider_id").notNull(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    accessToken: text("access_token"),
+    refreshToken: text("refresh_token"),
+    idToken: text("id_token"),
+    accessTokenExpiresAt: integer("access_token_expires_at", {
+      mode: "timestamp_ms",
+    }),
+    refreshTokenExpiresAt: integer("refresh_token_expires_at", {
+      mode: "timestamp_ms",
+    }),
+    scope: text("scope"),
+    password: text("password"),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .notNull(),
+    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+  },
+  (table) => [index("account_userId_idx").on(table.userId)],
+);
+
+export const verification = sqliteTable(
+  "verification",
+  {
+    id: text("id").primaryKey(),
+    identifier: text("identifier").notNull(),
+    value: text("value").notNull(),
+    expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .notNull(),
+    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+  },
+  (table) => [index("verification_identifier_idx").on(table.identifier)],
+);
+
+export const twoFactor = sqliteTable(
+  "two_factor",
+  {
+    id: text("id").primaryKey(),
+    secret: text("secret").notNull(),
+    backupCodes: text("backup_codes").notNull(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    verified: integer("verified", { mode: "boolean" }).default(true),
+    failedVerificationCount: integer("failed_verification_count").default(0),
+    lockedUntil: integer("locked_until", { mode: "timestamp_ms" }),
+  },
+  (table) => [index("twoFactor_secret_idx").on(table.secret), index("twoFactor_userId_idx").on(table.userId)],
+);
+
+export const passkey = sqliteTable(
+  "passkey",
+  {
+    id: text("id").primaryKey(),
+    name: text("name"),
+    publicKey: text("public_key").notNull(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    credentialID: text("credential_id").notNull(),
+    counter: integer("counter").notNull(),
+    deviceType: text("device_type").notNull(),
+    backedUp: integer("backed_up", { mode: "boolean" }).notNull(),
+    transports: text("transports"),
+    createdAt: integer("created_at", { mode: "timestamp_ms" }),
+    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),
+  twoFactors: many(twoFactor),
+  passkeys: many(passkey),
+}));
+
+export const twoFactorRelations = relations(twoFactor, ({ one }) => ({
+  user: one(user, { fields: [twoFactor.userId], references: [user.id] }),
+}));
+
+export const passkeyRelations = relations(passkey, ({ one }) => ({
+  user: one(user, { fields: [passkey.userId], references: [user.id] }),
+}));
+
+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],
+  }),
+}));

package/templates/app/lib/admin-nav.ts

@@ -12,4 +12,4 @@ export const generatedAdminLinks: AdminLink[] = [];
 // generated:end
 
 /** Links shown under "Platform" in the admin sidebar. */
-export const adminLinks: AdminLink[] = [...generatedAdminLinks];
+export const adminLinks: AdminLink[] = [...generatedAdminLinks, { label: "API reference", href: "/api/reference", icon: "book" }];

package/templates/app/lib/api-docs.ts

@@ -0,0 +1,16 @@
+/**
+ * The API reference at /api/reference (Scalar), built from the OpenAPI document at
+ * /api/openapi.json. Both are generated from resources/ and policies/ on every
+ * request, so they always match the API.
+ */
+export const apiDocs = {
+  title: "__APP_NAME__ API",
+  description: "",
+  version: "1.0.0",
+  /**
+   * "role": a signed-in user sees the endpoints their role may call (admins see
+   * everything), a visitor only the sign-in endpoints.
+   * "public": everyone sees every endpoint (requests still need the right role).
+   */
+  visibility: "role" as "role" | "public",
+};

package/templates/app/lib/auth-client.ts

@@ -1,4 +1,19 @@
+import { passkeyClient } from "@better-auth/passkey/client";
+import { emailOTPClient, magicLinkClient, twoFactorClient } from "better-auth/client/plugins";
 import { createAuthClient } from "better-auth/react";
 
 /** Browser-side auth client. Same origin as the app, so no baseURL is needed. */
-export const authClient = createAuthClient();
+export const authClient = createAuthClient({
+  plugins: [
+    magicLinkClient(),
+    emailOTPClient(),
+    passkeyClient(),
+    // A password sign-in that needs a second factor continues on /two-factor.
+    twoFactorClient({
+      onTwoFactorRedirect: () => {
+        const next = new URLSearchParams(window.location.search).get("next");
+        window.location.href = `/two-factor${next ? `?next=${encodeURIComponent(next)}` : ""}`;
+      },
+    }),
+  ],
+});