Add backend, Implement Token validation

frontend/src/Login.tsx

@@ -7,18 +7,26 @@ export const Login: React.FC = () => {
     const tokenStorage = React.useContext(TokenContext);
 
     return <>
-        <h1>gib token</h1>
+        <h1>
+            gib token
+        </h1>
         <form onSubmit={(e) => {
             e.preventDefault();
             tokenStorage.set(inputState);
         }}>
+            <label htmlFor="token">Token: </label>
             <input
                 type="text"
+                id="token"
+                placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
                 value={inputState}
                 onChange={(e) => setInputState(e.target.value)}>
             </input>
             <button type="submit"> Submit </button>
         </form>
+        <p>
+            The token will be put into your local storage.
+        </p>
     </>
 }
 

frontend/src/tokenStorage.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Login from "./Login";
 
 const LOCAL_STORAGE_KEY = "token";
+const VALIDATE_ENDPOINT = "api/validate";
 
 export type Token = string | null;
 export type TokenStorage = {
@@ -19,21 +20,41 @@ export const TokenContext = React.createContext<TokenStorage>({
 export const TokenProvider: React.FC = (props) => {
     const [token, setToken] = useState<Token>(localStorage.getItem(LOCAL_STORAGE_KEY));
 
-    return <TokenContext.Provider value={{
-        token: token,
-        set: (newToken) => {
-            localStorage.setItem(LOCAL_STORAGE_KEY, newToken);
-            setToken(newToken);
-        },
-        reset: () => {
-            localStorage.removeItem(LOCAL_STORAGE_KEY);
-            setToken(null);
-        }
-    }}>
+    const tokenStorage = useMemo(() => {
+        return {
+            token: token,
+            set: (newToken: string) => {
+                localStorage.setItem(LOCAL_STORAGE_KEY, newToken);
+                setToken(newToken);
+            },
+            reset: () => {
+                localStorage.removeItem(LOCAL_STORAGE_KEY);
+                setToken(null);
+            },
+        };
+    }, [token, setToken]);
+
+    useEffect(() => {
+        (async () => {
+            if (tokenStorage.token) {
+                const response = await fetch(`${VALIDATE_ENDPOINT}?` + new URLSearchParams({
+                    token: tokenStorage.token,
+                }));
+
+                const data = await response.json() as { "success": boolean };
+
+                if (!data.success) {
+                    tokenStorage.reset();
+                }
+            }
+        })();
+    }, [tokenStorage]);
+
+    return <TokenContext.Provider value={tokenStorage}>
         {
             token
-            ? props.children
-            : <Login />
+                ? props.children
+                : <Login />
         }
     </TokenContext.Provider>
 }