Merge pull request #18 from kleo-dev/auth-ui-patch

Auth UI patch

src/app/api/auth/route.ts

@@ -1,12 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { StatusCodes } from "http-status-codes";
 import { supabase } from "../supa";
-
-const SERVER_AUTH_TOKENS = new Map<
-  string,
-  { user_id: string; server_id: string }
->();
-
 /**
  * GET /api/auth?token=<relayToken>?key=<serverKey>
  * Called by a (DM node / Server) to verify a temporary relay token.
@@ -16,31 +10,36 @@ export async function GET(req: NextRequest) {
   const token = url.searchParams.get("token");
   const key = url.searchParams.get("key");
 
-  if (!token || !key) {
+  if (!token || !key)
     return NextResponse.json(
       { message: "There should be a token and a key parameter" },
       { status: StatusCodes.BAD_REQUEST }
     );
-  }
 
   const { data: server } = await supabase
     .from("servers")
     .select("id, created_at, owner, address")
     .eq("key", key)
     .maybeSingle();
+
   if (!server)
     return NextResponse.json(
       { message: "Key unauthorized" },
       { status: StatusCodes.UNAUTHORIZED }
     );
 
-  const auth = SERVER_AUTH_TOKENS.get(token);
-  if (!auth) {
+  const { data: auth } = await supabase
+    .from("server_auth")
+    .delete()
+    .eq("key", token)
+    .select()
+    .maybeSingle();
+
+  if (!auth)
     return NextResponse.json(
       { message: "Invalid or expired token" },
       { status: StatusCodes.NOT_FOUND }
     );
-  }
 
   if (auth.server_id !== server.id)
     return NextResponse.json(
@@ -48,8 +47,6 @@ export async function GET(req: NextRequest) {
       { status: StatusCodes.UNAUTHORIZED }
     );
 
-  SERVER_AUTH_TOKENS.delete(token);
-
   return NextResponse.json({ message: "ok", ...auth });
 }
 
@@ -76,12 +73,10 @@ export async function POST(req: NextRequest) {
       { status: StatusCodes.BAD_REQUEST }
     );
 
-  const supabaseToken = authHeader.value;
-
   const {
     data: { user },
     error,
-  } = await supabase.auth.getUser(supabaseToken);
+  } = await supabase.auth.getUser(authHeader.value);
 
   if (error || !user) {
     return NextResponse.json(
@@ -90,12 +85,20 @@ export async function POST(req: NextRequest) {
     );
   }
 
-  const relayToken = crypto.randomUUID();
-
-  SERVER_AUTH_TOKENS.set(relayToken, {
+  const { data: relayToken, error: errorRelay } = await supabase
+    .from("server_auth")
+    .insert({
       user_id: user.id,
       server_id,
-  });
+    })
+    .select()
+    .maybeSingle();
 
-  return NextResponse.json({ message: "ok", token: relayToken });
+  if (!relayToken || errorRelay)
+    return NextResponse.json(
+      { message: "Failed to create relay token" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+
+  return NextResponse.json({ message: "ok", token: relayToken.key });
 }

src/app/api/profile/route.ts

@@ -84,14 +84,26 @@ export async function GET(req: NextRequest) {
   if (!user_id)
     return NextResponse.json(
       { message: "Invalid token" },
-      { status: StatusCodes.NOT_FOUND }
+      { status: StatusCodes.BAD_REQUEST }
     );
 
-  const { data: profile } = await supabase
+  const { data: profile, error } = await supabase
     .from("profiles")
     .select("id, username, display_name, avatar_url, node_address")
     .eq("id", user_id)
     .maybeSingle();
 
+  if (error)
+    return NextResponse.json(
+      { message: error.message },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+
+  if (!profile)
+    return NextResponse.json(
+      { message: "Profile not found" },
+      { status: StatusCodes.NOT_FOUND }
+    );
+
   return NextResponse.json({ message: "ok", ...profile });
 }

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

@@ -9,9 +9,6 @@ import { StringMap } from "@/types/typeUtils";
 import { useParams } from "next/navigation";
 import { useMessages } from "@/hooks/use-messages";
 
-// In this testing instance we are assuming that the target's node is localhost
-// To make this functional we need to add a settings feature to the api
-
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
   const wsRef = useRef<WebSocket | null>(null);
@@ -19,9 +16,12 @@ export default function DMs() {
   const addMessage = useMessages((s) => s.addMessage);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const [user, setUser] = useState<UserProfile | undefined>();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       addMessage={addMessage}
       wsRef={wsRef}
       userList={userList}
@@ -31,6 +31,7 @@ export default function DMs() {
       messages={messages}
     >
       <MessageBox
+        toggleSidebar={() => setSidebarOpen(true)}
         channelName={userList[id]?.display_name || id}
         userList={userList}
         setUserList={setUserList}

src/app/chat/page.tsx

@@ -14,9 +14,12 @@ export default function Chat() {
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const messages = useMessages((s) => s.messages);
   const addMessage = useMessages((s) => s.addMessage);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       wsRef={wsRef}
       userList={userList}
       setUserList={setUserList}

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

@@ -18,6 +18,7 @@ export default function Server() {
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const messages = useMessages((s) => s.messages);
   const addMessage = useMessages((s) => s.addMessage);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   useEffect(() => {
     if (!ip) return;
@@ -26,6 +27,8 @@ export default function Server() {
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       wsRef={wsNodeRef}
       addMessage={() => {}}
       userList={userList}
@@ -33,6 +36,7 @@ export default function Server() {
       server={server}
     >
       <MessageBox
+        toggleSidebar={() => setSidebarOpen(true)}
         channelName="General"
         userList={userList}
         setUserList={setUserList}

src/components/MessageBox.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
-import { SmilePlusIcon } from "lucide-react";
+import { ChevronLeft, ChevronLeftIcon, SmilePlusIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
@@ -38,7 +38,7 @@ function MessageContainer({
           [message.from]: res.data as UserProfile,
         }))
       )
-      .catch(console.error);
+      .catch(() => {});
   }, [message.from, setUserList]);
 
   return (
@@ -144,23 +144,28 @@ export default function MessageBox({
   setUserList,
   sendMessage,
   channelName,
+  toggleSidebar,
 }: {
   messages: Message[];
   userList: NumberMap<UserProfile>;
   setUserList: React.Dispatch<React.SetStateAction<NumberMap<UserProfile>>>;
   sendMessage: (m: string) => void;
   channelName?: string;
+  toggleSidebar: () => void;
 }) {
   const [text, setText] = useState("");
 
   return (
-    <div className="h-screen w-full flex flex-col pb-5 pl-5 gap-5">
+    <div className="h-full w-full flex flex-col pb-5 pl-5 gap-5">
       {channelName && (
         <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
+          <span onClick={toggleSidebar} className="cursor-pointer flex">
+            <ChevronLeftIcon className="w-5 h-5" />
             {channelName}
+          </span>
         </header>
       )}
-      <div className="w-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
+      <div className="w-full h-max flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
         {messages.map((msg) => (
           <MessageContainer
             key={msg.id}
@@ -170,7 +175,7 @@ export default function MessageBox({
           />
         ))}
       </div>
-      <div className="w-full flex gap-3 pr-5">
+      <footer className="w-full flex gap-3 pr-5 mt-auto">
         <Input
           className=""
           placeholder="Type a message..."
@@ -197,7 +202,7 @@ export default function MessageBox({
             />
           </DropdownMenuContent>
         </DropdownMenu>
-      </div>
+      </footer>
     </div>
   );
 }

src/components/Sidebar.tsx

@@ -35,6 +35,7 @@ import SettingsDialog from "./settings/SettingsDialog";
 import Link from "next/link";
 import axios from "axios";
 import { get, Response } from "@/lib/request";
+import { cn } from "@/lib/utils";
 
 export default function AppSidebar({
   children,
@@ -45,6 +46,8 @@ export default function AppSidebar({
   server,
   messages,
   addMessage,
+  open,
+  setOpen,
 }: Readonly<{
   wsRef: React.RefObject<WebSocket | null>;
   addMessage: (msg: Message) => void;
@@ -56,6 +59,8 @@ export default function AppSidebar({
   children?: React.ReactNode;
   setUser?: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
   server?: Server | undefined;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
   const [newServer, setNewServer] = useState({ name: "", ip: "" });
@@ -64,7 +69,11 @@ export default function AppSidebar({
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
 
   const dms = Array.from(
-    new Set(messages?.flatMap((item) => [item.from, item.channel_id]) || [])
+    new Set(
+      messages
+        ?.flatMap((item) => [item.from, item.channel_id])
+        .filter((item) => item !== user?.id) || []
+    )
   );
 
   useEffect(() => {
@@ -90,6 +99,7 @@ export default function AppSidebar({
                 label: "View",
                 onClick: () => router.push(`/chat/${m.from}`),
               },
+              position: "top-right",
             }
           );
 
@@ -118,8 +128,13 @@ export default function AppSidebar({
   };
 
   return (
-    <div className="flex h-screen">
-      <div className="h-screen flex border-r">
+    <div className="flex h-svh md:h-screen">
+      <div
+        className={cn(
+          "border-r transition-all duration-300 ease-in-out overflow-hidden flex",
+          open ? "w-5xl md:w-md" : "w-0 md:w-md"
+        )}
+      >
         <div className="w-16 flex flex-col items-center gap-4 py-4 bg-muted border-r">
           <Button
             onClick={() => router.push(`/chat`)}
@@ -208,7 +223,7 @@ export default function AppSidebar({
         </div>
 
         {/* Right column */}
-        <div className="w-64 flex flex-col bg-card">
+        <div className="w-full flex flex-col bg-card">
           {server ? (
             <div className="p-3 border-b flex items-center gap-2">
               <h2>{server.name}</h2>
@@ -261,9 +276,19 @@ export default function AppSidebar({
           </footer>
         </div>
       </div>
-
+      {open ? (
+        <div
+          className="w-screen h-full overflow-x-hidden"
+          onClick={() => setOpen(false)}
+        >
+          <div className="overflow-x-hidden w-screen min-w-max flex-shrink-0">
             {children}
           </div>
+        </div>
+      ) : (
+        children
+      )}
+    </div>
   );
 }
 
@@ -280,12 +305,10 @@ function DMItem({
   status: string;
   settings?: boolean;
 }) {
-  const router = useRouter();
-
   return (
     <Link
-      href={`/chat/${id}`}
-      className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent"
+      href={settings ? "" : `/chat/${id}`}
+      className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent rounded-md"
     >
       <ProfilePicture name={name} url={avatar} />
       <div className="flex flex-col">
@@ -338,7 +361,5 @@ function getUser(
 
   get(`/api/profile/?id=${id}`, onResponse)
     ?.then(onResponse)
-    .catch((e) => {
-      console.error(e);
-    });
+    .catch((e) => {});
 }

src/hooks/get-user.ts

@@ -5,6 +5,7 @@ import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { get } from "@/lib/request";
+import { toast } from "sonner";
 
 export interface UserProfile extends ProfileSettings {
   id: string;
@@ -24,8 +25,9 @@ export default function useUser() {
 
       try {
         setUser((await get("/api/profile")).data);
-      } catch {
+      } catch (e: any) {
         router.push("/login");
+        toast.error(`Error: ${e}`);
       }
     }
 

src/hooks/use-settings.ts

@@ -2,6 +2,7 @@
 
 import { defaultSettings, getClientSettings } from "@/lib/clientSettings";
 import { ProfileSettings, ClientSettings } from "@/types/settings";
+import axios from "axios";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 export function useClientSettings(): [
@@ -31,11 +32,8 @@ export function useProfileSettings(): [
   useEffect(() => {
     async function fetchProfileSettings() {
       try {
-        const res = await fetch("/api/profile");
-        if (res.ok) {
-          const data = (await res.json()) as ProfileSettings;
-          setSettings(data);
-        }
+        const res = await axios.get("/api/profile");
+        setSettings(res.data as ProfileSettings);
       } catch (error) {
         console.error("Failed to fetch profile settings:", error);
       }

src/lib/auth.ts

@@ -26,13 +26,6 @@ export default async function auth(
 
   ws.onopen = () => {
     console.log("Connected to WebSocket:", ip);
-    ws.send(
-      JSON.stringify({
-        version: "0.0.1",
-        auth_token: server_auth,
-        last_message: lastMessage || 0,
-      })
-    );
   };
 
   ws.onmessage = (m) => {
@@ -41,6 +34,13 @@ export default async function auth(
 
     if (data.version) {
       setServer({ channels: [], ...data });
+      ws.send(
+        JSON.stringify({
+          version: "0.0.1",
+          auth_token: server_auth,
+          last_message: lastMessage || 0,
+        })
+      );
       return;
     }