From ba719e2c3d9f0676dbbc18e0e71187a0e281d901 Mon Sep 17 00:00:00 2001 From: Hannah <hz018@hdm-stuttgart.de> Date: Mon, 11 Dec 2023 23:49:10 +0100 Subject: [PATCH] #31 #37 check if Jwt is still valid + delete Jwt Cookie when logout --- growbros-frontend/package-lock.json | 160 ++++-------------- growbros-frontend/package.json | 3 +- growbros-frontend/src/App.tsx | 21 ++- growbros-frontend/src/components/Navbar.tsx | 13 +- .../components/NavbarRegistrationAndLogin.tsx | 4 +- growbros-frontend/src/jwt/Cookies.ts | 8 +- growbros-frontend/src/pages/Register.tsx | 9 +- 7 files changed, 64 insertions(+), 154 deletions(-) diff --git a/growbros-frontend/package-lock.json b/growbros-frontend/package-lock.json index 123c311..a9a56dc 100644 --- a/growbros-frontend/package-lock.json +++ b/growbros-frontend/package-lock.json @@ -8,9 +8,8 @@ "name": "growbros-frontend", "version": "0.0.0", "dependencies": { - "@types/jsonwebtoken": "^9.0.5", "font-awesome": "^4.7.0", - "jsonwebtoken": "^9.0.2", + "jwt-decode": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.18.0" @@ -514,9 +513,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", - "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==", + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz", + "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==", "engines": { "node": ">=14.0.0" } @@ -737,18 +736,13 @@ "integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==", "dev": true }, - "node_modules/@types/jsonwebtoken": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.5.tgz", - "integrity": "sha512-VRLSGzik+Unrup6BsouBeHsf4d1hOEgYWTm/7Nmw1sXoN1+tRly/Gy/po3yeahnP4jfnQWWAhQAqcNfH7ngOkA==", - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/node": { "version": "20.10.4", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz", "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==", + "dev": true, + "optional": true, + "peer": true, "dependencies": { "undici-types": "~5.26.4" } @@ -1102,11 +1096,6 @@ "node": ">=8" } }, - "node_modules/buffer-equal-constant-time": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz", - "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==" - }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -1223,14 +1212,6 @@ "node": ">=6.0.0" } }, - "node_modules/ecdsa-sig-formatter": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz", - "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==", - "dependencies": { - "safe-buffer": "^5.0.1" - } - }, "node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -1798,44 +1779,12 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, - "node_modules/jsonwebtoken": { - "version": "9.0.2", - "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz", - "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==", - "dependencies": { - "jws": "^3.2.2", - "lodash.includes": "^4.3.0", - "lodash.isboolean": "^3.0.3", - "lodash.isinteger": "^4.0.4", - "lodash.isnumber": "^3.0.3", - "lodash.isplainobject": "^4.0.6", - "lodash.isstring": "^4.0.1", - "lodash.once": "^4.0.0", - "ms": "^2.1.1", - "semver": "^7.5.4" - }, + "node_modules/jwt-decode": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz", + "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==", "engines": { - "node": ">=12", - "npm": ">=6" - } - }, - "node_modules/jwa": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz", - "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" - } - }, - "node_modules/jws": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz", - "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==", - "dependencies": { - "jwa": "^1.4.1", - "safe-buffer": "^5.0.1" + "node": ">=18" } }, "node_modules/keyv": { @@ -1875,47 +1824,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/lodash.includes": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz", - "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==" - }, - "node_modules/lodash.isboolean": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz", - "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==" - }, - "node_modules/lodash.isinteger": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz", - "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==" - }, - "node_modules/lodash.isnumber": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz", - "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==" - }, - "node_modules/lodash.isplainobject": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", - "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==" - }, - "node_modules/lodash.isstring": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz", - "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==" - }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, - "node_modules/lodash.once": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", - "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==" - }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -1931,6 +1845,7 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, "dependencies": { "yallist": "^4.0.0" }, @@ -1975,7 +1890,8 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "node_modules/nanoid": { "version": "3.3.6", @@ -2213,11 +2129,11 @@ } }, "node_modules/react-router": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", - "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "version": "6.20.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz", + "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==", "dependencies": { - "@remix-run/router": "1.11.0" + "@remix-run/router": "1.13.1" }, "engines": { "node": ">=14.0.0" @@ -2227,12 +2143,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", - "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", + "version": "6.20.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz", + "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==", "dependencies": { - "@remix-run/router": "1.11.0", - "react-router": "6.18.0" + "@remix-run/router": "1.13.1", + "react-router": "6.20.1" }, "engines": { "node": ">=14.0.0" @@ -2315,25 +2231,6 @@ "queue-microtask": "^1.2.2" } }, - "node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -2346,6 +2243,7 @@ "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -2501,7 +2399,10 @@ "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true, + "optional": true, + "peer": true }, "node_modules/uri-js": { "version": "4.4.1", @@ -2591,7 +2492,8 @@ "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true }, "node_modules/yocto-queue": { "version": "0.1.0", diff --git a/growbros-frontend/package.json b/growbros-frontend/package.json index 90fb9a8..bfd61e6 100644 --- a/growbros-frontend/package.json +++ b/growbros-frontend/package.json @@ -10,9 +10,8 @@ "preview": "vite preview" }, "dependencies": { - "@types/jsonwebtoken": "^9.0.5", "font-awesome": "^4.7.0", - "jsonwebtoken": "^9.0.2", + "jwt-decode": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.18.0" diff --git a/growbros-frontend/src/App.tsx b/growbros-frontend/src/App.tsx index 0b0e540..ca552f0 100644 --- a/growbros-frontend/src/App.tsx +++ b/growbros-frontend/src/App.tsx @@ -5,12 +5,12 @@ import Suche from "./pages/Suche"; import {Routes, Route, useLocation} from "react-router-dom"; import Wunschliste from "./pages/Wunschliste"; import PlantDetails from "./components/PlantDetails"; -import Register from "./pages/Register.tsx"; -import Login from "./pages/Login.tsx"; import Navbar from "./components/Navbar.tsx"; import NavbarRegistrationAndLogin from "./components/NavbarRegistrationAndLogin.tsx"; import {useEffect, useState} from "react"; -import {getCookie} from "./jwt/Cookies.ts"; +import {deleteJwtInCookie, getCookie} from "./jwt/Cookies.ts"; +import Login from "./pages/Login.tsx"; +import Register from "./pages/Register.tsx"; function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); @@ -19,7 +19,7 @@ function App() { useEffect(() => { console.log("check jwt-status") const jwtCookie = getCookie("Jwt"); - console.log(jwtCookie) + console.log("Jwt Cookie " + jwtCookie) if (!jwtCookie) { // Wenn der JWT-Cookie nicht vorhanden ist @@ -50,22 +50,27 @@ function App() { console.log("Jwt is expired") return; } - + console.log("Token is there and valid") // JWT ist vorhanden und gültig setIsLoggedIn(true); }, [location.pathname]); + const handleLogout = async () => { + deleteJwtInCookie(); + setIsLoggedIn(false); + }; + return ( <div className="App"> - {isLoggedIn ? <Navbar /> : <NavbarRegistrationAndLogin />} + {isLoggedIn ? <Navbar onLogout={handleLogout} /> : <NavbarRegistrationAndLogin />} <Routes> <Route path="/" element={<Home />} /> <Route path="/garten" element={<Garten />} /> <Route path="/wunschliste" element={<Wunschliste />} /> <Route path="/suchen" element={<Suche />} /> <Route path="/pflanze/:plantId" element={<PlantDetails />} /> - <Route path="/api/v1/auth/register" element={<Register />} /> - <Route path="/api/v1/auth/authenticate" element={<Login />} /> + <Route path="/register" element={<Register />} /> + <Route path="/login" element={<Login />} /> </Routes> </div> diff --git a/growbros-frontend/src/components/Navbar.tsx b/growbros-frontend/src/components/Navbar.tsx index 94f5d15..5b592ac 100644 --- a/growbros-frontend/src/components/Navbar.tsx +++ b/growbros-frontend/src/components/Navbar.tsx @@ -1,9 +1,16 @@ import {NavLink} from "react-router-dom"; import "../stylesheets/Navbar.css"; import "font-awesome/css/font-awesome.min.css"; -import {deleteJwt} from "../jwt/Cookies.ts"; +// @ts-ignore +function Navbar({ onLogout }) { + + const handleLogout = () => { + if (onLogout) { + onLogout(); + } + }; + -function Navbar() { return ( <nav> <ul> @@ -28,7 +35,7 @@ function Navbar() { </NavLink> </li> <li> - <NavLink to="/" onClick={deleteJwt}>Abmelden</NavLink> + <NavLink to="/" onClick={handleLogout}>Abmelden</NavLink> </li> </div> </ul> diff --git a/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx b/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx index ff89b21..f8584f0 100644 --- a/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx +++ b/growbros-frontend/src/components/NavbarRegistrationAndLogin.tsx @@ -11,11 +11,11 @@ function NavbarRegistrationAndLogin() { </li> <div className="navLinks"> <li> - <NavLink to="/api/v1/auth/register">Registrieren</NavLink> + <NavLink to="/register">Registrieren</NavLink> </li> <li> - <NavLink to="/api/v1/auth/authenticate">Login</NavLink> + <NavLink to="/login">Login</NavLink> </li> </div> </ul> diff --git a/growbros-frontend/src/jwt/Cookies.ts b/growbros-frontend/src/jwt/Cookies.ts index 61b647c..91f4f00 100644 --- a/growbros-frontend/src/jwt/Cookies.ts +++ b/growbros-frontend/src/jwt/Cookies.ts @@ -1,9 +1,4 @@ - export function setCookie(name: string, value: any, expirationDate: Date){ - - /*const date = new Date(); - const exDate = new Date(); - exDate.setTime(date.getTime() + (daysToLive * 24 * 60 * 60 * 1000));*/ let expires = "expires=" + expirationDate; document.cookie = `${name}=${value}; ${expires}` } @@ -21,7 +16,8 @@ export function getCookie(name: string | any[]){ }) return result; } -export function deleteJwt(){ +export function deleteJwtInCookie(){ + document.cookie = `Jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`; console.log("deleted Cookie ") } diff --git a/growbros-frontend/src/pages/Register.tsx b/growbros-frontend/src/pages/Register.tsx index 3af1448..2ee6d90 100644 --- a/growbros-frontend/src/pages/Register.tsx +++ b/growbros-frontend/src/pages/Register.tsx @@ -2,7 +2,7 @@ import "../stylesheets/Register.css"; import {FormEvent, useState} from "react"; import {setCookie} from "../jwt/Cookies.ts"; import { useNavigate } from 'react-router-dom'; -import jwt_decode from 'jsonwebtoken'; +import { jwtDecode } from 'jwt-decode'; function Register() { @@ -37,11 +37,12 @@ function Register() { )} ) const {token} = await res.json(); + console.log("Jwt Token not decoded"+token); + const decodedToken = jwtDecode(token); // @ts-ignore - const decodedToken = jwt_decode(token); - const expirationDate = new Date(decodedToken.exp * 1000); + const expirationDate = new Date(decodedToken.exp * 1000); //*1000 Anzahl der Sekunden seit 1.1.1970 darstellt - JS arbeitet jedoch normalerweise mit Millisekunden setCookie("Jwt",token, expirationDate); - console.log(token); + console.log("Jwt decoded " + decodedToken); navigate('/'); } catch (error:any) { console.error('Fehler bei der Anmeldung:', error.message); -- GitLab