Iteration 1: Auth (lokale Accounts), RBAC, RLS-Policies, i18n

- Auth.js v5 mit Credentials-Provider: Argon2id-Verifikation, JWT-Session mit Mandanten-Kontext, Rollen und Permissions; Login-/Logout-Flow (deutsch) - RBAC-Katalog (28 Permissions, 5 Rollen-Blueprints) mit serverseitigem requirePermission; Seed legt Demo-Mandant und 4 Demo-Nutzer an - Route-Gate über Next-16-proxy.ts (UX-Ebene), autoritative Prüfung serverseitig via requireSession/requirePermission - Prisma-Migrationen: init + Row-Level-Security-Policies (zweite Verteidigungslinie, Scharfschaltung in Härtungs-Iteration dokumentiert) - i18n-Gerüst mit next-intl (de aktiv, en vorbereitet), Audit-Log-Helper - Login/Logout end-to-end im Browser verifiziert; Build/Lint/Typecheck grün Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 12:09:54 +02:00
parent 87e933b3c0
commit 880afed391
24 changed files with 1992 additions and 84 deletions
@@ -0,0 +1,3 @@
+import { handlers } from "@/server/auth";
+
+export const { GET, POST } = handlers;
@@ -0,0 +1,43 @@
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { auth, signOut } from "@/server/auth";
+
+export default async function DashboardPage() {
+  const session = await auth();
+  if (!session?.user) redirect("/login");
+
+  const t = await getTranslations("dashboard");
+  const tc = await getTranslations("common");
+
+  async function logout() {
+    "use server";
+    await signOut({ redirectTo: "/login" });
+  }
+
+  return (
+    <main className="mx-auto w-full max-w-5xl flex-1 p-6">
+      <header className="flex items-center justify-between border-b border-slate-200 pb-4">
+        <h1 className="text-xl font-semibold">{t("title")}</h1>
+        <form action={logout}>
+          <button
+            type="submit"
+            className="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-100"
+          >
+            {tc("logout")}
+          </button>
+        </form>
+      </header>
+
+      <section className="mt-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <p className="text-lg">{t("welcome", { name: session.user.name ?? "" })}</p>
+        <dl className="mt-4 grid grid-cols-2 gap-2 text-sm">
+          <dt className="text-slate-500">{t("tenant")}</dt>
+          <dd>{session.user.tenantSlug}</dd>
+          <dt className="text-slate-500">{t("roles")}</dt>
+          <dd>{session.user.roles.join(", ")}</dd>
+        </dl>
+        <p className="mt-6 text-sm text-slate-400">{t("placeholder")}</p>
+      </section>
+    </main>
+  );
+}
@@ -1,8 +1,10 @@
@import "tailwindcss";

+/* Helles Basis-Theme; Dark-Mode folgt kontrolliert mit dem shadcn/ui-Theming
+   (kein automatisches prefers-color-scheme, damit Komponenten konsistent bleiben). */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #f8fafc;
+  --foreground: #0f172a;
 }

@theme inline {
@@ -12,15 +14,8 @@
  --font-mono: var(--font-geist-mono);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
  background: var(--background);
  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
 }
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { NextIntlClientProvider } from "next-intl";
+import { getLocale } from "next-intl/server";
 import "./globals.css";

 const geistSans = Geist({
@@ -13,21 +15,26 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "ISMS-Tool",
+  description:
+    "Informationssicherheits-Managementsystem für ISO/IEC 27001:2022 und TISAX/VDA-ISA",
 };

-export default function RootLayout({
+export default async function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
+  const locale = await getLocale();
+
  return (
    <html
-      lang="en"
+      lang={locale}
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col bg-slate-50 text-slate-900">
+        <NextIntlClientProvider>{children}</NextIntlClientProvider>
+      </body>
    </html>
  );
 }
@@ -0,0 +1,104 @@
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { AuthError } from "next-auth";
+import { auth, signIn } from "@/server/auth";
+
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string; callbackUrl?: string }>;
+}) {
+  const t = await getTranslations("login");
+  const tc = await getTranslations("common");
+  const { error, callbackUrl } = await searchParams;
+
+  // Already signed in → straight to the app
+  const session = await auth();
+  if (session?.user) redirect("/dashboard");
+
+  async function login(formData: FormData) {
+    "use server";
+    const target = (formData.get("callbackUrl") as string) || "/dashboard";
+    try {
+      await signIn("credentials", {
+        email: formData.get("email"),
+        password: formData.get("password"),
+        tenant: formData.get("tenant"),
+        redirectTo: target,
+      });
+    } catch (err) {
+      if (err instanceof AuthError) {
+        redirect(`/login?error=1${target !== "/dashboard" ? `&callbackUrl=${encodeURIComponent(target)}` : ""}`);
+      }
+      throw err; // NEXT_REDIRECT from a successful signIn must propagate
+    }
+  }
+
+  return (
+    <main className="flex flex-1 items-center justify-center p-6">
+      <div className="w-full max-w-sm rounded-xl border border-slate-200 bg-white p-8 shadow-sm">
+        <h1 className="text-xl font-semibold">{tc("appName")}</h1>
+        <h2 className="mt-1 text-sm text-slate-500">{t("subtitle")}</h2>
+
+        {error && (
+          <p
+            role="alert"
+            className="mt-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700"
+          >
+            {t("error")}
+          </p>
+        )}
+
+        <form action={login} className="mt-6 space-y-4">
+          <input type="hidden" name="callbackUrl" value={callbackUrl ?? ""} />
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium">
+              {t("email")}
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              autoComplete="email"
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+          </div>
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium">
+              {t("password")}
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              autoComplete="current-password"
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+          </div>
+          <div>
+            <label htmlFor="tenant" className="block text-sm font-medium">
+              {t("tenant")}
+            </label>
+            <input
+              id="tenant"
+              name="tenant"
+              type="text"
+              autoComplete="organization"
+              title={t("tenantHint")}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+            <p className="mt-1 text-xs text-slate-400">{t("tenantHint")}</p>
+          </div>
+          <button
+            type="submit"
+            className="w-full rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          >
+            {t("submit")}
+          </button>
+        </form>
+      </div>
+    </main>
+  );
+}
@@ -1,65 +1,5 @@
-import Image from "next/image";
+import { redirect } from "next/navigation";

 export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
+  redirect("/dashboard");
 }