fix/89: websocket token flow

backend/src/chat/chat.gateway.ts

@@ -553,7 +553,7 @@
     }
   }
 
   afterInit(_: Server) {
     this.server.use((socket, next) => {
       this.validateConnection(socket)
         .then((user) => {
@@ -569,7 +569,8 @@
   }
 
   private validateConnection(client: Socket) {
-    const token = client.handshake.headers.cookie.split(';')[0].split('=')[1];
+    const token = client.handshake.auth.token;
+
     try {
       const payload = this.jwtService.verify<TokenPayload>(token, {
         secret: process.env.JWT_SECRET,

backend/src/game/game.gateway.ts

@@ -36,7 +36,7 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
   handleConnection(client: Socket) {
     // Get user from cookie coming from client
-    const user = client.handshake.headers.cookie.split(';')[0].split('=')[1];
+    const user = client.handshake.auth.token;
 
     // Decode user from JWT
     const decodedUser = this.jwtService.decode(user).sub;
@@ -53,7 +53,7 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
   @SubscribeMessage('joinGame')
   joinGame(client: Socket) {
-    const user = client.handshake.headers.cookie.split(';')[0].split('=')[1];
+    const user = client.handshake.auth.token;
     const decodedUser = this.jwtService.decode(user).sub;
 
     if (this.gameLobby.joinPlayer1(client, decodedUser)) {

frontend/src/contexts/GameContext.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { createContext, useEffect, useRef, useState } from "react";
 import io, { Socket } from "socket.io-client";
+import nookies from "nookies";
 
 /**
  * Backend websocket events
@@ -52,7 +53,7 @@ export type MovePlayerData = {
   direction: string;
 };
 
-export type GameLayout = 'default' | 'sunlight' | 'moonlight' | 'dark';
+export type GameLayout = "default" | "sunlight" | "moonlight" | "dark";
 
 type GameContextType = {
   waitingPlayer2: boolean;
@@ -79,13 +80,18 @@ export const GameProvider = ({ children }: GameProviderProps) => {
   const [clientId, setClientId] = useState("");
   const [gameData, setGameData] = useState({} as GameData);
   const [gameFinishedData, setGameFinishedData] = useState({} as GameData);
-  const [gameLayout, setGameLayout] = useState<GameLayout>('default');
+  const [gameLayout, setGameLayout] = useState<GameLayout>("default");
 
   const socket = useRef<Socket | null>(null);
 
   useEffect(() => {
     // Listen for the 'connect' event
+    const { accessToken } = nookies.get(null, "accesssToken");
+
     socket.current = io("http://localhost:3000/game", {
+      auth: {
+        token: accessToken,
+      },
       transports: ["websocket", "polling", "flashsocket"],
     });
 
@@ -180,8 +186,8 @@ export const GameProvider = ({ children }: GameProviderProps) => {
         gameAbandoned,
         gameFinishedData,
         gameData,
-        gameLayout, 
-        setGameLayout
+        gameLayout,
+        setGameLayout,
       }}
     >
       {children}

frontend/src/services/api.ts

@@ -1,9 +1,7 @@
 import { TokenPayload, signOut } from "@/contexts/AuthContext";
 import axios, { AxiosError } from "axios";
 import nookies from "nookies";
-import jwt_decode from "jwt-decode";
 import { GetServerSidePropsContext } from "next";
-import { parseCookies } from "nookies";
 
 type Context = undefined | GetServerSidePropsContext;
 
@@ -13,7 +11,6 @@ export function setupAPIClient(ctx: Context = undefined) {
   api.interceptors.request.use(
     (config) => {
       const { accessToken } = nookies.get(null, "accesssToken");
-      const payload: TokenPayload = jwt_decode(accessToken);
 
       if (accessToken) {
         config.headers["Authorization"] = `Bearer ${accessToken}`;

frontend/src/services/chatClient.ts

@@ -1,4 +1,5 @@
 import { io, Socket } from "socket.io-client";
+import nookies from "nookies";
 
 class ChatService {
   public socket: Socket | null;
@@ -9,7 +10,12 @@ class ChatService {
 
   public connect(): void {
     if (!this.socket) {
+      const { accessToken } = nookies.get(null, "accesssToken");
+
       this.socket = io("http://localhost:3000/chat", {
+        auth: {
+          token: accessToken,
+        },
         transports: ["websocket", "polling", "flashsocket"],
       });
     }