feat: simple OAuth2 login with JWT token

src/Analysis.tsx

@@ -59,6 +59,7 @@ export default function Analysis() {
   const [showControlPanel, setShowControlPanel] = useState(false);
   const [loading, setLoading] = useState(true);
 
+  const auth = useAuthContext();
   // Function to generate and fetch the graph image
   async function loadImage() {
     setLoading(true);
@@ -67,8 +68,7 @@ export default function Analysis() {
         setImage(data.image);
         setLoading(false);
       }).catch((e) => {
-        const { checkAuth } = useAuthContext();
+        auth.doLogin();
-        checkAuth();
       })
   }
 
@@ -89,9 +89,6 @@ export default function Analysis() {
     }
   }
 
-  const { user } = useAuthContext()!
-  console.log(`logged in as ${user.username}`);
-
   return (
     <div className="stack column dropdown">
       <button onClick={() => setShowControlPanel(!showControlPanel)}>

src/App.tsx

@@ -1,10 +1,10 @@
 import Analysis from "./Analysis";
 import "./App.css";
-import { AuthProvider } from "./AuthContext";
 import Footer from "./Footer";
 import Header from "./Header";
 import Rankings from "./Rankings";
 import { BrowserRouter, Routes, Route } from "react-router";
+import { SessionProvider } from "./Session";
 
 function App() {
   //const [data, setData] = useState({ nodes: [], links: [] } as SociogramData);
@@ -19,9 +19,9 @@ function App() {
       <Routes>
         <Route index element={<Rankings />} />
         <Route path="/analysis" element={
-          <AuthProvider>
+          <SessionProvider>
             <Analysis />
-          </AuthProvider>
+          </SessionProvider>
         } />
       </Routes>
       <Footer />

src/Rankings.tsx

@@ -334,7 +334,8 @@ export default function Rankings() {
             </button>
           </div>
 
-          <span className="grey">assign as many or as few players as you want and don't forget to <b>submit</b> (💾) when you're done :)</span>
+          <span className="grey">assign as many or as few players as you want<br />
+            and don't forget to <b>submit</b> (💾) when you're done :)</span>
 
           <div id="Chemistry" className="tabcontent">
             <Chemistry {...{ user, players }} />

src/api.ts

@@ -1,7 +1,3 @@
-import { useContext } from "react";
-import useAuthContext from "./AuthContext";
-import { createCookie } from "react-router";
-
 export const baseUrl = import.meta.env.VITE_BASE_URL as string;
 export const token = () => localStorage.getItem("access_token") as string;
 
@@ -90,15 +86,8 @@ export const login = (req: LoginRequest) => {
     method: "POST", headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     }, body: new URLSearchParams(req).toString()
-  }).then(resp => resp.json() as unknown as Token).then(token => token ? localStorage.setItem("access_token", token.access_token) : console.log("token not acquired")).catch((e) => console.log("catch error " + e + " in login"));
+  }).then(resp => resp.json() as Promise<Token>).then(token => token ? localStorage.setItem("access_token", token.access_token) : console.log("token not acquired")).catch((e) => console.log("catch error " + e + " in login"));
-}
+  return Promise<void>
-
-export const cookielogin = (req: LoginRequest) => {
-  fetch(`${baseUrl}api/token`, {
-    method: "POST", headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    }, body: new URLSearchParams(req).toString()
-  }).then(resp => { createCookie(resp.headers.getSetCookie()) }).catch((e) => console.log("catch error " + e + " in login"));
 }
 
 export const logout = () => localStorage.removeItem("access_token");