fix(auth): Sitzungs-Cookie auch ueber http nutzbar, Anmeldung als Formular (#013)

Das Cookie erhielt im Produktionsbau immer Secure und wurde ueber http vom
Browser verworfen – nach der Anmeldung landete jeder Klick wieder auf der
Anmeldeseite. Massgeblich ist jetzt das Schema in APP_URL.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/app/(auth)/login/page.tsx

@@ -30,9 +30,7 @@ export default async function AnmeldeSeite({ searchParams }: { searchParams: Suc
           <div className="card-body">
             {fehler ? (
               <div className="alert alert-danger py-2" role="alert">
-                {fehler === "oidc"
-                  ? "Die Anmeldung über den Anbieter hat nicht geklappt."
-                  : "Anmeldung nicht möglich."}
+                {fehler === "oidc" ? "Die Anmeldung über den Anbieter hat nicht geklappt." : fehler}
               </div>
             ) : null}
 

src/app/(dashboard)/page.tsx

@@ -184,9 +184,7 @@ export default async function DashboardSeite() {
                 titel="Aufgaben"
                 rahmen="warning"
                 werkzeuge={
-                  <span className="badge pl-bg-warning">
-                    {aufgabenDaten.gesamt + ohneKunde.length}
-                  </span>
+                  <span className="badge pl-bg-warning">{aufgabenDaten.gesamt + ohneKunde.length}</span>
                 }
               >
                 <TodoList aufgaben={aufgaben} />

src/app/api/auth/anmelden/route.ts

@@ -0,0 +1,49 @@
+import { cookies, headers } from "next/headers";
+import { clientIp } from "@/lib/ratelimit";
+import { cookieOptionen, SITZUNGS_COOKIE, sitzungErzeugen } from "@/lib/sitzung";
+import { AnmeldeFehler, mitPasswortAnmelden } from "@/server/auth/benutzer";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * Anmeldung als gewöhnliches Formular. Bewusst kein Server-Action-Weg: So funktioniert die
+ * Anmeldung auch ohne JavaScript, und das Sitzungs-Cookie hängt an einer normalen Antwort.
+ */
+export async function POST(request: Request) {
+  const formular = await request.formData();
+  const email = formular.get("email")?.toString().trim() ?? "";
+  const passwort = formular.get("passwort")?.toString() ?? "";
+  const zielEingabe = formular.get("ziel")?.toString() || "/";
+  // Nur eigene Pfade zulassen, damit die Anmeldung nicht auf fremde Seiten führt.
+  const ziel = zielEingabe.startsWith("/") && !zielEingabe.startsWith("//") ? zielEingabe : "/";
+
+  function zurueckZurAnmeldung(meldung: string) {
+    const adresse = new URL("/login", request.url);
+    adresse.searchParams.set("fehler", meldung);
+    if (ziel !== "/") adresse.searchParams.set("ziel", ziel);
+    return Response.redirect(adresse, 303);
+  }
+
+  if (!email || !passwort) {
+    return zurueckZurAnmeldung("E-Mail-Adresse und Passwort eingeben.");
+  }
+
+  try {
+    const kopfzeilen = await headers();
+    const benutzer = await mitPasswortAnmelden(email, passwort, clientIp(kopfzeilen));
+
+    const token = await sitzungErzeugen({
+      benutzerId: benutzer.id,
+      email: benutzer.email,
+      name: benutzer.name,
+      herkunft: "passwort",
+    });
+    (await cookies()).set(SITZUNGS_COOKIE, token, cookieOptionen());
+
+    return Response.redirect(new URL(ziel, request.url), 303);
+  } catch (fehler) {
+    if (fehler instanceof AnmeldeFehler) return zurueckZurAnmeldung(fehler.message);
+    console.error("Anmeldung fehlgeschlagen:", fehler);
+    return zurueckZurAnmeldung("Anmeldung derzeit nicht möglich.");
+  }
+}

src/app/api/auth/oidc/start/route.ts

@@ -1,4 +1,5 @@
 import { cookies } from "next/headers";
+import { ueberHttps } from "@/lib/sitzung";
 import { anmeldungStarten, oidcEinstellungen } from "@/server/auth/oidc";
 
 export const dynamic = "force-dynamic";
@@ -18,7 +19,7 @@ export async function GET(request: Request) {
     const optionen = {
       httpOnly: true,
       sameSite: "lax" as const,
-      secure: process.env.NODE_ENV === "production",
+      secure: ueberHttps(),
       path: "/",
       maxAge: 600,
     };

src/components/auth/AnmeldeFormular.tsx

@@ -1,24 +1,12 @@
-"use client";
-
-import { useActionState } from "react";
-import { anmelden } from "@/server/actions/auth";
-import type { AktionsErgebnis } from "@/server/actions/kunden";
-
-const LEER: AktionsErgebnis = {};
-
+/**
+ * Anmeldeformular. Es sendet ganz gewöhnlich an eine Route – dadurch funktioniert die
+ * Anmeldung auch ohne JavaScript, und das Sitzungs-Cookie kommt mit einer normalen Antwort.
+ */
 export function AnmeldeFormular({ ziel }: { ziel: string }) {
-  const [ergebnis, aktion, laeuft] = useActionState(anmelden, LEER);
-
   return (
-    <form action={aktion}>
+    <form method="post" action="/api/auth/anmelden">
       <input type="hidden" name="ziel" value={ziel} />
 
-      {ergebnis.fehler ? (
-        <div className="alert alert-danger py-2" role="alert">
-          {ergebnis.fehler}
-        </div>
-      ) : null}
-
       <div className="mb-3">
         <label className="form-label" htmlFor="email">
           E-Mail-Adresse
@@ -47,8 +35,8 @@ export function AnmeldeFormular({ ziel }: { ziel: string }) {
         />
       </div>
 
-      <button type="submit" className="btn btn-primary w-100 pl-touch-target" disabled={laeuft}>
-        {laeuft ? "Meldet an …" : "Anmelden"}
+      <button type="submit" className="btn btn-primary w-100 pl-touch-target">
+        Anmelden
       </button>
     </form>
   );

src/lib/sitzung.ts

@@ -53,11 +53,22 @@ export async function sitzungLesen(token: string | undefined): Promise<Sitzung |
   }
 }
 
+/**
+ * `Secure` richtet sich nach der tatsächlichen Adresse, nicht nach NODE_ENV:
+ * Ein produktiv gebautes Dashboard, das über http:// läuft (etwa im LAN oder beim lokalen Prüfen),
+ * würde sonst ein Cookie setzen, das der Browser verwirft – die Anmeldung liefe dann ins Leere.
+ */
+export function ueberHttps(): boolean {
+  const adresse = process.env.APP_URL;
+  if (adresse) return adresse.startsWith("https://");
+  return process.env.NODE_ENV === "production";
+}
+
 export function cookieOptionen() {
   return {
     httpOnly: true,
     sameSite: "lax" as const,
-    secure: process.env.NODE_ENV === "production",
+    secure: ueberHttps(),
     path: "/",
     maxAge: SITZUNGSDAUER_STUNDEN * 3600,
   };

src/server/actions/auth.ts

@@ -1,47 +1,13 @@
 "use server";
 
-import { cookies, headers } from "next/headers";
+import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { cookieOptionen, SITZUNGS_COOKIE, sitzungErzeugen } from "@/lib/sitzung";
-import { clientIp } from "@/lib/ratelimit";
+import { SITZUNGS_COOKIE } from "@/lib/sitzung";
 import { protokolliere } from "@/server/audit";
-import { AnmeldeFehler, mitPasswortAnmelden } from "@/server/auth/benutzer";
-import type { AktionsErgebnis } from "./kunden";
-
-/** Anmeldung mit E-Mail und Passwort (Rückfallweg, wenn OIDC nicht erreichbar ist). */
-export async function anmelden(_vorher: AktionsErgebnis, formular: FormData): Promise<AktionsErgebnis> {
-  const email = formular.get("email")?.toString().trim() ?? "";
-  const passwort = formular.get("passwort")?.toString() ?? "";
-  const ziel = formular.get("ziel")?.toString() || "/";
-
-  if (!email || !passwort) {
-    return { fehler: "Bitte E-Mail-Adresse und Passwort eingeben." };
-  }
-
-  try {
-    const kopfzeilen = await headers();
-    const benutzer = await mitPasswortAnmelden(email, passwort, clientIp(kopfzeilen));
-
-    const token = await sitzungErzeugen({
-      benutzerId: benutzer.id,
-      email: benutzer.email,
-      name: benutzer.name,
-      herkunft: "passwort",
-    });
-
-    (await cookies()).set(SITZUNGS_COOKIE, token, cookieOptionen());
-  } catch (fehler) {
-    if (fehler instanceof AnmeldeFehler) return { fehler: fehler.message };
-    throw fehler;
-  }
-
-  // Nur eigene Pfade als Ziel zulassen, damit die Anmeldung nicht auf fremde Seiten führt.
-  redirect(ziel.startsWith("/") && !ziel.startsWith("//") ? ziel : "/");
-}
 
+/** Abmelden aus dem Benutzermenü. Die Anmeldung selbst läuft über /api/auth/anmelden. */
 export async function abmelden() {
-  const speicher = await cookies();
-  speicher.delete(SITZUNGS_COOKIE);
+  (await cookies()).delete(SITZUNGS_COOKIE);
   await protokolliere("abmeldung", "Benutzer", null, {});
   redirect("/login");
 }