Updated auth to use generated keys

ui/src/app/admin/page.tsx

@@ -14,6 +14,7 @@ import {
   stopTrack
 } from '@/api/guilds';
 import { GuildChannel, GuildInfo } from '@/api/guilds.types';
+import Auth from '@/components/Auth';
 import { userState } from '@/state/auth';
 import { Button, Card, Grid, Select, Slider, Tabs, TextInput, Textarea } from '@mantine/core';
 import { useForm } from '@mantine/form';
@@ -21,7 +22,7 @@ import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
-export default function Page() {
+function Page() {
   const user = useRecoilValue(userState);
   const [guilds, setGuilds] = useState<GuildInfo[]>([]);
   const [activeGuild, setActiveGuild] = useState<GuildInfo | null>(null);
@@ -68,6 +69,8 @@ export default function Page() {
   );
 }
 
+export default Auth(Page);
+
 function TextChannelCard({ guild }: { guild: GuildInfo | null }) {
   const [textChannels, setTextChannels] = useState<GuildChannel[]>([]);
   const [activeChannel, setActiveChannel] = useState<GuildChannel | null>(null);

ui/src/app/campaigns/page.tsx

@@ -3,15 +3,8 @@
 import { ActionIcon, Tooltip } from '@mantine/core';
 import { FaPlus } from "react-icons/fa";
 import React, { useEffect } from 'react';
-import { getCampigns } from '@/api/campaigns';
-import { Campaign } from '@/api/campaigns.types';
 
 export default function Page() {
-  const [campaigns, setCampaigns] = React.useState<Campaign[]>([]);
-
-  useEffect(() => {
-    getCampigns().then((data) => setCampaigns(data));
-  }, []);
 
   return (
     <div>
@@ -21,9 +14,6 @@ export default function Page() {
           <FaPlus />
         </ActionIcon>
       </Tooltip>
-        {campaigns && campaigns.map((campaign) => (
-          <div key={campaign.id}>{campaign.name}</div>
-        ))}
     </div>
   );
 }

ui/src/app/layout.tsx

@@ -8,7 +8,6 @@ import { Notifications } from '@mantine/notifications';
 import 'styles/globals.css';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
-import Loading from '@/components/Loading';
 
 export const metadata = {
   title: 'Siren',
@@ -28,10 +27,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <MantineProvider>
             <Notifications />
             <ModalsProvider>
-              <Loading>
-                <Header />
-                <Box>{children}</Box>
-              </Loading>
+              <Header />
+              <Box>{children}</Box>
             </ModalsProvider>
           </MantineProvider>
         </RecoilRootWrapper>

ui/src/app/page.tsx

@@ -4,18 +4,18 @@ import React from 'react';
 // Home page for siren
 export default function Page() {
   return (
-    // <div>
-    //   <p>Siren is a Dungeon Master's best friend.</p>
-    //   <h2>Features:</h2>
-    //   <ul>
-    //     <li>Manage your campaign and players</li>
-    //     <li>Create battlemaps on the fly and track initiative</li>
-    //     <li>Connect the Discord Bot to play online with friends</li>
-    //     <li>Reference Races, Classes, Items, Spells, and more</li>
-    //   </ul>
-    // </div>
-    <div style={{ overflow: 'hidden' }}>
-      <TileGrid />
+    <div>
+      <p>Siren is a Dungeon Master's best friend.</p>
+      <h2>Features:</h2>
+      <ul>
+        <li>Manage your campaign and players</li>
+        <li>Create battlemaps on the fly and track initiative</li>
+        <li>Connect the Discord Bot to play online with friends</li>
+        <li>Reference Races, Classes, Items, Spells, and more</li>
+      </ul>
     </div>
+    // <div style={{ overflow: 'hidden' }}>
+    //   <TileGrid />
+    // </div>
   );
 }

ui/src/components/Auth.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { hasUserState, isAdminState } from "@/state/auth";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useRecoilValue } from "recoil";
+
+export default function Auth(Component: any, adminOnly = false) {
+  return function AuthWrapper(props: any) {
+    const router = useRouter();
+    const hasUser = useRecoilValue(hasUserState);
+    const isAdmin = useRecoilValue(isAdminState);
+
+    function isAuthenticated() {
+      console.log('hasUser', hasUser, 'adminOnly', adminOnly, 'isAdmin', isAdmin)
+      return hasUser && (adminOnly ? isAdmin : true);
+    }
+
+    useEffect(() => {
+      console.log('isAuthenticated', isAuthenticated());
+      if (!isAuthenticated) {
+        router.push('/');
+      }
+    }, []);
+
+    if (!isAuthenticated) {
+      return null;
+    }
+
+    return <Component {...props} />;
+  }
+}

ui/src/components/Header/index.tsx

@@ -199,7 +199,8 @@ export default function Header() {
         type={modalType}
         toggle={toggle}
         setUser={(u) => {
-          setUser(u);
+          console.log(u);
+          setUser(u);          
           updateUser(u);
         }}
         setRefreshId={setRefreshId}

ui/src/middleware.ts

@@ -0,0 +1,6 @@
+'use client';
+
+import { NextRequest } from "next/server";
+
+export default function middleware(request: NextRequest) {
+}

ui/src/state/auth.ts

@@ -1,7 +1,24 @@
 import { User } from '@/api/auth.types';
-import { atom } from 'recoil';
+import { atom, selector } from 'recoil';
 
 export const userState = atom({
   key: 'userState',
   default: undefined as User | undefined
 });
+
+export const hasUserState = selector({
+  key: 'hasUserState',
+  get: ({ get }) => {
+    const user = get(userState);
+    return user !== undefined;
+  }
+});
+
+export const isAdminState = selector({
+  key: 'isAdminState',
+  get: ({ get }) => {
+    const user = get(userState);
+    return user?.role === 'admin';
+  }
+});
+