ba9bf64e37
* 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>
180 lines
No EOL
5.9 KiB
TypeScript
180 lines
No EOL
5.9 KiB
TypeScript
import {
|
|
isRouteErrorResponse,
|
|
Links,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
useLocation,
|
|
} from "react-router";
|
|
|
|
import type { Route } from "./+types/root";
|
|
import "./app.css";
|
|
import { auth } from "~/lib/auth.server";
|
|
import { Navbar } from "~/components/navbar";
|
|
import { NavigationProgress } from "~/components/NavigationProgress";
|
|
import { Toaster } from "~/components/ui/sonner";
|
|
import { BracktGradients } from "~/components/ui/BracktGradients";
|
|
import { Footer } from "~/components/marketing/Footer";
|
|
import { AlertCircle, FileQuestion, Lock, ShieldOff, ServerCrash } from "lucide-react";
|
|
import logoUrl from "../public/logo.svg?url";
|
|
|
|
export async function loader({ request }: Route.LoaderArgs) {
|
|
const session = await auth.api.getSession({ headers: request.headers });
|
|
const isAdmin = session?.user.isAdmin ?? false;
|
|
return { isAdmin };
|
|
}
|
|
|
|
export const links: Route.LinksFunction = () => [
|
|
{ rel: "icon", href: "/favicon.ico?v=20260402", sizes: "48x48" },
|
|
{ rel: "icon", href: "/favicon.svg?v=20260402", type: "image/svg+xml" },
|
|
{ rel: "icon", href: "/favicon-96x96.png?v=20260402", type: "image/png", sizes: "96x96" },
|
|
{ rel: "apple-touch-icon", href: "/apple-touch-icon.png?v=20260402" },
|
|
{ rel: "manifest", href: "/site.webmanifest?v=20260402" },
|
|
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
|
{
|
|
rel: "preconnect",
|
|
href: "https://fonts.gstatic.com",
|
|
crossOrigin: "anonymous",
|
|
},
|
|
{
|
|
rel: "stylesheet",
|
|
href: "https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap",
|
|
},
|
|
];
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en" className="dark">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body>
|
|
<BracktGradients />
|
|
{children}
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export default function App({ loaderData }: Route.ComponentProps) {
|
|
const location = useLocation();
|
|
const isDraftRoute = location.pathname.includes('/draft');
|
|
|
|
return (
|
|
<>
|
|
<NavigationProgress />
|
|
{!isDraftRoute && <Navbar isAdmin={loaderData?.isAdmin ?? false} />}
|
|
{isDraftRoute ? (
|
|
<Outlet />
|
|
) : (
|
|
<>
|
|
<main>
|
|
<Outlet />
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
)}
|
|
<Toaster />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
|
let status = 500;
|
|
let title = "Something Went Wrong";
|
|
let message = "An unexpected error occurred. Please try again later.";
|
|
let stack: string | undefined;
|
|
let showSignInHint = false;
|
|
if (isRouteErrorResponse(error)) {
|
|
status = error.status;
|
|
switch (error.status) {
|
|
case 401:
|
|
title = "Sign In Required";
|
|
message = "You need to be signed in to access this page.";
|
|
showSignInHint = true;
|
|
break;
|
|
case 403:
|
|
title = "Access Denied";
|
|
message = "You don't have permission to view this page.";
|
|
break;
|
|
case 404:
|
|
title = "Page Not Found";
|
|
message = "The page you're looking for doesn't exist or has been moved.";
|
|
break;
|
|
default:
|
|
title = `Error ${error.status}`;
|
|
message =
|
|
typeof error.data === "string" && error.data
|
|
? error.data
|
|
: error.statusText || "Something went wrong.";
|
|
}
|
|
} else if (error instanceof Error) {
|
|
title = "Unexpected Error";
|
|
message = import.meta.env.DEV ? error.message : "An unexpected error occurred. Please try again later.";
|
|
stack = import.meta.env.DEV ? error.stack : undefined;
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground flex flex-col">
|
|
<header className="border-b border-border/40 bg-background/95 backdrop-blur">
|
|
<div className="flex h-16 items-center px-4 md:px-6 lg:px-8">
|
|
<a href="/">
|
|
<img src={logoUrl} alt="Brackt" className="h-6" />
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 flex items-center justify-center p-6">
|
|
<div className="max-w-md w-full text-center space-y-6">
|
|
<div className="text-8xl font-bold text-muted-foreground/40 select-none">
|
|
{status}
|
|
</div>
|
|
|
|
<div className="flex justify-center">
|
|
{statusIcon(status)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
|
<p className="text-muted-foreground">{message}</p>
|
|
</div>
|
|
|
|
<div className="flex justify-center pt-2">
|
|
<a
|
|
href="/"
|
|
className="inline-flex items-center justify-center rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 transition-colors"
|
|
>
|
|
{showSignInHint ? "Go to Home Page to Sign In" : "Go Home"}
|
|
</a>
|
|
</div>
|
|
|
|
{stack && (
|
|
<details className="text-left mt-8 border border-border rounded-md overflow-hidden">
|
|
<summary className="cursor-pointer text-sm text-muted-foreground px-4 py-3 hover:bg-muted/50">
|
|
Stack trace (development only)
|
|
</summary>
|
|
<pre className="p-4 overflow-x-auto text-xs text-muted-foreground border-t border-border">
|
|
<code>{stack}</code>
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function statusIcon(status: number) {
|
|
const cls = "h-14 w-14 text-muted-foreground";
|
|
if (status === 401) return <Lock className={cls} />;
|
|
if (status === 403) return <ShieldOff className={cls} />;
|
|
if (status === 404) return <FileQuestion className={cls} />;
|
|
if (status >= 500) return <ServerCrash className={cls} />;
|
|
return <AlertCircle className={cls} />;
|
|
} |