setup frontend for admin panel

.env.local.template

@@ -0,0 +1,6 @@
+NEXTAUTH_URL=http://localhost:3000/
+NEXTAUTH_SECRET=#use [openssl rand -hex 32] to generate a 32 bytes value
+
+AUTH0_CLIENT_ID=#client id
+AUTH0_CLIENT_SECRET=#client secret
+AUTH0_ISSUER=#issuer base url, example: example.us.auth0.com

app/admin/page.tsx

@@ -1,9 +1,37 @@
+'use client';
+import { Button } from '@mui/material';
+import { useSession, signIn } from 'next-auth/react';
+
 const AdminPage = () => {
-  return (
-    <div className="flex flex-col px-5 min-h-screen">
-      <h1>Admin Page</h1>
-    </div>
-  );
+  const { data: session } = useSession();
+
+  const handleLogin = () => signIn('auth0');
+
+  if (!session) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <div className="flex flex-col items-center justify-center px-6">
+          <h1 className="text-3xl">Vennligst logg inn</h1>
+          <Button
+            variant="contained"
+            color="primary"
+            title="Logg inn"
+            onClick={() => handleLogin()}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (session?.user?.role !== 'admin') {
+    return (
+      <div className="flex flex-col px-6">
+        <div className="flex items-center justify-center">
+          <h1 className="text-3xl">Du har ikke tilgang til denne siden</h1>
+        </div>
+      </div>
+    );
+  }
 };
 
 export default AdminPage;

app/api/auth/[...nextauth]/route.ts

@@ -92,4 +92,4 @@ export const authOptions: NextAuthOptions = {
   },
 };
 
-export default NextAuth(authOptions);
+export const POST = NextAuth(authOptions);