implemented /auth/token api endpoint to fetch from frontend and save it to localStorage

frontend/js/chat.js

@@ -1,10 +1,3 @@
-
-const socket = io({
-    auth: {
-        token: document.cookie.split('=')[1]
-    }
-});
-
 const form = document.getElementById('form');
 const input = document.getElementById('input');
 const messages = document.getElementById('messages');
@@ -16,18 +9,28 @@ form.addEventListener('submit', (e) => {
         input.value = '';
     }
 });
-fetch('/auth/token', {
-    method: 'POST',
-    headers: {
-        'Content-Type': 'application/json'
-    },
-})
+fetch('/auth/token')
     .then(response => {
-        const token = response.headers.get('Authorization').split(' ')[1];
-        localStorage.setItem('token', token);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.text();
+    })
+    .then(token => {
+        localStorage.setItem('token', token); // Save to localStorage
+    })
+    .catch(error => {
+        console.error('There was a problem with token fetching', error);
     });
 
-socket.on('chat message', (msg) => {
+const token = localStorage.getItem('token');
+const socket = io({
+    auth: {
+        token: token
+    }
+});
+
+socket.on('chat message', ({msg}) => {
     const item = document.createElement('li');
     item.textContent = msg;
     messages.appendChild(item);

index.js

@@ -73,7 +73,10 @@ app.get('/signup', (req, res) => {
 
 app.get('/auth/token', (req, res) => {
     const token = req.cookies.token;
-    res.setHeader('Authorization', `Bearer ${token}`);
+    if(!token){
+        res.send('Not logged in');
+    }
+    res.send(token);
 })
 
 app.get('/auth/user', (req, res) => {
@@ -98,38 +101,47 @@ app.get('/', (req, res) => {
         res.redirect('/login');
         return;
     }
-
     // verify token
-    jwt.verify(token, jwtSecret, (err, user) => {
+    jwt.verify(token, jwtSecret, (err) => {
         if (err) {
             return res.status(403).send('Unauthorized');
         }
-        const username = user.username;
         res.sendFile(path.join(__dirname, '/frontend/routes/chat.html'));
     });
 });
 
+io.use((socket, next) => {
+  const token = socket.handshake.auth.token;
+  if(token) {
+      jwt.verify(token, jwtSecret, (err, user) => {
+          if(err) {
+            console.log(err);
+          }
+          socket.user = user;
+          next();
+      });
+  } else {
+      next(new Error('Not logged in'));
+  }
+  const username = socket.handshake.username;
+})
+
 // socket io connection
 io.on('connection', (socket) => {
-    const token = socket.handshake.headers.cookie.split("=")[1];
-    jwt.verify(token, jwtSecret, (err, user) => {
-        if (err) {
-            return
-        }
-        const username = user.username;
-
+        const username = socket.user.username;
         console.log(username + ' connected');
+
         // disconnect event
         socket.on('disconnect', () => {
             console.log(username + ' have  disconnected');
         });
+
         // chat message event
         socket.on('chat message', (msg) => {
             const message = username + ': ' + msg;
             console.log(message);
             io.emit('chat message', message);
         });
-    });
 })
 // run server
 server.listen(port, () => {