cca546b0f5
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>
59 lines
2 KiB
TypeScript
59 lines
2 KiB
TypeScript
import { Link, useNavigate } from "react-router";
|
|
import { authClient } from "~/lib/auth-client";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
|
|
import { Button } from "~/components/ui/button";
|
|
|
|
interface UserMenuProps {
|
|
name: string | null;
|
|
email: string;
|
|
imageUrl: string | null;
|
|
}
|
|
|
|
export function UserMenu({ name, email, imageUrl }: UserMenuProps) {
|
|
const navigate = useNavigate();
|
|
|
|
const initials = name
|
|
? name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2)
|
|
: email.slice(0, 2).toUpperCase();
|
|
|
|
async function handleSignOut() {
|
|
await authClient.signOut();
|
|
navigate("/");
|
|
}
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="ghost" className="relative h-9 w-9 rounded-full p-0 overflow-hidden">
|
|
{imageUrl ? (
|
|
<img src={imageUrl} alt={name ?? email} className="h-9 w-9 rounded-full object-cover" />
|
|
) : (
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-full bg-muted text-sm font-medium">
|
|
{initials}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="end" className="w-48 p-1">
|
|
<div className="px-2 py-1.5 text-sm">
|
|
<p className="font-medium truncate">{name ?? email}</p>
|
|
<p className="text-muted-foreground truncate text-xs">{email}</p>
|
|
</div>
|
|
<div className="border-t border-border my-1" />
|
|
<Link
|
|
to="/user-profile"
|
|
className="flex w-full items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent transition-colors"
|
|
>
|
|
Profile
|
|
</Link>
|
|
<div className="border-t border-border my-1" />
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="flex w-full items-center rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent transition-colors"
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|