Authentication?

Voor een gegeven definitie van...
2025-06-25 16:38:22 +02:00
parent e7ca11d1bc
commit bfa1c7879b
7 changed files with 128 additions and 20 deletions
@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect } from "react";
+import { userManager } from "muzak/config/auth";
+import { useRouter } from "next/navigation";
+
+export default function SignInCallback() {
+  const router = useRouter();
+
+  useEffect(() => {
+    userManager.signinCallback();
+    router.push("/");
+  }, []);
+
+  return <></>;
+}
@@ -1,6 +1,8 @@
 "use client";
 import "./style.css";
 import { useState } from "react";
+import { AuthProvider } from "react-oidc-context";
+import { oidcConfig, userManager } from "muzak/config/auth";

 export default function RootLayout({
  children,
@@ -16,7 +18,7 @@ export default function RootLayout({
  return (
    <html lang="en">
      <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
-        {children}
+        <AuthProvider {...oidcConfig}>{children}</AuthProvider>
        <button
          className={`absolute top-1 left-1  ${isAnimate ? "pause" : "play"}`}
          onClick={toggleAnimation}
@@ -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>
  );
 }