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

Auth UI patch
2025-10-15 18:46:39 +02:00
parent 8b562a37b2 e3324f07f6
commit 68ec582d3b
10 changed files with 109 additions and 60 deletions
@@ -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();
+  const { data: relayToken, error: errorRelay } = await supabase
+    .from("server_auth")
+    .insert({
+      user_id: user.id,
+      server_id,
+    })
+    .select()
+    .maybeSingle();

-  SERVER_AUTH_TOKENS.set(relayToken, {
-    user_id: user.id,
-    server_id,
-  });
+  if (!relayToken || errorRelay)
+    return NextResponse.json(
+      { message: "Failed to create relay token" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );

-  return NextResponse.json({ message: "ok", token: relayToken });
+  return NextResponse.json({ message: "ok", token: relayToken.key });
 }
@@ -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 });
 }
@@ -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}
@@ -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}
@@ -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}
@@ -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">
-          {channelName}
+          <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>
  );
 }
@@ -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,8 +276,18 @@ export default function AppSidebar({
          </footer>
        </div>
      </div>
-
-      {children}
+      {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) => {});
 }
@@ -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}`);
      }
    }

@@ -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);
      }
@@ -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;
    }