add auth token to ws request

apps/web/src/components/realtime-switch.tsx

@@ -2,24 +2,36 @@
 import { Switch } from "@/components/ui/switch";
 import { useWebSocket } from "@/lib/hooks/useWebsocket";
 import { useRealtimeCountActions } from "@/lib/store";
+import { useAuth } from "@clerk/nextjs";
 import { useParams, useRouter } from "next/navigation";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 export function RealtimeSwitch() {
 	const router = useRouter();
 	const params = useParams<{ waitlist: string }>();
-
 	const { incrementRealtimeCount, resetRealtimeCount } = useRealtimeCountActions();
 
 	const [enabled, setEnabled] = useState(false);
+	const [token, setToken] = useState<string | null>(null);
+	const { getToken } = useAuth();
 
 	const { ws, reconnect } = useWebSocket(`${process.env.NEXT_PUBLIC_REALTIME_URL}/${params.waitlist}/ws`, {
 		onMessage: () => {
 			incrementRealtimeCount();
 		},
 		enabled,
+		authToken: token ?? undefined,
 	});
 
+	useEffect(() => {
+		async function fetchToken() {
+			const token = await getToken();
+			setToken(token);
+		}
+
+		fetchToken();
+	}, []);
+
 	return (
 		<div className="flex items-center gap-2">
 			<p className="items-center font-medium text-lg tracking-tight">Enable Realtime</p>

apps/web/src/lib/hooks/useWebsocket.ts

@@ -1,16 +1,23 @@
 import { useCallback, useEffect, useState } from "react";
 
-export const useWebSocket = (url: string, opts: { onMessage: (e: MessageEvent) => void; enabled: boolean }) => {
+export const useWebSocket = (
+	url: string,
+	opts: { onMessage: (e: MessageEvent) => void; enabled?: boolean; authToken?: string },
+) => {
 	const [ws, setWs] = useState<WebSocket | null>(null);
 	const [key, setKey] = useState(0);
 
+	const link = new URL(url);
+
+	if (opts.authToken) link.searchParams.append("token", opts.authToken);
+
 	const reconnect = useCallback(() => {
 		setKey((prev) => prev + 1);
 	}, []);
 
 	useEffect(() => {
 		if (opts.enabled) {
-			const ws = new WebSocket(url);
+			const ws = new WebSocket(link);
 			ws.onopen = () => {
 				console.log("[Connected to realtime]");
 			};