feat(auth): add better-auth core wiring for admin and db

This commit is contained in:
2026-02-10 12:42:49 +01:00
parent 3949fd2c11
commit ba8abb3b1b
30 changed files with 807 additions and 32 deletions

View File

@@ -0,0 +1,3 @@
import { authRouteHandlers } from "@cms/auth/server"
export const { GET, POST, PATCH, PUT, DELETE } = authRouteHandlers

View File

@@ -0,0 +1,204 @@
"use client"
import { useRouter, useSearchParams } from "next/navigation"
import { type FormEvent, useMemo, useState } from "react"
type LoginFormProps = {
allowRegistration: boolean
}
type AuthResponse = {
user?: {
role?: string
}
message?: string
}
function persistRoleCookie(role: unknown) {
if (typeof role !== "string") {
return
}
// biome-ignore lint/suspicious/noDocumentCookie: Temporary fallback for middleware role resolution.
document.cookie = `cms_role=${encodeURIComponent(role)}; Path=/; SameSite=Lax`
}
export function LoginForm({ allowRegistration }: LoginFormProps) {
const router = useRouter()
const searchParams = useSearchParams()
const nextPath = useMemo(() => searchParams.get("next") || "/", [searchParams])
const [name, setName] = useState("Admin User")
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [isBusy, setIsBusy] = useState(false)
const [error, setError] = useState<string | null>(null)
const [success, setSuccess] = useState<string | null>(null)
async function handleSignIn(event: FormEvent<HTMLFormElement>) {
event.preventDefault()
setIsBusy(true)
setError(null)
setSuccess(null)
try {
const response = await fetch("/api/auth/sign-in/email", {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
email,
password,
callbackURL: nextPath,
}),
})
const payload = (await response.json().catch(() => null)) as AuthResponse | null
if (!response.ok) {
setError(payload?.message ?? "Sign in failed")
return
}
persistRoleCookie(payload?.user?.role)
router.push(nextPath)
router.refresh()
} catch {
setError("Network error while signing in")
} finally {
setIsBusy(false)
}
}
async function handleSignUp() {
if (!name.trim()) {
setError("Name is required for account creation")
return
}
setIsBusy(true)
setError(null)
setSuccess(null)
try {
const response = await fetch("/api/auth/sign-up/email", {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
name,
email,
password,
callbackURL: nextPath,
}),
})
const payload = (await response.json().catch(() => null)) as AuthResponse | null
if (!response.ok) {
setError(payload?.message ?? "Sign up failed")
return
}
persistRoleCookie(payload?.user?.role)
setSuccess("Account created. You can continue to the dashboard.")
router.push(nextPath)
router.refresh()
} catch {
setError("Network error while signing up")
} finally {
setIsBusy(false)
}
}
return (
<main className="mx-auto flex min-h-screen w-full max-w-md flex-col justify-center px-6 py-16">
<div className="space-y-3">
<p className="text-sm uppercase tracking-[0.2em] text-neutral-500">Admin Auth</p>
<h1 className="text-3xl font-semibold tracking-tight">Sign in to CMS Admin</h1>
<p className="text-sm text-neutral-600">
Better Auth is active on this app via <code>/api/auth</code>.
</p>
</div>
<form
onSubmit={handleSignIn}
className="mt-8 space-y-4 rounded-xl border border-neutral-200 p-6"
>
<div className="space-y-1">
<label className="text-sm font-medium" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
required
value={email}
onChange={(event) => setEmail(event.target.value)}
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
/>
</div>
<div className="space-y-1">
<label className="text-sm font-medium" htmlFor="password">
Password
</label>
<input
id="password"
type="password"
minLength={8}
required
value={password}
onChange={(event) => setPassword(event.target.value)}
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
/>
</div>
<button
type="submit"
disabled={isBusy}
className="w-full rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white disabled:opacity-60"
>
{isBusy ? "Signing in..." : "Sign in"}
</button>
{allowRegistration ? (
<>
<div className="space-y-1 pt-2">
<label className="text-sm font-medium" htmlFor="name">
Name (for first account creation)
</label>
<input
id="name"
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm"
/>
</div>
<button
type="button"
onClick={() => {
void handleSignUp()
}}
disabled={isBusy}
className="w-full rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium disabled:opacity-60"
>
{isBusy ? "Creating account..." : "Create account"}
</button>
</>
) : (
<p className="text-xs text-neutral-600">
Registration is disabled. Ask an owner or support user to create your account.
</p>
)}
{error ? <p className="text-sm text-red-600">{error}</p> : null}
{success ? <p className="text-sm text-green-700">{success}</p> : null}
</form>
</main>
)
}

View File

@@ -0,0 +1,18 @@
import { isAdminRegistrationEnabled } from "@cms/auth/server"
import { redirect } from "next/navigation"
import { resolveRoleFromServerContext } from "@/lib/access-server"
import { LoginForm } from "./login-form"
export const dynamic = "force-dynamic"
export default async function LoginPage() {
const role = await resolveRoleFromServerContext()
if (role) {
redirect("/")
}
return <LoginForm allowRegistration={isAdminRegistrationEnabled()} />
}

View File

@@ -4,14 +4,18 @@ import { Button } from "@cms/ui/button"
import Link from "next/link"
import { redirect } from "next/navigation"
import { resolveRoleFromServerContext } from "@/lib/access"
import { resolveRoleFromServerContext } from "@/lib/access-server"
export const dynamic = "force-dynamic"
export default async function AdminHomePage() {
const role = await resolveRoleFromServerContext()
if (!role || !hasPermission(role, "news:read", "team")) {
if (!role) {
redirect("/login?next=/")
}
if (!hasPermission(role, "news:read", "team")) {
redirect("/unauthorized?required=news:read&scope=team")
}

View File

@@ -4,7 +4,7 @@ import { hasPermission } from "@cms/content/rbac"
import Link from "next/link"
import { redirect } from "next/navigation"
import { resolveRoleFromServerContext } from "@/lib/access"
import { resolveRoleFromServerContext } from "@/lib/access-server"
export const dynamic = "force-dynamic"
@@ -407,7 +407,11 @@ export default async function AdminTodoPage(props: {
}) {
const role = await resolveRoleFromServerContext()
if (!role || !hasPermission(role, "roadmap:read", "global")) {
if (!role) {
redirect("/login?next=/todo")
}
if (!hasPermission(role, "roadmap:read", "global")) {
redirect("/unauthorized?required=roadmap:read&scope=global")
}