Added some auth, getting 'The application you attempted to authenticate to is not authorized to use CAS.' upon attempted login. Need to try on VM

Author: ConnerWithAnE

server/src/types/express.d.ts

@@ -1,9 +1,9 @@
-import * as express from "express";
+import { Request } from "express";
 
 declare global {
   namespace Express {
-    interface Request {
-      user?: any; // Adjust the type as needed, e.g., `Record<string, any>` or a custom User type
+    export interface Request {
+      user?: any; // Adjust the type as needed
     }
   }
 }

server/tsconfig.json

@@ -109,5 +109,6 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": ["src/**/*.ts", "tests/**/*.ts"]
+  "include": ["src/**/*.ts", "tests/**/*.ts"],
+  "files": ["src/types/express.d.ts"]
 }

web/src/App.tsx

@@ -1,6 +1,10 @@
 import { useState } from "react";
 import { Route, Routes, BrowserRouter } from "react-router-dom";
 import "./App.css";
+import CASCallback from "./auth/CASCallback";
+import ProtectedRoute from "./auth/ProtectedRoute";
+import UploadPage from "./pages/UploadPage";
+import ModifyPage from "./pages/ModifyPage";
 
 function App() {
     //const [count, setCount] = useState(0);
@@ -9,13 +13,25 @@ function App() {
 
     <BrowserRouter>
       <Routes>
+        {/* Unprotected routes */}
+        <Route path="/cas-callback" element={<CASCallback />} />
+        
+        {/* Protected Routes */}
         <Route 
           path="/upload"
-          //element={}
+          element={
+            <ProtectedRoute>
+                <UploadPage />
+            </ProtectedRoute>
+          }
         ></Route>
         <Route
           path="/modify"
-          //element={}
+          element={
+            <ProtectedRoute>
+                <ModifyPage />
+            </ProtectedRoute>
+          }
         ></Route>   
       </Routes>
 

web/src/auth/CASCallback.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+
+const BACKEND_URL = 'https://localhost:3000'; // Replace with your backend URL
+
+const CASCallback: React.FC = () => {
+    useEffect(() => {
+        // Extract CAS ticket from URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const ticket = urlParams.get('ticket');
+
+        if (ticket) {
+            // Call backend to validate ticket
+            fetch(`${BACKEND_URL}/admin-router/auth/cas-validate?ticket=${ticket}&service=${encodeURIComponent(window.location.origin + '/cas-callback')}`)
+                .then((response) => response.json())
+                .then((data) => {
+                    if (data.token) {
+                        // Store JWT in localStorage or cookies
+                        localStorage.setItem('jwt', data.token);
+                        // Redirect to a protected page or home
+                        window.location.href = '/';
+                    } else {
+                        console.error('CAS validation failed:', data.error);
+                    }
+                })
+                .catch((error) => {
+                    console.error('Error during CAS validation:', error);
+                });
+        } else {
+            console.error('No ticket found in URL');
+        }
+    }, []);
+
+    return (
+      <div>
+        Authenticating with CAS...
+      </div>)
+};
+
+export default CASCallback;

web/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,22 @@
+function redirectToCAS() {
+  const CAS_SERVER = 'https://cas.usask.ca/cas'; 
+  const FRONTEND_URL = 'https://localhost:5173/'; 
+  const serviceURL = `${FRONTEND_URL}/cas-callback`;
+  
+  window.location.href = `${CAS_SERVER}/login?service=${encodeURIComponent(serviceURL)}`;
+}
+
+
+export default function ProtectedRoute({ children }: { children: JSX.Element}) {
+    const token = localStorage.getItem('jwt');
+
+    if (!token) {
+        redirectToCAS(); // Redirect to CAS login if no JWT
+        return null; // Optional: Display a loading spinner while redirecting
+    }
+
+    return children;
+};
+
+
+

web/src/pages/ModifyPage.tsx

@@ -0,0 +1,7 @@
+import "../App.css"
+
+export default function ModifyPage() {
+  return (
+    <div>Modify Page</div>
+  )
+}

web/src/pages/UploadPage.tsx

@@ -0,0 +1,7 @@
+import "../App.css"
+
+export default function UploadPage() {
+  return (
+    <div>Upload Page</div>
+  )
+}