Amann

frontend/src/App.js

@@ -1,20 +1,25 @@
 import "./App.css";
+import AuthProvider from "./context/AuthProvider";
+import Routes from "./routes/routes";
 import Login from "./components/login/login";
 import Homepage from "./components/homepage/homepage";
 import WaitList from "./components/waitlist/waitlist";
 import Triage from "./components/triage/triage";
 import TriageForm from "./components/triage/form";
-import { Routes, Route } from "react-router-dom";
+// import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
     <>
-      <Routes>
+    <AuthProvider>
+      <Routes/>
+    </AuthProvider>
+      {/* <Routes>
         <Route path="/" element={<Login />} />
         <Route path="/homepage" element={<Homepage />} />
         <Route path="/triage" element={<Triage />} />
         <Route path="/waitlist" element={<WaitList />} />
-      </Routes>
+      </Routes> */}
     </>
   );
 }

frontend/src/components/homepage/homepage.js

@@ -4,18 +4,25 @@ import "./items.css"
 import logo from "./medLogo.svg";
 import { useNavigate } from "react-router-dom";
 import {Button} from '@mui/material';
+import { useAuth } from "../../context/AuthProvider";
 
 
 function Homepage() {
   const navigate = useNavigate();
-
+  const {setToken} = useAuth();
   const handleWaitlist = () => {
     navigate("/waitlist");
   };
 
   const handleTriage = () => {
     navigate("/triage");
   };
+  const handleLogout =()=>{
+
+    setToken();
+    setTimeout(navigate("/login", {replace:true}), 3000);
+
+}
 
   return (
     <div className="HomePage">
@@ -30,6 +37,9 @@ function Homepage() {
         <div className='link'>
           <Button variant='contained' onClick={handleTriage}>Triage</Button>
         </div>
+        <div className='link'>
+          <Button variant='contained' onClick={handleLogout}>Logout</Button>
+        </div>
       </div>
     </div>
   );

frontend/src/components/login/login.js

@@ -5,6 +5,7 @@ import { useState } from "react";
 import axios from "axios";
 import { TextField, Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../context/AuthProvider";
 
 function Login() {
   const [username, setUserName] = useState("");
@@ -25,6 +26,7 @@ function Login() {
     }
   }
 
+  const {setToken} = useAuth();
   const navigate = useNavigate();
 
   const handleLogin = async () => {
@@ -33,10 +35,15 @@ function Login() {
 
     if (res.status === 200) {
       console.log(res.data.auth_token);
-      navigate("/homepage");
-    } else {
-      navigate("/")
-    }
+      setToken(res.data.auth_token);
+      //navigate("/homepage");     
+      navigate("/", {replace: true});
+
+    } 
+    // else {
+    //   // navigate("/")
+
+    // }
   };
 
   return (

frontend/src/context/AuthProvider.js

@@ -0,0 +1,54 @@
+import axios from "axios";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+const AuthContext = createContext();
+
+
+
+const AuthProvider = ({ children }) => {
+    // State to hold the authentication token
+    const [token, setToken_] = useState(localStorage.getItem("token"));
+
+    // Function to set the authentication token
+    const setToken = (newToken) => {
+      setToken_(newToken);
+    };
+
+    useEffect(() => {
+      if (token) {
+        axios.defaults.headers.common["Authorization"] = "Bearer " + token;
+        localStorage.setItem('token',JSON.stringify(token));
+      } else {
+        delete axios.defaults.headers.common["Authorization"];
+        localStorage.removeItem('token')
+      }
+    }, [token]);
+
+    // Memoized value of the authentication context
+    const contextValue = useMemo(
+      () => ({
+        token,
+        setToken,
+      }),
+      [token]
+    );
+
+    // Provide the authentication context to the children components
+    return (
+      <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
+    );
+  };
+
+  export const useAuth = () => {
+    return useContext(AuthContext);
+  };
+
+  export default AuthProvider;
+
+

frontend/src/index.js

@@ -8,9 +8,10 @@ import { BrowserRouter } from "react-router-dom";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <BrowserRouter>
+    <App/>
+    {/* <BrowserRouter>
        <App />
-    </BrowserRouter>
+  </BrowserRouter> */}
   </React.StrictMode>
 );
 

frontend/src/routes/protectedRoute.js

@@ -0,0 +1,15 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuth } from "../context/AuthProvider";
+
+export const ProtectedRoute = () => {
+    const { token } = useAuth();
+
+    // Check if the user is authenticated
+    if (!token) {
+      // If not authenticated, redirect to the login page
+      return <Navigate to="/login" />;
+    }
+
+    // If authenticated, render the child routes
+    return <Outlet />;
+  };

frontend/src/routes/routes.js

@@ -0,0 +1,55 @@
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { useAuth } from "../context/AuthProvider";
+import { ProtectedRoute } from "./protectedRoute";
+import Homepage from "../components/homepage/homepage";
+import Login from "../components/login/login";
+import Triage from "../components/triage/triage";
+import WaitList from "../components/waitlist/waitlist";
+const Routes = () => {
+  const { token } = useAuth();
+
+  const routesForAuthenticatedOnly = [
+    {
+      path: "/",
+      element: <ProtectedRoute />, // Wrap the component in ProtectedRoute
+      children: [
+        {
+          path: "/",
+          element: <Homepage />,
+        },
+        {
+          path: "/waitlist",
+          element: <WaitList />,
+        },
+        {
+          path: "/triage",
+          element: <Triage/>
+        },
+        {
+            path: "/login",
+            element: <Login />,
+          },
+      ],
+    },
+  ];
+
+  const routesForNotAuthenticatedOnly = [
+    {
+      path: "/login",
+      element: <Login />,
+    },
+  ];
+
+
+  const router = createBrowserRouter([
+    ...(!token ? routesForNotAuthenticatedOnly : []),
+    ...routesForAuthenticatedOnly,
+
+  ]);
+
+  // Provide the router configuration using RouterProvider
+  return <RouterProvider router={router} />;
+};
+
+export default Routes;
+

images/Authentication state machine.drawio

@@ -0,0 +1,55 @@
+<mxfile host="app.diagrams.net" modified="2023-11-13T03:37:07.998Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/119.0" etag="1FiQZV8BOWFi-8lM-SzJ" version="22.1.0" type="github">
+  <diagram name="Page-1" id="GEsOoOUjB-0XXsFePJ4T">
+    <mxGraphModel dx="984" dy="634" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="uloRZhAETcBwnvcyOWuM-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="QRWBNjg0uq6f8QWioJVk-1" target="QRWBNjg0uq6f8QWioJVk-11" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="QRWBNjg0uq6f8QWioJVk-1" value="" style="ellipse;fillColor=strokeColor;html=1;" parent="1" vertex="1">
+          <mxGeometry x="150" y="150" width="30" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="QRWBNjg0uq6f8QWioJVk-2" value="" style="ellipse;html=1;shape=endState;fillColor=strokeColor;" parent="1" vertex="1">
+          <mxGeometry x="385" y="610" width="30" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="uloRZhAETcBwnvcyOWuM-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="QRWBNjg0uq6f8QWioJVk-11" target="uloRZhAETcBwnvcyOWuM-3" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="QRWBNjg0uq6f8QWioJVk-11" value="Start" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="330" y="135" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="Dk2sr2DT5drYaE7gj0jx-2" value="Submit valid credentials" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="uloRZhAETcBwnvcyOWuM-3">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="360" y="480" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="uloRZhAETcBwnvcyOWuM-3" value="Waiting for submission" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="330" y="290" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="uloRZhAETcBwnvcyOWuM-9" value="&lt;div&gt;Open Auth Portal&lt;/div&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="1" vertex="1">
+          <mxGeometry x="190" y="135" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="uloRZhAETcBwnvcyOWuM-15" value="&lt;div&gt;Collect login data from user&lt;/div&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="1" vertex="1">
+          <mxGeometry x="390" y="235" width="170" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="Dk2sr2DT5drYaE7gj0jx-1" value="&lt;div&gt;Submit bad credentials&lt;/div&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0.858;entryY=1.067;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="uloRZhAETcBwnvcyOWuM-3" target="uloRZhAETcBwnvcyOWuM-3">
+          <mxGeometry x="-0.2201" y="10" relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="510" y="305" />
+              <mxPoint x="510" y="370" />
+              <mxPoint x="433" y="370" />
+            </Array>
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="Dk2sr2DT5drYaE7gj0jx-4" value="Direct to homepage" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="Dk2sr2DT5drYaE7gj0jx-3" target="QRWBNjg0uq6f8QWioJVk-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Dk2sr2DT5drYaE7gj0jx-3" value="Logged in" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="340" y="480" width="120" height="60" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>