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>
  );
 }
@@ -0,0 +1,23 @@
+import { UserManager } from "oidc-client-ts";
+import { AuthProviderProps } from "react-oidc-context";
+
+const ORIGIN_URI = globalThis?.window?.location.origin;
+const REDIRECT_URI = `${ORIGIN_URI}/auth/callback`;
+
+const userConfig: AuthProviderProps = {
+  authority: process.env.NEXT_PUBLIC_AUTHORITY!,
+  client_id: process.env.NEXT_PUBLIC_CLIENT_ID!,
+  client_secret: process.env.NEXT_PUBLIC_CLIENT_SECRET!,
+  redirect_uri: REDIRECT_URI,
+  response_type: "code",
+  includeIdTokenInSilentRenew: true,
+  automaticSilentRenew: false, //TODO: Dit moet dus denk ik wel gewoon aan?
+  scope: "openid profile email offline_access", //TODO: Iets met scopes.
+  accessTokenExpiringNotificationTimeInSeconds: 5 * 60,
+  loadUserInfo: true,
+  post_logout_redirect_uri: ORIGIN_URI,
+  response_mode: "query",
+};
+
+export const userManager = new UserManager(userConfig);
+export const oidcConfig = { ...userConfig, userManager };