faulty - sync commit

Author: marsian83

client/src/App.tsx

@@ -12,14 +12,17 @@ import HomePage from "./pages/HomePage/HomePage";
 import AuthPage from "./pages/AuthPage/AuthPage";
 import { useEffect } from "react";
 import { getTokenFromLocalStorage } from "./utils";
-import api, { setJwt } from "./api";
+import api, { clearJwt, setJwt } from "./api";
+import ProtectedRoute from "./common/ProtectedRoute";
+import DatabasesPage from "./pages/DatabasesPage/DatabasesPage";
 
 export default function App() {
   const router = createBrowserRouter(
     createRoutesFromElements(
       <Route path="/" element={<Root />}>
         <Route index element={<HomePage />} />
         <Route path="/auth" element={<AuthPage />} />
+        <ProtectedRoute path="/dashboard" element={<DatabasesPage />} />
       </Route>
     )
   );
@@ -45,7 +48,8 @@ async function checkAndValidateLocalToken() {
   const token = getTokenFromLocalStorage();
   if (token) {
     if (await api.validateToken(token)) {
-      setJwt(token);
+      return setJwt(token);
     }
+    clearJwt();
   }
 }

client/src/api.ts

@@ -28,6 +28,8 @@ export function clearJwt() {
 }
 
 const api = {
+  client: client,
+
   async login(username: string, password: string) {
     const userData = (
       await client.post(
@@ -71,10 +73,10 @@ const api = {
     }
   },
 
-  logout() {
+  async logout() {
     clearTokenFromLocalStorage();
     clearJwt();
-    client.delete("/auth/logout");
+    await client.delete("/auth/logout");
     window.location.reload();
   },
 

client/src/common/ProtectedRoute.tsx

@@ -0,0 +1,29 @@
+import { ReactNode, useEffect } from "react";
+import { Route, useNavigate } from "react-router-dom";
+import api from "../api";
+
+interface ProtectedRouteProps {
+  element: ReactNode;
+  path: string;
+}
+
+export default function ProtectedRoute(props: ProtectedRouteProps) {
+  const authTokenPresent = api.client.defaults.headers["Authorization"] != null;
+
+  return (
+    <Route
+      element={authTokenPresent ? props.element : <RedirectToAuth />}
+      path={props.path}
+    />
+  );
+}
+
+function RedirectToAuth() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    navigate("/auth");
+  });
+
+  return <></>;
+}

client/src/pages/AuthPage/AuthPage.tsx

@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import Login from "./components/Login";
 import Register from "./components/Register";
+import api from "../../api";
 
 export default function AuthPage() {
   return (
@@ -9,9 +10,19 @@ export default function AuthPage() {
         <Register />
         <Login />
       </div>
-      <Link to="/" className="bg-black px-4 py-1 rounded-md text-white">
-        back
-      </Link>
+      <div className="flex justify-center gap-x-8">
+        <Link to="/" className="bg-black px-4 py-1 rounded-md text-white">
+          back
+        </Link>
+        <button
+          onClick={async () => {
+            await api.logout();
+          }}
+          className="bg-black px-4 py-1 rounded-md text-white"
+        >
+          Logout
+        </button>
+      </div>
     </>
   );
 }

client/src/pages/DatabasesPage/DatabasesPage.tsx

@@ -0,0 +1,3 @@
+export default function DatabasesPage() {
+  return <div>DatabasesPage</div>;
+}

run.bat

@@ -1,5 +1,7 @@
+@echo off
 cd client
 start cmd /c yarn dev
 cd ../server
 start cmd /c yarn dev
 cd ..
+@echo on

server/src/middleware/auth.ts

@@ -1,6 +1,7 @@
 import { Express, Request, Response, NextFunction } from "express";
 import { getAuthToken } from "../../utils";
 import jwt from "jsonwebtoken";
+import { User } from "../types/custom";
 
 export function authorisedOnly(
   req: Request,
@@ -13,7 +14,9 @@ export function authorisedOnly(
 
   jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
     if (err) return res.sendStatus(403);
-    req.user = user as string;
+    if (typeof user === "object") {
+      if (req.user?.id && req.user.username) req.user = user as User;
+    }
     next();
   });
 }

server/src/routes/auth.ts

@@ -43,17 +43,18 @@ router.post("/login", unauthorisedOnly, async (req, res) => {
     return res.sendStatus(401);
   }
 
-  const accessToken = generateAccessToken(userData);
+  const user = { id: userData.id, username: userData.username };
+
+  const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, {
+    expiresIn: "20h",
+  });
+
   // const refreshToken = jwt.sign(user, process.env.REFRESH_TOKEN_SECRET);
   // refreshTokens.push(refreshToken);
 
   res.status(200).json({ accessToken: accessToken });
 });
 
-function generateAccessToken(user: { username: string }) {
-  return jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, { expiresIn: "20h" });
-}
-
 router.post("/register", unauthorisedOnly, async (req, res) => {
   const { username, email, password } = req.body;
   try {

server/src/routes/user.ts

@@ -0,0 +1,11 @@
+import express from "express";
+import { authorisedOnly } from "../middleware/auth";
+
+const router = express.Router();
+
+router.get("/name", authorisedOnly, (req, res) => {
+  if (!req.user) return res.sendStatus(401);
+  res.json({ name: req.user.username });
+});
+
+export default router;

server/src/types/custom.d.ts

@@ -4,7 +4,5 @@ export type Language = (typeof SUPPORTED_LANGUAGES)[number];
 
 export type User = {
   id: number;
-  name: string;
-  surname: string;
-  authenticationToken?: string | null;
+  username: string;
 };