brackt/app/routes/admin.tsx
Chris Parsons ba9bf64e37
Migrate authentication from Clerk to BetterAuth (#324)
* Migrate authentication from Clerk to BetterAuth (#322)

Replaces @clerk/react-router with self-hosted better-auth to eliminate
the external Clerk dependency and keep all user/session data in our own
PostgreSQL database.

**What changed**
- New: auth.server.ts (BetterAuth config w/ Drizzle adapter, bcrypt, Resend), auth-client.ts, api.auth.$.ts handler
- New: /login and /register pages with email+password and Google/Discord OAuth; open-redirect guard on redirectTo param
- New: UserMenu component replacing Clerk's UserButton
- Schema: sessions, accounts, verifications tables; emailVerified column; clerkId made nullable
- Migrations 0081 (BetterAuth tables) and 0082 (accounts extra columns for v1.6.9)
- All ~30 route files: getAuth → auth.api.getSession, isUserAdminByClerkId → isUserAdmin
- root.tsx: isAdmin read directly from session.user.isAdmin (no extra DB query)
- useDraftAuthRecovery: removed Clerk JWT refresh logic; replaced with cookie-session check
- models/user.ts: removed findUserByClerkId, findOrCreateUser, updateUserByClerkId (webhook pattern)
- Deleted: app/routes/api/webhooks/clerk.ts; uninstalled @clerk/react-router, @clerk/themes, svix
- scripts/migrate.mjs: extended with idempotent Clerk → BetterAuth data migration (FK conversion, email_verified, OAuth accounts)
- scripts/migrate-clerk-passwords.mjs: one-time script to import bcrypt hashes from Clerk CSV export
- BETTERAUTH_MIGRATION.md: dev and production runbooks
- All test mocks updated: vi.mock('~/lib/auth.server') instead of @clerk/react-router/server
- Test fixtures: added emailVerified field

**Follow-up (post-stable)**
- Rename actor_clerk_id column → actor_user_id in commissioner_audit_log
- Drop clerk_id column from users once migration confirmed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add .npmrc with legacy-peer-deps for better-auth/drizzle peer dep conflict

better-auth@1.6.9 declares peerOptional deps on drizzle-orm ^0.45.2 and
drizzle-kit >=0.31.4, but we run drizzle-orm ~0.36.3 / drizzle-kit ~0.28.1.
The adapter works correctly at runtime with our versions — the peer dep is
only for stricter type checking. This unblocks npm ci in CI without a risky
drizzle major-version upgrade.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-24 22:00:49 -07:00

84 lines
2.4 KiB
TypeScript

import { Link, Outlet, redirect } from "react-router";
import { auth } from "~/lib/auth.server";
import type { Route } from "./+types/admin";
import { isUserAdmin } from "~/models/user";
import { Button } from "~/components/ui/button";
import {
LayoutDashboard,
Trophy,
Calendar,
FolderKanban,
RefreshCw,
} from "lucide-react";
export function meta(): Route.MetaDescriptors {
return [{ title: "Admin - Brackt" }];
}
export async function loader(args: Route.LoaderArgs) {
const session = await auth.api.getSession({ headers: args.request.headers });
const userId = session?.user.id ?? null;
if (!userId) {
throw redirect("/");
}
const isAdmin = await isUserAdmin(userId);
if (!isAdmin) {
throw redirect("/");
}
return { isAdmin };
}
export default function AdminLayout() {
return (
<div className="flex min-h-screen">
{/* Sidebar */}
<aside className="w-64 border-r bg-muted/40">
<div className="flex h-16 items-center border-b px-6">
<h2 className="text-lg font-semibold">Admin Panel</h2>
</div>
<nav className="space-y-1 p-4">
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin">
<LayoutDashboard className="mr-2 h-4 w-4" />
Dashboard
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/sports">
<Trophy className="mr-2 h-4 w-4" />
Sports
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/sports-seasons">
<Calendar className="mr-2 h-4 w-4" />
Sports Seasons
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/templates">
<FolderKanban className="mr-2 h-4 w-4" />
Season Templates
</Link>
</Button>
<div className="border-t my-2" />
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/data-sync">
<RefreshCw className="mr-2 h-4 w-4" />
Data Sync
</Link>
</Button>
</nav>
</aside>
{/* Main Content */}
<main className="flex-1">
<Outlet />
</main>
</div>
);
}