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",
@@ -54,4 +55,4 @@
   "devDependencies": {
     "prettier": "^2.8.8"
   }
-}
+}

client/src/Api.ts

@@ -72,4 +72,8 @@ 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,
-  clearLogin: () => void,
+  setToken: (name: string) => 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>();
-
-  useEffect(() => {
-    const login = localStorage.getItem(LOGIN_KEY);
-    if (login) {
-      setLogin(login);
-    }
-  }, [])
-
-  useEffect(() => {
-    if (loginName) {
-      localStorage.setItem(LOGIN_KEY, loginName)
-    } else {
-      localStorage.removeItem(LOGIN_KEY);
-    }
-  }, [loginName]);
-
-  function setLogin(login: string) {
-    setLoginName(login);
+  let decodedToken, isExpired;
+  if (token) {
+    const payload = useJwt(token);
+    decodedToken = payload?.decodedToken;
+    isExpired = payload?.isExpired
   }
 
-  function clearLogin() {
+  useEffect(() => {
+    if (token) {
+      if (decodedToken && !isExpired) {
+        doSetToken(token);
+        setLoginName((decodedToken as any).login);
+      }
+    }
+  }, [decodedToken, isExpired])
+
+  useEffect(() => {
+    if (token) {
+      localStorage.setItem(TOKEN_KEY, token);
+    } else {
+      localStorage.removeItem(TOKEN_KEY);
+    }
+  }, [token]);
+
+  function doSetToken(token: string) {
+
+    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 logout() {
     setLoginName(undefined);
   }
 
   return {
     login: loginName,
-    setLogin,
-    clearLogin
+    setToken: doSetToken,
+    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"