feat: implement Keycloak SSO integration with JIT provisioning and Next.js login button

client/src/components/auth/AuthModal.tsx

@@ -4,6 +4,7 @@ import { SessionContext } from "@/context/session";
 import { login, register, setGuestSession } from "@/lib/auth";
 import type { FormEvent } from "react";
 import { useContext, useEffect, useRef, useState } from "react";
+import { API_URL } from "@/config";
 
 import Guest from "./Guest";
 import Login from "./Login";
@@ -14,8 +15,20 @@ export default function AuthModal() {
   const [activeTab, setActiveTab] = useState<"guest" | "login" | "register">("guest");
   const [serverMessage, setServerMessage] = useState<string | null>(null);
   const [buttonLoading, setButtonLoading] = useState(false);
+  const [ssoEnabled, setSsoEnabled] = useState(false);
   const modalToggleRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    fetch(`${API_URL}/v1/auth/sso/config`, { credentials: "include" })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data && data.enabled) {
+          setSsoEnabled(true);
+        }
+      })
+      .catch((err) => console.error("Error loading SSO config:", err));
+  }, []);
+
   function closeModal() {
     if (modalToggleRef.current?.checked) {
       modalToggleRef.current.checked = false;
@@ -151,6 +164,30 @@ export default function AuthModal() {
                 {activeTab === "register" && "Register"}
               </button>
             </div>
+
+            {activeTab !== "guest" && ssoEnabled && (
+              <>
+                <div className="divider opacity-70">oder</div>
+                <a
+                  href={`${API_URL}/v1/auth/sso/login`}
+                  className="btn btn-accent btn-outline w-full gap-2"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    className="h-5 w-5"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  Login mit Keycloak
+                </a>
+              </>
+            )}
           </form>
         </label>
       </label>