WebSocket Secure

src/app/api/profile/route.ts

@@ -10,7 +10,7 @@ import { ProfileSettings } from "@/types/settings";
 export async function POST(req: NextRequest) {
   const url = new URL(req.url);
   const token = req.cookies.get("token")?.value;
-  const { username, display_name, avatar_url } =
+  const { username, display_name, avatar_url, node_address } =
     (await req.json()) as ProfileSettings;
 
   if (!token)
@@ -21,7 +21,10 @@ export async function POST(req: NextRequest) {
 
   if (!username || !display_name || !avatar_url)
     return NextResponse.json(
-      { message: "Invalid body, requires username, display_name, avatar_url" },
+      {
+        message:
+          "Invalid body, requires username, display_name, avatar_url, node_address",
+      },
       { status: StatusCodes.BAD_REQUEST }
     );
 
@@ -41,6 +44,7 @@ export async function POST(req: NextRequest) {
       username,
       display_name,
       avatar_url,
+      node_address,
     })
     .eq("id", user.id);
 
@@ -85,7 +89,7 @@ export async function GET(req: NextRequest) {
 
   const { data: profile } = await supabase
     .from("profiles")
-    .select("id, username, display_name, avatar_url")
+    .select("id, username, display_name, avatar_url, node_address")
     .eq("id", user_id)
     .maybeSingle();
 

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

@@ -1,12 +1,11 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
 import { Message } from "@/types/types";
-import useUser, { User } from "@/hooks/get-user";
-import { NumberMap, StringMap } from "@/types/typeUtils";
-import auth, { makeAddress } from "@/lib/auth";
+import { UserProfile } from "@/hooks/get-user";
+import { StringMap } from "@/types/typeUtils";
 import { useParams } from "next/navigation";
 
 // In this testing instance we are assuming that the target's node is localhost
@@ -16,8 +15,8 @@ export default function DMs() {
   const { id } = useParams<{ id: string }>();
   const wsRef = useRef<WebSocket | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
-  const [userList, setUserList] = useState<StringMap<User>>({});
-  const [user, setUser] = useState<User | undefined>();
+  const [userList, setUserList] = useState<StringMap<UserProfile>>({});
+  const [user, setUser] = useState<UserProfile | undefined>();
 
   return (
     <AppSidebar

src/app/chat/page.tsx

@@ -2,14 +2,14 @@
 
 import { useRef, useState } from "react";
 import AppSidebar from "@/components/Sidebar";
-import { User } from "@/hooks/get-user";
+import { UserProfile } from "@/hooks/get-user";
 import { StringMap } from "@/types/typeUtils";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import ProfilePicture from "@/components/ProfilePicture";
 
 export default function Chat() {
   const wsRef = useRef<WebSocket | null>(null);
-  const [userList, setUserList] = useState<StringMap<User>>({});
+  const [userList, setUserList] = useState<StringMap<UserProfile>>({});
 
   return (
     <AppSidebar

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

@@ -5,7 +5,7 @@ import { useParams } from "next/navigation";
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
 import { Message, Server as ServerType } from "@/types/types";
-import { User } from "@/hooks/get-user";
+import { UserProfile } from "@/hooks/get-user";
 import { StringMap } from "@/types/typeUtils";
 import auth, { makeAddress } from "@/lib/auth";
 
@@ -15,7 +15,7 @@ export default function Server() {
   const wsNodeRef = useRef<WebSocket | null>(null);
   const [server, setServer] = useState<undefined | ServerType>();
   const [messages, setMessages] = useState<Message[]>([]);
-  const [userList, setUserList] = useState<StringMap<User>>({});
+  const [userList, setUserList] = useState<StringMap<UserProfile>>({});
 
   useEffect(() => {
     if (!ip) return;

src/components/MessageBox.tsx

@@ -16,9 +16,8 @@ import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { NumberMap, StringMap } from "@/types/typeUtils";
-import { User } from "@/hooks/get-user";
+import { UserProfile } from "@/hooks/get-user";
 import axios from "axios";
-import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import ProfilePicture from "./ProfilePicture";
 
 function MessageContainer({
@@ -27,14 +26,17 @@ function MessageContainer({
   setUserList,
 }: {
   message: Message;
-  userList: NumberMap<User>;
-  setUserList: React.Dispatch<React.SetStateAction<NumberMap<User>>>;
+  userList: StringMap<UserProfile>;
+  setUserList: React.Dispatch<React.SetStateAction<NumberMap<UserProfile>>>;
 }) {
   useEffect(() => {
     axios
       .get("/api/profile/", { params: { id: message.from } })
       .then((res) =>
-        setUserList((prev) => ({ ...prev, [message.from]: res.data as User }))
+        setUserList((prev) => ({
+          ...prev,
+          [message.from]: res.data as UserProfile,
+        }))
       )
       .catch(console.error);
   }, [message.from, setUserList]);
@@ -144,8 +146,8 @@ export default function MessageBox({
   channelName,
 }: {
   messages: Message[];
-  userList: NumberMap<User>;
-  setUserList: React.Dispatch<React.SetStateAction<NumberMap<User>>>;
+  userList: NumberMap<UserProfile>;
+  setUserList: React.Dispatch<React.SetStateAction<NumberMap<UserProfile>>>;
   sendMessage: (m: string) => void;
   channelName?: string;
 }) {

src/components/Sidebar.tsx

@@ -28,7 +28,7 @@ import { Card } from "./ui/card";
 import { ScrollArea } from "./ui/scroll-area";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import useUser, { User } from "@/hooks/get-user";
+import useUser, { UserProfile } from "@/hooks/get-user";
 import ProfilePicture from "./ProfilePicture";
 import auth, { makeAddress } from "@/lib/auth";
 import { toast } from "sonner";
@@ -47,19 +47,18 @@ export default function AppSidebar({
   wsRef: React.RefObject<WebSocket | null>;
   setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
   onNewMessage?: (msg: Message) => void;
-  userList: StringMap<User>;
-  setUserList: React.Dispatch<React.SetStateAction<StringMap<User>>>;
+  userList: StringMap<UserProfile>;
+  setUserList: React.Dispatch<React.SetStateAction<StringMap<UserProfile>>>;
   chatWith?: string;
   children?: React.ReactNode;
-  setUser?: React.Dispatch<React.SetStateAction<User | undefined>>;
+  setUser?: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
   server?: Server | undefined;
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
   const [newServer, setNewServer] = useState({ name: "", ip: "" });
   const router = useRouter();
   const user = useUser();
-  const [userList, setUserList] = useState<StringMap<User>>({});
-  const ip = "192.168.100.3";
+  const [userList, setUserList] = useState<StringMap<UserProfile>>({});
 
   useEffect(() => {
     const s = Cookies.get("servers")?.split(",");
@@ -67,10 +66,10 @@ export default function AppSidebar({
   }, []);
 
   useEffect(() => {
-    if (!ip || !user) return;
+    if (!user?.node_address) return;
     if (setUser) setUser(user);
     auth(
-      makeAddress(ip, 7090),
+      makeAddress(user?.node_address, 7090),
       wsRef,
       () => {},
       setMessages,

src/hooks/get-user.ts

@@ -1,19 +1,17 @@
 "use client";
 
+import { ProfileSettings } from "@/types/settings";
 import axios from "axios";
 import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
-export interface User {
+export interface UserProfile extends ProfileSettings {
   id: string;
-  username: string;
-  display_name: string;
-  avatar_url: string;
 }
 
 export default function useUser() {
-  const [user, setUser] = useState<User | null>(null);
+  const [user, setUser] = useState<UserProfile | null>(null);
   const router = useRouter();
 
   useEffect(() => {
@@ -25,7 +23,7 @@ export default function useUser() {
       }
 
       try {
-        const res = (await axios.get("/api/profile")).data as User;
+        const res = (await axios.get("/api/profile")).data as UserProfile;
 
         setUser(res);
       } catch {

src/lib/auth.ts

@@ -3,7 +3,9 @@ import axios from "axios";
 import { Dispatch, RefObject, SetStateAction } from "react";
 
 export function makeAddress(ip: string, defaultPort = 7080) {
-  return ip.includes(":") ? `${ip}` : `${ip}:${defaultPort}`;
+  // return ip.includes(":") ? `${ip}` : `${ip}:${defaultPort}`;
+  // Apparently wss doesn't like ports (or maybe the tunnel I'm using)
+  return ip;
 }
 
 export default async function auth(
@@ -19,7 +21,7 @@ export default async function auth(
   ).token;
 
   // Open the WebSocket connection
-  const ws = new WebSocket(`ws://${ip}`);
+  const ws = new WebSocket(`wss://${ip}`);
   wsRef.current = ws;
 
   ws.onopen = () => {