Slightly better

src/app/api/user/route.ts

@@ -33,14 +33,36 @@ export async function POST(req: NextRequest) {
   return NextResponse.json({ message: "ok", token, user_id: result.rows[0].id });
 }
 
+export async function GET(req: NextRequest) {
+  const url = new URL(req.url);
+  let query_id = url.searchParams.get("id");
+  const token = url.searchParams.get("token");
+
+  if (!query_id && !token)
+    return NextResponse.json({ message: "Query arg should be token or id" }, { status: StatusCodes.BAD_REQUEST });
+  else {
+    const id = query_id ? query_id : token ? CLIENT_AUTH_TOKENS[token] : null;
+
+    if (!id)
+      return NextResponse.json({ message: "Invalid token" }, { status: StatusCodes.NOT_FOUND });
+
+    const user = await pool.query(
+      "SELECT id, username, email FROM users WHERE id = $1;",
+      [id]
+    );
+
+    return NextResponse.json({ message: "ok", ...user.rows[0] });
+  }
+}
+
 export async function DELETE(req: NextRequest) {
   let { username } = await req.json();
-
+  
   await pool.query(
     "DELETE FROM users WHERE username = $1;",
     [username]
   );
-
+  
   return NextResponse.json({ message: "ok" });
 }
 

src/app/login/page.tsx

@@ -0,0 +1,7 @@
+import { Input } from "@/components/ui/input";
+
+export default function Login() {
+    return <div>
+        <Input />
+    </div>
+}

src/app/server/[id]/page.tsx

@@ -4,62 +4,69 @@ import { useEffect, useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
-import { getUser } from '@/test/user';
-import { auth } from '@/test/auth';
 import Message from "@/types/message";
+import getUser from "@/hooks/get-user";
+import Cookies from "js-cookie";
+import axios from "axios";
 
 export default function Server() {
-  const { id } = useParams<{ id: string }>();
+  const { id: ip } = useParams<{ id: string }>();
   const wsRef = useRef<WebSocket | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
+  const user = getUser();
 
   useEffect(() => {
-    if (!id) return;
+    if (!ip || !user) return;
 
-    getUser().then(session_token => {
-      auth(session_token, id === 'localhost' ? '127.0.0.1' : id).then(server_auth => {
-        // Open the WebSocket connection
-        const ws = new WebSocket(`ws://${id}:7080`);
-        wsRef.current = ws;
-    
-        ws.onopen = () => {
-          console.log("Connected to WebSocket:", id);
-          ws.send(JSON.stringify({
-            version: '0.0.1',
-            auth_token: server_auth,
-            last_message: 0
-          }))
-        };
-    
-        ws.onmessage = (m) => {
-          const data = JSON.parse(m.data);
-          console.log("Message received:", data);
+    async function auth() {
+      const server_auth = ((await axios.post('http://localhost:3000/api/auth', {
+          server_ip: ip === 'localhost' ? '127.0.0.1' : ip,
+          session_token: Cookies.get('token'),
+      })).data as any).token;
 
-          switch (data.type) {
-            case 'authenticated':
-              setMessages(data.params.messages);
-            
-            case 'message_create':
-              // setMessages([...messages, data.params]);
-              setMessages((prev) => [...prev, data.params]);
-          }
-        };
-    
-        ws.onerror = (err) => {
-          console.error("WebSocket error:", err);
-        };
-    
-        ws.onclose = () => {
-          console.log("WebSocket closed:", id);
-        };
-    
-        // Cleanup on unmount or id change
-        return () => {
-          ws.close();
-        };
-      });
-    })
-  }, [id]);
+      // Open the WebSocket connection
+      const ws = new WebSocket(`ws://${ip}:7080`);
+      wsRef.current = ws;
+  
+      ws.onopen = () => {
+        console.log("Connected to WebSocket:", ip);
+        ws.send(JSON.stringify({
+          version: '0.0.1',
+          auth_token: server_auth,
+          last_message: 0
+        }))
+      };
+  
+      ws.onmessage = (m) => {
+        const data = JSON.parse(m.data);
+        console.log("Message received:", data);
+
+        switch (data.type) {
+          case 'authenticated':
+            setMessages(data.params.messages);
+          
+          case 'message_create':
+            // setMessages([...messages, data.params]);
+            setMessages((prev) => [...prev, data.params]);
+        }
+      };
+  
+      ws.onerror = (err) => {
+        console.error("WebSocket error:", err);
+      };
+  
+      ws.onclose = () => {
+        console.log("WebSocket closed:", ip);
+      };
+  
+      // Cleanup on unmount or id change
+      return () => {
+        ws.close();
+      };
+    }
+
+    auth();
+  }, [ip]);
 
   return (
     <AppSidebar

src/hooks/get-user.ts

@@ -0,0 +1,34 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+import { redirect } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export interface User {
+    id: number;
+    username: string;
+    email: string;
+}
+
+export default function getUser() {
+    const [user, setUser] = useState<undefined | User>();
+    
+    useEffect(() => {
+        async function fetchUser() {
+            const token = Cookies.get("token");
+
+            if (!token) {
+                redirect('/login')
+            }
+
+            const res = (await axios.get('http://localhost:3000/api/user', {
+                params: { token }
+            })).data as User;
+
+            setUser(res);
+        }
+    
+        fetchUser();
+    });
+
+    return user;
+}

src/lib/api-wrapper/auth.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+export async function auth(session_token: string, server_ip: string) {
+    const res = (await axios.post('http://localhost:3000/api/auth', {
+        server_ip,
+        session_token,
+    })).data;
+
+    return (res as any).token;
+}

src/test/auth.js

@@ -1,19 +0,0 @@
-import axios from "axios";
-import { getUser } from "./user.js";
-
-export async function auth(session_token, server_ip) {
-    const res = (await axios.post('http://localhost:3000/api/auth', {
-        server_ip,
-        session_token,
-    })).data;
-
-    return res.token;
-}
-
-// const session_token = await getUser();
-
-// const token = await auth(session_token);
-
-// const output = (await axios.get('http://localhost:3000/api/auth?intents=server&token='+token)).data;
-
-// console.log(output);