Příprava JWT

client/package.json

@@ -19,6 +19,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0",
+    "react-jwt": "^1.2.0",
     "react-modal": "^3.16.1",
     "react-scripts": "5.0.1",
     "react-select-search": "^4.1.6",

client/src/Api.ts

@@ -73,3 +73,7 @@ export const removePizza = async (login: string, pizzaOrder: PizzaOrder) => {
 export const updateNote = async (login: string, note?: string) => {
     return await api.post<any, any>('/api/updateNote', JSON.stringify({ login, note }));
 }
+
+export const login = async (login: string) => {
+    return await api.post<any, any>('/api/login', JSON.stringify({ login }));
+}

client/src/Login.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { Button } from 'react-bootstrap';
 import { useAuth } from './context/auth';
 import './Login.css';
+import { login } from './Api';
 
 /**
  * Formulář pro prvotní zadání přihlašovacího jména.
@@ -10,10 +11,15 @@ export default function Login() {
   const auth = useAuth();
   const loginRef = useRef<HTMLInputElement>(null);
 
-  const doLogin = useCallback(() => {
+  const doLogin = useCallback(async () => {
     const length = loginRef?.current?.value && loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
     if (length) {
-      auth?.setLogin(loginRef.current.value);
+      // TODO odchytávat cokoliv mimo 200
+      const token = await login(loginRef.current.value);
+      if (token) {
+        console.log("Přijali jsme token", token); // TODO smazat
+        auth?.setToken(token);
+      }
     }
   }, [auth]);
 

client/src/context/auth.tsx

@@ -1,12 +1,13 @@
 import React, { ReactNode, useContext, useState } from "react"
 import { useEffect } from "react"
+import { useJwt } from "react-jwt";
 
-const LOGIN_KEY = 'login';
+const TOKEN_KEY = 'token';
 
 export type AuthContextProps = {
   login?: string,
-  setLogin: (name: string) => void,
+  setToken: (name: string) => void,
-  clearLogin: () => void,
+  logout: () => void,
 }
 
 type ContextProps = {
@@ -25,34 +26,50 @@ export const useAuth = () => {
 }
 
 function useProvideAuth(): AuthContextProps {
+  const token = localStorage.getItem(TOKEN_KEY);
   const [loginName, setLoginName] = useState<string | undefined>();
-
+  let decodedToken, isExpired;
-  useEffect(() => {
+  if (token) {
-    const login = localStorage.getItem(LOGIN_KEY);
+    const payload = useJwt(token);
-    if (login) {
+    decodedToken = payload?.decodedToken;
-      setLogin(login);
+    isExpired = payload?.isExpired
   }
-  }, [])
 
   useEffect(() => {
-    if (loginName) {
+    if (token) {
-      localStorage.setItem(LOGIN_KEY, loginName)
+      if (decodedToken && !isExpired) {
+        doSetToken(token);
+        setLoginName((decodedToken as any).login);
+      }
+    }
+  }, [decodedToken, isExpired])
+
+  useEffect(() => {
+    if (token) {
+      localStorage.setItem(TOKEN_KEY, token);
     } else {
-      localStorage.removeItem(LOGIN_KEY);
+      localStorage.removeItem(TOKEN_KEY);
     }
-  }, [loginName]);
+  }, [token]);
 
-  function setLogin(login: string) {
+  function doSetToken(token: string) {
-    setLoginName(login);
+
+    if (!decodedToken || !((decodedToken as any).login)) {
+      throw Error("Chyba dekódování tokenu");
+    }
+    if (isExpired) {
+      throw Error("Platnost tokenu vypršela");
+    }
+    setLoginName((decodedToken as any).login);
   }
 
-  function clearLogin() {
+  function logout() {
     setLoginName(undefined);
   }
 
   return {
     login: loginName,
-    setLogin,
+    setToken: doSetToken,
-    clearLogin
+    logout,
   }
 }

client/yarn.lock

@@ -2168,6 +2168,13 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/jsonwebtoken@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz#9eeb56c76dd555039be2a3972218de5bd3b8d83e"
+  integrity sha512-drE6uz7QBKq1fYqqoFKTDRdFCPHd5TCub75BM+D+cMx7NU9hUz7SESLfC2fSCXVFMO5Yj8sOWHuGqPgjc+fz0Q==
+  dependencies:
+    "@types/node" "*"
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@@ -7809,6 +7816,13 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-jwt@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-jwt/-/react-jwt-1.2.0.tgz#985c507dbbc0980606719a0d78c2a164282d0569"
+  integrity sha512-HmEaS63CaqxHPIWoLh68KpGacXX7tAiWS2YIREVDosc2m4hTYoMp23Oz1lRM3MivT8DGibwTFIg5k4HNLfMv1w==
+  optionalDependencies:
+    fsevents "^2.3.2"
+
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"

server/.env.template

@@ -3,6 +3,9 @@
 # V tomto režimu vrací server vždy falešné datum (pracovní den) a pevně nadefinovanou, smyšlenou nabídku jídel.
 # MOCK_DATA=true
 
+# Secret pro podepisování JWT tokenů. Minimální délka 32 znaků.
+# JWT_SECRET='CHANGE_ME'
+
 # Určuje servery Gotify a příslušné klíče API.
 # Formát je pole objektů, kde každý objekt obsahuje adresu serveru a pole klíčů API.
 # To je užitečné pro odesílání upozornění na různé servery Gotify s různými klíči API.

server/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.17",
+    "@types/jsonwebtoken": "^9.0.2",
     "@types/node": "^20.2.5",
     "@types/request-promise": "^4.1.48",
     "ts-node": "^10.9.1",
@@ -21,6 +22,7 @@
     "cors": "^2.8.5",
     "dotenv": "^16.1.3",
     "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.0",
     "simple-json-db": "^2.0.0",
     "socket.io": "^4.6.1"
   }

server/src/auth.ts

@@ -0,0 +1,47 @@
+import jwt from 'jsonwebtoken';
+
+/**
+ * Vygeneruje a vrátí podepsaný JWT token pro daný login.
+ * 
+ * @param login přihlašovací jméno uživatele
+ * @returns JWT token
+ */
+export function generateToken(login: string): string {
+    if (!process.env.JWT_TOKEN) {
+        throw Error("Není vyplněna proměnná prostředí JWT_TOKEN");
+    }
+    if (process.env.JWT_TOKEN.length < 32) {
+        throw Error("Proměnná prostředí JWT_TOKEN musí být minimálně 32 znaků");
+    }
+    return jwt.sign({ login }, process.env.JWT_TOKEN);
+}
+
+/**
+ * Vrátí true, pokud je předaný JWT token platný.
+ * 
+ * @param token JWT token
+ */
+export function verify(token: string): boolean {
+    if (!process.env.JWT_TOKEN) {
+        throw Error("Není vyplněna proměnná prostředí JWT_TOKEN");
+    }
+    try {
+        jwt.verify(token, process.env.JWT_TOKEN);
+        return true;
+    } catch (err) {
+        return false;
+    }
+}
+
+/**
+ * Vrátí login z daného JWT tokenu, pokud je token platný.
+ * 
+ * @param token JWT token
+ */
+export function getLogin(token: string): string {
+    if (!process.env.JWT_TOKEN) {
+        throw Error("Není vyplněna proměnná prostředí JWT_TOKEN");
+    }
+    const payload: any = jwt.verify(token, process.env.JWT_TOKEN);
+    return payload.login;
+}

server/src/index.ts

@@ -9,6 +9,7 @@ import path from 'path';
 import { getMenuSladovnicka, getMenuTechTower, getMenuUMotliku } from "./restaurants";
 import { getQr } from "./qr";
 import { Restaurants } from "./types";
+import { generateToken, verify } from "./auth";
 
 const ENVIRONMENT = process.env.NODE_ENV || 'production'
 dotenv.config({ path: path.resolve(__dirname, `../.env.${ENVIRONMENT}`) });
@@ -29,6 +30,25 @@ app.use(cors({
     origin: '*'
 }));
 
+app.post("/api/login", (req, res) => {
+    if (!req.body?.login) {
+        throw Error("Nebyl předán login");
+    }
+    // TODO zavést podmínky pro délku loginu (min i max)
+    const token = generateToken(req.body.login);
+    res.status(200).json(token);
+});
+
+app.post("/api/verify", (req, res) => {
+    if (!req.body?.token) {
+        res.status(401).send();
+    } else if (verify(req.body.token)) {
+        res.status(200).send();
+    } else {
+        res.status(403).send();
+    }
+});
+
 /** Vrátí data pro aktuální den. */
 app.get("/api/data", (req, res) => {
     res.status(200).json(getData());

server/yarn.lock

@@ -109,6 +109,13 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/jsonwebtoken@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz#9eeb56c76dd555039be2a3972218de5bd3b8d83e"
+  integrity sha512-drE6uz7QBKq1fYqqoFKTDRdFCPHd5TCub75BM+D+cMx7NU9hUz7SESLfC2fSCXVFMO5Yj8sOWHuGqPgjc+fz0Q==
+  dependencies:
+    "@types/node" "*"
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@@ -243,6 +250,11 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+  integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==
+
 bytes@3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
@@ -413,6 +425,13 @@ dotenv@^16.1.3:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.1.4.tgz#67ac1a10cd9c25f5ba604e4e08bc77c0ebe0ca8c"
   integrity sha512-m55RtE8AsPeJBpOIFKihEmqUcoVncQIwo7x9U8ZwLEZw9ZpXboz2c+rvog+jUaJvVrZ5kBOeYQBX5+8Aa/OZQw==
 
+ecdsa-sig-formatter@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -612,6 +631,45 @@ ipaddr.js@1.9.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
+jsonwebtoken@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-9.0.0.tgz#d0faf9ba1cc3a56255fe49c0961a67e520c1926d"
+  integrity sha512-tuGfYXxkQGDPnLJ7SibiQgVgeDgfbPq2k2ICcbgqW8WxWLBAxKQM/ZCu/IT8SOSwmaYl4dpTFCW5xZv7YbbWUw==
+  dependencies:
+    jws "^3.2.2"
+    lodash "^4.17.21"
+    ms "^2.1.1"
+    semver "^7.3.8"
+
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jws@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
+  dependencies:
+    jwa "^1.4.1"
+    safe-buffer "^5.0.1"
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
@@ -659,7 +717,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3:
+ms@2.1.3, ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -753,7 +811,7 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-safe-buffer@5.2.1:
+safe-buffer@5.2.1, safe-buffer@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -763,6 +821,13 @@ safe-buffer@5.2.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+semver@^7.3.8:
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
+  integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -905,6 +970,11 @@ ws@~8.11.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"