Merge pull request #142 from mcode/login-bug

Login bug

Author: plarocque4

frontend/src/App.tsx

@@ -6,6 +6,8 @@ import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
 import './App.css';
 import DoctorOrders from './views/DoctorOrders/DoctorOrders';
 import Login from './views/Login/Login';
+import ProtectedRoute from './components/ProtectedRoute';
+import { AuthProvider } from './contexts/AuthContext';
 import axios from 'axios';
 
 axios.defaults.baseURL = process.env.REACT_APP_PIMS_BACKEND_URL
@@ -17,36 +19,44 @@ const basename = process.env.REACT_APP_VITE_BASE?.replace(/\/$/, '') || '';
 
 function App() {
   return (
-    <Box>
-      <Router basename={basename}>
-        <div className="App">
-          <Container className="NavContainer" maxWidth="xl">
-            <div className="containerg">
-              <div className="logo">
-                <LocalPharmacyIcon
-                  sx={{ color: 'white', fontSize: 40, paddingTop: 2.5, paddingRight: 2.5 }}
-                />
-                <h1>Pharmacy</h1>
+    <AuthProvider>
+      <Box>
+        <Router basename={basename}>
+          <div className="App">
+            <Container className="NavContainer" maxWidth="xl">
+              <div className="containerg">
+                <div className="logo">
+                  <LocalPharmacyIcon
+                    sx={{ color: 'white', fontSize: 40, paddingTop: 2.5, paddingRight: 2.5 }}
+                  />
+                  <h1>Pharmacy</h1>
+                </div>
+                <div className="links">
+                  <Link className="NavButtons" to="/DoctorOrders">
+                    <Button variant="contained">Doctor Orders</Button>
+                  </Link>
+                  <Link className="NavButtons" to="/Login">
+                    <Button variant="contained">Login</Button>
+                  </Link>
+                </div>
               </div>
-              <div className="links">
-                <Link className="NavButtons" to="/DoctorOrders">
-                  <Button variant="contained">Doctor Orders</Button>
-                </Link>
-                <Link className="NavButtons" to="/Login">
-                  <Button variant="contained">Login</Button>
-                </Link>
-              </div>
-            </div>
-          </Container>
-        </div>
-        <Routes>
-          {/* Initial load to login page, will need to change to check for user authentication to load to correct page  */}
-          <Route path="/" element={<Login />} />
-          <Route path="/Login" element={<Login />}></Route>
-          <Route path="/DoctorOrders" element={<DoctorOrders />}></Route>
-        </Routes>
-      </Router>
-    </Box>
+            </Container>
+          </div>
+          <Routes>
+            <Route path="/" element={<Login />} />
+            <Route path="/Login" element={<Login />} />
+            <Route
+              path="/DoctorOrders"
+              element={
+                <ProtectedRoute>
+                  <DoctorOrders />
+                </ProtectedRoute>
+              }
+            />
+          </Routes>
+        </Router>
+      </Box>
+    </AuthProvider>
   );
 }
 

frontend/src/components/ProtectedRoute.tsx

@@ -0,0 +1,16 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/Login" replace />;
+  }
+
+  return <>{children}</>;
+}

frontend/src/config.json

@@ -1,6 +1,6 @@
 {
   "realm": "ClientFhirServer",
   "client": "pims-login",
-  "auth": "http://localhost:8180/auth",
+  "auth": "http://localhost:8180",
   "scopeId": "pims"
 }

frontend/src/contexts/AuthContext.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState } from 'react';
+
+interface AuthContextType {
+  token: string | null;
+  login: (token: string) => void;
+  logout: () => void;
+  isAuthenticated: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [token, setToken] = useState<string | null>(null);
+
+  const login = (newToken: string) => {
+    setToken(newToken);
+  };
+
+  const logout = () => {
+    setToken(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ token, login, logout, isAuthenticated: Boolean(token) }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+  return context;
+}

frontend/src/views/Login/Login.tsx

@@ -3,10 +3,14 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import { Avatar, Box, Button, Container, CssBaseline, TextField, Typography } from '@mui/material';
 import axios from 'axios';
 import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
 import config from '../../config.json';
 
 export default function Login() {
-  const [token, setToken] = React.useState<string | null>(null);
+  const { login, isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
@@ -23,16 +27,16 @@ export default function Login() {
           withCredentials: true
         })
         .then(result => {
-          // do something with the token
           const scope = result.data.scope.split(' ').includes(config.scopeId);
           if (scope) {
-            setToken(result.data.access_token);
+            login(result.data.access_token);
+            navigate('/DoctorOrders');
           } else {
             console.error('Unauthorized User');
           }
         })
         .catch(err => {
-          if (err.response.status === 401) {
+          if (err.response?.status === 401) {
             console.error('Unknown user');
           } else {
             console.error(err);
@@ -52,7 +56,7 @@ export default function Login() {
           alignItems: 'center'
         }}
       >
-        {token ? (
+        {isAuthenticated ? (
           <Avatar sx={{ m: 1, bgcolor: 'secondary.success' }}>
             <LockOpenOutlinedIcon />
           </Avatar>