Nicely working ws

leaky-ships/pages/api/ws.ts

@@ -1,6 +1,8 @@
 import type { NextApiRequest } from "next"
 import { Server } from "socket.io"
 import { NextApiResponseWithSocket } from "../../interfaces/NextApiSocket"
+import checkTokenIsValid from "../../lib/backend/components/checkTokenIsValid"
+import prisma from "../../lib/prisma"
 
 const SocketHandler = (req: NextApiRequest, res: NextApiResponseWithSocket) => {
   if (res.socket.server.io) {
@@ -11,12 +13,37 @@ const SocketHandler = (req: NextApiRequest, res: NextApiResponseWithSocket) => {
     res.socket.server.io = io
 
     io.on("connection", (socket) => {
+      const connection = { id: socket.id, authenticated: false }
+
       socket.on("input-change", (msg) => {
-        socket.broadcast.emit("update-input", msg)
+        if (!connection.authenticated) socket.emit("unauthenticated")
+        // socket.broadcast.emit("update-input", msg)
+        io.emit("update-input", msg)
+      })
+
+      socket.on("authenticate", (payload) => {
+        // console.log("warst", payload)
+        // console.log(payload())
+        checkTokenIsValid({
+          token: payload.token,
+          tokenType: "ACCESS",
+        })
+          .then(async ({ tokenBody }) => {
+            // console.log(tokenBody)
+            const token = await prisma.token.findUnique({
+              where: { id: tokenBody.id },
+            })
+            // console.log(!token , token.used)
+            if (!token || token.used) {
+              socket.emit("unauthenticated")
+              // console.log(token)
+            } else {
+              socket.emit("authenticated")
+              connection.authenticated = true
+            }
+          })
+          .catch((err) => console.log("cat", err.message))
       })
-      // console.log(socket.id)
-      // console.log(socket)
-      // ...
 
       socket.on("test", (payload) => {
         console.log("Got test:", payload)

leaky-ships/pages/dev/socket.tsx

@@ -1,24 +1,41 @@
 import { ChangeEventHandler, useEffect, useState } from "react"
 import { io } from "socket.io-client"
+import getAccessToken from "../../lib/frontend/getAccessToken"
 let socket: ReturnType<typeof io>
 
 const Home = () => {
   const [input, setInput] = useState("")
+  const [data, setData] = useState("")
 
   useEffect(() => {
     socketInitializer()
   }, [])
 
-  const socketInitializer = async () => {
+  async function socketInitializer() {
     await fetch("/api/ws")
     socket = io()
+    await fetch("/api/login", {
+      method: "POST",
+      body: JSON.stringify({ username: "warst", password: "warst" }),
+    })
+    getAccessToken().then((token) => {
+      socket.emit("authenticate", { token })
+    })
 
     socket.on("connect", () => {
       console.log("connected")
     })
 
+    socket.on("authenticated", () => {
+      console.log("Yay!")
+    })
+
+    socket.on("unauthenticated", () => {
+      console.log("No... pls work")
+    })
+
     socket.on("update-input", (msg) => {
-      setInput(msg)
+      setData(msg)
     })
   }
 
@@ -28,11 +45,15 @@ const Home = () => {
   }
 
   return (
-    <input
+    <>
-      placeholder="Type something"
+      <input
-      value={input}
+        placeholder="Type something"
-      onChange={onChangeHandler}
+        value={input}
-    />
+        onChange={onChangeHandler}
+        onDoubleClick={() => setInput(data)}
+      />
+      <h1>{data}</h1>
+    </>
   )
 }