Authentication?

Voor een gegeven definitie van...

frontend/src/app/page.tsx

@@ -1,9 +1,42 @@
+"use client";
+
 import Image from "next/image";
+import { Log } from "oidc-client-ts";
+import { useAuth } from "react-oidc-context";
+
+Log.setLogger(console);
 
 export default function Page() {
+  const auth = useAuth();
+
+  switch (auth.activeNavigator) {
+    case "signinSilent":
+      return <div>Signing you in...</div>;
+    case "signoutRedirect":
+      return <div>Signing you out...</div>;
+  }
+
+  if (auth.isLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
-    <div className="flex items-center justify-center h-full">
+    <main
+      className={`flex min-h-screen flex-col items-center justify-between p-24`}
+    >
+      {auth.error && <div>{auth.error.message}</div>}
+      {auth.isAuthenticated && (
+        <div>
+          <p>Hello {auth.user?.profile.name} </p>
+        </div>
+      )}
+      {auth.isAuthenticated && (
+        <button onClick={() => void auth.removeUser()}>Log out</button>
+      )}
+      {!auth.isAuthenticated && (
+        <button onClick={() => void auth.signinRedirect()}>Log in</button>
+      )}
       <Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" />
-    </div>
+    </main>
   );
 }