jwt auth workflow

client/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.3.0",
+    "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

client/src/App.jsx

@@ -1,51 +1,73 @@
 import { useEffect, useState } from 'react';
-import Home from './pages/Home'
+import jwt_decode from "jwt-decode";
 import API from './util/API';
-import './App.css'
 import Auth from './pages/Auth';
+import './App.css'
 
 function App() {
   const [user, setUser] = useState(null);
-  const [contents, setContents] = useState();
+  const [contents, setContents] = useState(<></>);
 
-  useEffect(() => {
-    (async() => {
-      const res = await API.validate();
-      console.log(res);
+  async function handleLogin(info) {
+    if (!info.email || !info.password) return;
 
-      if (res.user) {
-        setUser(res.user);
-      } else {
-        setUser(null);
-      }
-    })();
-  }, [])
+    const response = await API.login(info);
+    console.log(response);
 
-  useEffect(() => {
-    setContents(user ? <Home user={user} handleLogout={handleLogout} /> : <Auth handleLogin={handleLogin} handleRegister={handleRegister} />);
-  }, [user]);
+    const user = jwt_decode(response.token);
+    console.log(user);
+
+    localStorage.setItem('user', JSON.stringify(user));
+    localStorage.setItem('token', response.token);
+  }
 
   async function handleLogout() {
     await API.logout();
-    setUser(null);
+    localStorage.removeItem("user");
+    localStorage.removeItem("token");
   }
 
-  async function handleLogin(info) {
-    const res = await API.login(info);
-    if (res.data) setUser(res.data);
-    return;
+  async function handleRegister(register) {
+      if (!register.username || !register.email || !register.password) return;
+      await API.register(register);
   }
 
-  async function handleRegister(info) {
-    const res = await API.register(info);
-    console.log(res);
-    return;
-  }
+  useEffect(() => {
+    let item = localStorage.getItem('user');
+    if (item) {
+      item = JSON.parse(item);
+      setUser(item.user);
+    }
+  }, [])
+
+  useEffect(() => {
+    let protectedData;
+
+    if (user) {
+      (async() => {
+        protectedData = await API.getItems();
+        console.log(protectedData);
+      })();
+    }
+
+    setContents(
+      user ? (
+        <div>
+          <p>Welcome, {user.username}!</p>
+          <div>
+
+          </div>
+          <button onClick={handleLogout}>Log Out</button>
+        </div>
+      ) : (
+        <Auth handleLogin={handleLogin} handleRegister={handleRegister} />
+      )
+    )
+  }, [user])
 
   return (
     <div className="App">
       <h1>Auth Testing</h1>
-
       { contents }
     </div>
   )

client/src/pages/Auth.jsx

@@ -1,52 +1,17 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { LoginForm, RegisterForm } from "../components/Form";
 
 function Auth({ handleLogin, handleRegister }) {
-    const [info, setInfo] = useState({ username: "", email: "", password: "" });
-    const [mode, setMode] = useState("login");
-    const [form, setForm] = useState(<LoginForm info={info} setInfo={setInfo} />);
-    const [button, setButton] = useState(
-        <>
-        <button onClick={() => handleLogin(info)}>Login</button>
-        <aside>Not registered? Click <a onClick={swapForm}>here</a> to register</aside>
-        </>
-    );
-
-    useEffect(() => {
-        console.log(mode);
-    }, [info]);
-
-    function swapForm() {
-        if (mode === "register") {
-            setMode("login");
-            setForm(<LoginForm info={info} setInfo={setInfo} />);
-            setButton(
-                <>
-                <button onClick={() => handleLogin(info)}>Login</button>
-                <aside>Not registered? Click <a onClick={swapForm}>here</a> to register</aside>
-                </>
-            )
-        } else {
-            setMode("register");
-            setForm(<RegisterForm info={info} setInfo={setInfo} />);
-            setButton(
-                <>
-                <button onClick={() => handleRegister(info)}>Register</button>
-                <aside>Looking for the login section? Click <a onClick={swapForm}>here</a></aside>
-                </>
-            );
-        }
-    }
+    const [info, setInfo] = useState({ email: "", password: "" });
+    const [register, setRegister] = useState({ username: "", email: "", password: "" })
 
     return (
         <section>
             <LoginForm info={info} setInfo={setInfo} />
             <button onClick={() => handleLogin(info)}>Login</button>
-            {/* <aside>Not registered? Click <a onClick={swapForm}>here</a> to register</aside> */}
 
-            <RegisterForm info={info} setInfo={setInfo} />
-            <button onClick={() => handleRegister(info)}>Register</button>
-            {/* <aside>Looking for the login section? Click <a onClick={swapForm}>here</a></aside> */}
+            <RegisterForm info={register} setInfo={setRegister} />
+            <button onClick={() => handleRegister(register)}>Register</button>
         </section>
     )
 }

client/src/pages/Home.jsx

@@ -5,19 +5,6 @@ function Home({ user, handleLogout }) {
     const [items, setItems] = useState(null);
     console.log(user);
 
-    useEffect(() => {
-        if (user) {
-            (async() => {
-                const myItems = await API.getItems();
-
-                setItems(myItems.map(each => <>{each.id}</>));
-            })();
-        } else {
-            setItems(null);
-        }
-
-    }, [])
-
     async function getStatus() {
         const res = await API.validate();
         console.log(res);

client/src/util/API.js

@@ -1,5 +1,4 @@
-import axiosInstance from './axiosInstance';
-const _api = axiosInstance();
+import { default as _api } from './axiosInstance';
 
 export default class API {
     static async validate() {
@@ -42,7 +41,14 @@ export default class API {
     }
 
     static async getItems() {
-        const response = await _api.get('/app/item');
+        const token = localStorage.getItem("token");
+
+        const response = await _api.get('/app/item', {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": ("Bearer " + token)
+            }
+        });
         return Promise.resolve(response.data);
     }
 }

client/src/util/axiosInstance.js

@@ -2,10 +2,6 @@ import axios from 'axios'
 
 const apiUrl = import.meta.env.VITE_APIURL;
 
-export default function axiosInstance() {
-    if (!apiUrl) {
-        throw new Error("API URL not found");
-    }
-
-    return axios.create({ baseURL: apiUrl });
-}
+export default axios.create({
+    baseURL: "http://localhost:8080"
+})