code.tsx

const useAuth = (): AuthContextInterface => {
    const context = useContext(AuthContext);
  
    if (!context) {
      throw new Error('useAuth must be used within a AuthProvider');
    }
  
    return context;
  };

const PrivateRoute: React.FC<{ children: ReactElement }> = ({ children }) => {
  const { authService, isLoading } = useAuth();

  return children;
};

export const AppRoutes = () => {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <PrivateRoute>
            <Base />
          </PrivateRoute>
        }
      >
        <Route index element={<Home />} />
        <Route path="dashboard" element={<Home />} />
      </Route>
    </Routes>
  );
};


export const AuthProvider: React.FC<AuthProviderProps> = ({
    children,
    authService,
}) => {
  // Use the useNavigate hook to get the navigate function from the router context
  const navigate = useNavigate();

  const [user, setUser] = useState({});
  const [loading, setLoading] = useState(true);

  return (
    <AuthContext.Provider
      value={{
        authService,
        user,
        isLoading: () => loading,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
}

const authService = new AuthService({});
  
function App() {
    return (
      <BrowserRouter>
        <AuthProvider authService={authService}>
          <AppRoutes />
        </AuthProvider>
      </BrowserRouter>
    );
}