Slightly better

package-lock.json

@@ -18,6 +18,7 @@
         "@types/axios": "^0.9.36",
         "@types/date-fns": "^2.5.3",
         "@types/http-status-codes": "^1.2.0",
+        "@types/js-cookie": "^3.0.6",
         "axios": "^1.12.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -25,6 +26,7 @@
         "date-fns": "^4.1.0",
         "emoji-picker-react": "^4.13.2",
         "http-status-codes": "^2.3.0",
+        "js-cookie": "^3.0.5",
         "lexical": "^0.34.0",
         "lucide-react": "^0.541.0",
         "next": "15.5.0",
@@ -1990,6 +1992,12 @@
         "http-status-codes": "*"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -2810,6 +2818,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/lexical": {
       "version": "0.34.0",
       "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.34.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "@types/axios": "^0.9.36",
     "@types/date-fns": "^2.5.3",
     "@types/http-status-codes": "^1.2.0",
+    "@types/js-cookie": "^3.0.6",
     "axios": "^1.12.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -28,6 +29,7 @@
     "date-fns": "^4.1.0",
     "emoji-picker-react": "^4.13.2",
     "http-status-codes": "^2.3.0",
+    "js-cookie": "^3.0.5",
     "lexical": "^0.34.0",
     "lucide-react": "^0.541.0",
     "next": "15.5.0",

src/app/api/user/route.ts

@@ -33,6 +33,28 @@ 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();
   

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,26 +4,32 @@ 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;
+
+    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;
 
-    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`);
+      const ws = new WebSocket(`ws://${ip}:7080`);
       wsRef.current = ws;
   
       ws.onopen = () => {
-          console.log("Connected to WebSocket:", id);
+        console.log("Connected to WebSocket:", ip);
         ws.send(JSON.stringify({
           version: '0.0.1',
           auth_token: server_auth,
@@ -50,16 +56,17 @@ export default function Server() {
       };
   
       ws.onclose = () => {
-          console.log("WebSocket closed:", id);
+        console.log("WebSocket closed:", ip);
       };
   
       // Cleanup on unmount or id change
       return () => {
         ws.close();
       };
-      });
+    }
-    })
+
-  }, [id]);
+    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);