I am working on a dashboard kind of web app but I am stuck and need some help.
I have 2 users, one is admin and other is simple user. dashboard layout is same for both users, only routes are change and so are sidebar menus. I’m getting user info from api, if he is verified, or if he is user or admin, etc.

But I’m stuck while restricting the routes, I’m trying to created protected routes but I can’t get how, can you guys help? Or maybe guide me correct way of doing it? I’m kinda new to web development.

Here is my code

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { AuthProvider } from "./components/context/authcontext.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

App.jsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import DashboardLayout from "./components/layout/dashlayout";
import AdminDashboard from "./pages/admin/dashboard";
import PageNotFoundError from "./pages/404error";
import LoginPage from "./pages/auth/login";
import MyTeamPage from "./pages/admin/myteam";
import EmployeeAnalyticsPage from "./pages/admin/employeeanalytics";
import ScreenshotsPage from "./pages/admin/screenshots";
import UserOverviewPage from "./pages/user/overview";
import UserScreencapturePage from "./pages/user/userscreenshots";
import ProtectedRoute from "./components/context/protectedroutes";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="*" element={<PageNotFoundError />} />
        <Route path="/login" element={<LoginPage />} />
        <Route element={<DashboardLayout />}>
          {/* Admin Routes */}
          <Route element={<ProtectedRoute />}>
            <Route path="/dashboard" element={<AdminDashboard />} />
            <Route path="/myteam" element={<MyTeamPage />} />
            // other route ...
          </Route>

          {/* User Routes */}
          <Route path="/overview" element={<UserOverviewPage />} />
          <Route path="/userscreenshots/" element={<UserScreencapturePage />} />
          <Route path="/myprofile" element={<UserProfilePage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

protectedroutes.jsx

import { useContext } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { AuthContext } from './authcontext';

const ProtectedRoute = ({ children }) => {
  const { isLoggedIn, isUserAdmin, isUserVerified } = useContext(AuthContext);

  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }

  if (!isUserVerified) {
    return (
      <h2>Please verify your email before accessing this page.</h2>
    );
  }

  if (isUserAdmin === false || isUserAdmin === null) {
    return <Navigate to="/404pagenotfound" replace />;
  }

  return children || <Outlet />;
};

export default ProtectedRoute;

authcontext.jsx

import { createContext, useState, useEffect } from "react";
import axiosInstance from "@/lib/apiconfig";

const AuthContext = createContext({
  isLoggedIn: false,
  isUserAdmin: null,
  isUserVerified: null,
  isUserSuspended: null,
  isUserDeleted: null,
  setIsLoggedIn: () => {},
  setIsUserAdmin: () => {},
  setIsUserVerified: () => {},
  setIsUserSuspended: () => {},
  setIsUserDeleted: () => {},
});

const AuthProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isUserAdmin, setIsUserAdmin] = useState(null);
  const [isUserVerified, setIsUserVerified] = useState(null);
  const [isUserSuspended, setIsUserSuspended] = useState(null);
  const [isUserDeleted, setIsUserDeleted] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await axiosInstance.get("userstatus/");
        if (response.status === 200) {
          setIsLoggedIn(true);
          setIsUserAdmin(response.data.is_admin);
          setIsUserVerified(response.data.is_verified);
          setIsUserSuspended(response.data.is_suspended);
          setIsUserDeleted(response.data.is_deleted);
        } else {
            resetUserStates();
        }
      } catch (error) {
        resetUserStates();
      }
    };
    fetchUserData();
  }, []);

  const resetUserStates = () => {
    setIsLoggedIn(false);
    setIsUserAdmin(null);
    setIsUserVerified(null);
    setIsUserSuspended(null);
    setIsUserDeleted(null);
  };

  return (
    <AuthContext.Provider
      value={{
        isLoggedIn,
        isUserAdmin,
        isUserVerified,
        isUserSuspended,
        isUserDeleted,
        setIsLoggedIn,
        setIsUserAdmin,
        setIsUserVerified,
        setIsUserSuspended,
        setIsUserDeleted,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

export { AuthContext, AuthProvider };