add protect route

src/App.tsx

@@ -4,7 +4,7 @@ import '@rainbow-me/rainbowkit/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
 import { WagmiProvider } from 'wagmi';
 import {
   AuthenticationStatus,
@@ -27,6 +27,7 @@ import Identifiers from './pages/Identifiers';
 import Permissions from './pages/Permissions';
 import Attestation from './pages/Identifiers/Attestation';
 import Callback from './pages/Callback';
+import ProtectedRoute from './ProtectedRoute';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -119,8 +120,23 @@ const App: React.FC = () => {
               <ThemeProvider theme={theme}>
                 <CssBaseline />
                 <Routes>
-                  <Route path="/auth/login" element={<Login />} />
-                  <Route element={<DefaultLayout />}>
+                  <Route
+                    path="/auth/login"
+                    element={
+                      authStatus === 'authenticated' ? (
+                        <Navigate to="/" replace />
+                      ) : (
+                        <Login />
+                      )
+                    }
+                  />
+                  <Route
+                    element={
+                      <ProtectedRoute>
+                        <DefaultLayout />
+                      </ProtectedRoute>
+                    }
+                  >
                     <Route path="/" element={<Dashboard />} />
                     <Route path="/identifiers" element={<Identifiers />} />
                     <Route

src/ProtectedRoute.tsx

@@ -1,23 +1,27 @@
-import { Navigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
+import { Navigate } from 'react-router-dom';
 import CircularProgress from '@mui/material/CircularProgress';
 import Backdrop from '@mui/material/Backdrop';
-import { useAuth } from './context/authContext';
 
-const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
-  const { isAuthenticated } = useAuth();
-  const [loading, setLoading] = useState(true);
+interface ProtectedRouteProps {
+  children: JSX.Element;
+}
+
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
 
   useEffect(() => {
     const checkAuthStatus = async () => {
-      setLoading(true);
-      setTimeout(() => {
-        setLoading(false);
-      }, 1000);
+      const token = localStorage.getItem('OCI_TOKEN');
+      if (token) {
+        setIsAuthenticated(true);
+      }
+      setLoading(false);
     };
 
     checkAuthStatus();
-  }, [isAuthenticated]);
+  }, []);
 
   if (loading) {
     return (

src/constants.d.ts

@@ -0,0 +1,7 @@
+declare module '../../../contracts/chains/constants' {
+  export const SUPPORTED_CHAINS: {
+    chainId: number;
+    easContractAbi: unknown[];
+    easContractAddress: string;
+  }[];
+}