adds data access, login flow, navigation menu.

And some more stuff. :)
2025-07-27 10:26:40 +02:00
parent 31c6fd3265
commit c3a7a2d204
5 changed files with 145 additions and 26 deletions
@@ -0,0 +1,83 @@
+"use client";
+import { useAuth } from "react-oidc-context";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Source_Sans_3, Nunito } from "next/font/google";
+
+const nunito = Nunito({
+  subsets: ["latin"],
+});
+
+export default function AuthStatus() {
+  const auth = useAuth();
+  const router = useRouter();
+  const [persistentAuthState, setPersistentAuthState] = useState<{
+    isAuthenticated: boolean;
+    user: any;
+    hasInitialized: boolean;
+  }>({
+    isAuthenticated: false,
+    user: null,
+    hasInitialized: false,
+  });
+
+  useEffect(() => {
+    // Only update persistent state when we have a definitive auth state
+    if (!auth.isLoading && !auth.error) {
+      setPersistentAuthState({
+        isAuthenticated: auth.isAuthenticated,
+        user: auth.user,
+        hasInitialized: true,
+      });
+    }
+  }, [auth.isLoading, auth.isAuthenticated, auth.user, auth.error]);
+
+  // Show loading only on first load, not on subsequent navigations
+  if (!persistentAuthState.hasInitialized && auth.isLoading) {
+    return (
+      <div
+        className={`${nunito.className} absolute top-4 right-4 rounded-lg bg-white/10 px-3 py-2 backdrop-blur-sm`}
+      >
+        <span className="text-sm">...</span>
+      </div>
+    );
+  }
+
+  const displayState = persistentAuthState.hasInitialized
+    ? persistentAuthState
+    : { isAuthenticated: auth.isAuthenticated, user: auth.user };
+
+  return (
+    <div
+      className={`${nunito.className} absolute top-4 right-4 flex items-center gap-2 rounded-lg border-4 border-black bg-white/10 px-3 py-2`}
+    >
+      {displayState.isAuthenticated ? (
+        <>
+          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+          <span className="text-sm font-medium">
+            {displayState.user?.profile.name || "Authenticated"}
+          </span>
+          <button
+            onClick={() => {
+              void auth.removeUser();
+              router.push("/");
+            }}
+            className="rounded bg-red-500/20 px-2 py-1 text-xs transition-colors hover:bg-red-500/30"
+          >
+            Uitloggen
+          </button>
+        </>
+      ) : (
+        <>
+          <div className="h-2 w-2 rounded-full bg-red-500"></div>
+          <button
+            onClick={() => void auth.signinRedirect()}
+            className="rounded bg-blue-500/20 px-2 py-1 text-xs transition-colors hover:bg-blue-500/30"
+          >
+            Inloggen
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { useAuth } from "react-oidc-context";
+import { Source_Sans_3, Nunito } from "next/font/google";
+const source = Source_Sans_3({
+  subsets: ["latin"],
+});
+const font = source.className;
+
+export default function NavigationBar() {
+  const auth = useAuth();
+  if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
+    return (
+      <nav className="absolute right-0 bottom-0 left-0 flex justify-center">
+        <div
+          className={`${font} flex flex-row items-center gap-6 rounded-tl-lg rounded-tr-lg border-4 border-b-0 border-black bg-sky-900 px-4 py-6 text-white`}
+        >
+          <Link href="/nominations">Nomineren</Link>
+          <Link href="/lobby">Start spel (test)</Link>
+          <Link href="/users">Users</Link>
+        </div>
+      </nav>
+    );
+  }
+}