refactor auth

Author: Bennyli1995

Diff for: .DS_Store

@@ -12,6 +12,7 @@
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@react-google-maps/api": "^2.19.2",
+    "@types/auth0": "^3.3.10",
     "axios": "^1.6.5",
     "emailjs-com": "^3.2.0",
     "react": "^18.2.0",

Diff for: frontend/package-lock.json

@@ -19,7 +19,7 @@ const App: React.FC = () => {
     <BrowserRouter>
       <Auth0ProviderWithHistory>
         <div className="flex flex-col h-screen">
-          <Header /> {/* This will always be displayed */}
+          <Header />
           <main className="flex-grow">
             <Routes>
               <Route
@@ -50,7 +50,7 @@ const App: React.FC = () => {
               <Route path="/worker/:workerId" element={<WorkerDetailsPage />} />
               <Route path="/contact" element={<ContactForm />} />
               <Route path="/query-results" element={<QueryResultsPage />} />
-              <Route path = "/login" element={<LoginPage />} />
+              <Route path="/login" element={<LoginPage />} />
             </Routes>
           </main>
           <Footer />

Diff for: frontend/package.json

@@ -1,16 +1,27 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
-import { Auth0Provider } from "@auth0/auth0-react";
+import { Auth0Provider, AppState } from "@auth0/auth0-react";
 
-const Auth0ProviderWithHistory: React.FC = ({ children }) => {
+interface Auth0ProviderWithHistoryProps {
+  children: ReactNode;
+}
+
+const Auth0ProviderWithHistory: React.FC<Auth0ProviderWithHistoryProps> = ({
+  children,
+}) => {
   const navigate = useNavigate();
 
-  const onRedirectCallback = (appState: any) => {
+  const onRedirectCallback = (appState?: AppState) => {
     navigate(appState?.returnTo || "/home");
   };
 
-  const domain = import.meta.env.VITE_AUTH0_DOMAIN;
-  const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
+  const domain = import.meta.env.VITE_AUTH0_DOMAIN as string;
+  const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID as string;
+
+  if (!domain || !clientId) {
+    console.error("Auth0 environment variables are not set");
+    return null;
+  }
 
   return (
     <Auth0Provider

Diff for: frontend/src/App.tsx

@@ -1,19 +1,27 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { useAuth0 } from "@auth0/auth0-react";
 import { Navigate } from "react-router-dom";
 
-const ProtectedRoute = ({ children }) => {
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
   const { isAuthenticated, isLoading } = useAuth0();
 
   if (isLoading) {
-    return <div>Loading...</div>; // or any loading indicator you prefer
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
+      </div>
+    );
   }
 
   if (!isAuthenticated) {
-    return <Navigate to="/login" />;
+    return <Navigate to="/login" replace />;
   }
 
-  return children;
+  return <>{children}</>;
 };
 
 export default ProtectedRoute;

Diff for: frontend/src/assets/OldCarpentry.png

@@ -128,7 +128,8 @@ const WorkerDetails: React.FC = () => {
                 {worker.first_name} {worker.last_name}
               </h1>
               <div className="text-gray-500">
-                {worker.trade == "Electrical" ? (<span>Electrician</span>
+                {worker.trade == "Electrical" ? (
+                  <span>Electrician</span>
                 ) : (
                   <span>Plumber</span>
                 )}

Diff for: frontend/src/assets/OldElectrical.png

@@ -1,13 +1,15 @@
 {
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,