Added Connection Component, Store, JWT logic

apps/dispatch-server/index.ts

@@ -1,10 +1,9 @@
 import "dotenv/config";
 import express from "express";
 import { createServer } from "http";
-import { handle } from "socket-events/connect-dispatch";
 import { Server } from "socket.io";
 import { createAdapter } from "@socket.io/redis-adapter";
-import { jwtMiddleware } from "modules/socketJWT";
+import { jwtMiddleware } from "modules/socketJWTmiddleware";
 import { pubClient, subClient } from "modules/redis";
 
 const app = express();

apps/dispatch-server/modules/socketJWTmiddleware.ts

@@ -1,7 +1,5 @@
 import { ExtendedError, Server, Socket } from "socket.io";
-import jwt from "jsonwebtoken";
-import { pubClient } from "modules/redis";
-
+import { prisma } from "@repo/db";
 if (!process.env.DISPATCH_APP_TOKEN)
 	throw new Error("DISPATCH_APP_TOKEN is not defined");
 
@@ -10,17 +8,19 @@ export const jwtMiddleware = async (
 	next: (err?: ExtendedError) => void,
 ) => {
 	try {
-		const token = socket.handshake.auth?.token;
-		console.log(socket.handshake);
+		const { uid } = socket.handshake.auth;
+		if (!uid) return new Error("Authentication error");
+		/* const token = socket.handshake.auth?.token;
 		if (!token) return new Error("Authentication error");
-		const decoded = jwt.verify(token, process.env.DISPATCH_APP_TOKEN!);
+		const decoded = jwt.verify(token, process.env.DISPATCH_APP_TOKEN!); */
 		// socket.data.userId = decoded.; // User ID lokal speichern
+		const user = await prisma.user.findUniqueOrThrow({
+			where: { id: uid },
+		});
 
-		// Prüfen, ob der Nutzer ein Disponent ist
-		const userId: any = decoded;
-		socket.data.user = decoded; // Lokal speichern
+		socket.data.user = user;
 
-		// In Redis speichern: Key = 'connected_dispatchers', Feld = socket.id, Wert = JSON-String des Users
+		next();
 	} catch (err) {
 		console.error(err);
 		next(new Error("Authentication error"));

apps/dispatch/app/(dispatch)/_components/Connection.tsx

@@ -0,0 +1,17 @@
+import { useSession } from "next-auth/react";
+import { connectionStore } from "../../_store/connectionStore";
+import { useEffect } from "react";
+
+export const Connection = () => {
+	const session = useSession();
+	const cStore = connectionStore((state) => state);
+	const uid = session.data?.user?.id;
+
+	useEffect(() => {
+		if (uid) {
+			cStore.connect(uid);
+		}
+	}, [uid]);
+
+	return <div>{cStore.isConnected ? "Connected" : "Not Connected"}</div>;
+};

apps/dispatch/app/(dispatch)/_components/Navbar.tsx

@@ -6,10 +6,10 @@ import Link from "next/link";
 import { connectionStore } from "../../_store/connectionStore";
 import { useEffect } from "react";
 import { socket } from "../socket";
+import { useSession } from "next-auth/react";
+import { Connection } from "./Connection";
 
 export default function Navbar() {
-	const connected = connectionStore((state) => state);
-
 	return (
 		<div className="navbar bg-base-100 shadow-sm">
 			<div className="flex-1">
@@ -51,6 +51,9 @@ export default function Navbar() {
 						<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
 					</svg>
 				</label>
+				<div>
+					<Connection />
+				</div>
 				<div className="dropdown dropdown-end">
 					<div tabIndex={0} role="button" className="btn btn-ghost">
 						...

apps/dispatch/app/(dispatch)/layout.tsx

@@ -14,6 +14,7 @@ export default async function RootLayout({
 	children: React.ReactNode;
 }>) {
 	const session = await getServerSession();
+	console.log(session);
 	if (!session) {
 		redirect("/login");
 	}

apps/dispatch/app/(dispatch)/socket.ts

@@ -1,7 +1,5 @@
 import { io } from "socket.io-client";
 
 export const socket = io(process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL, {
-	auth: (cb) => {
-		cb({ token: "jwt" });
-	},
+	autoConnect: false,
 });

apps/dispatch/app/_store/connectionStore.ts

@@ -3,10 +3,15 @@ import { socket } from "../(dispatch)/socket";
 
 console.log("connectionStore");
 
-export const connectionStore = create((set) => ({
+interface ConnectionStore {
+	isConnected: boolean;
+	connect: (uid: string) => Promise<void>;
+}
+
+export const connectionStore = create<ConnectionStore>((set) => ({
 	isConnected: false,
-	connect: async (jwt: string) => {
-		socket.auth = { token: "jwt" };
+	connect: async (uid: string) => {
+		socket.auth = { uid };
 		socket.connect();
 	},
 }));

apps/dispatch/app/api/auth/[...nextauth]/auth.ts

@@ -63,7 +63,7 @@ export const options: AuthOptions = {
 
 	adapter: PrismaAdapter(prisma as any),
 	callbacks: {
-		jwt: async ({ token, user }) => {
+		jwt: async ({ token, user, ...rest }) => {
 			if (user && "firstname" in user) {
 				return {
 					...token,

apps/dispatch/types/next-auth.d.ts

@@ -0,0 +1,21 @@
+import NextAuth from "next-auth";
+import { User as IUser } from "@repo/db";
+
+declare module "next-auth" {
+	/**
+	 * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+	 */
+	interface Session {
+		user: IUser;
+	}
+	type User = IUser;
+}
+
+declare module "next-auth/jwt" {
+	interface JWT {
+		uid: string;
+		firstname: string;
+		lastname: string;
+		email: string;
+	}
+}