ProtectedAdminRoute.js

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import { useAuthMetadata } from "./pages/User/useAuthMetadata";

function ProtectedAdminRoute() {
  const { isAuthenticated } = useAuth0();
  const { isAdmin, isLoading } = useAuthMetadata();

  if (isLoading) {
    return <div>Loading...</div>; // Or your loading component
  }

  return isAuthenticated && isAdmin ? <Outlet /> : <Navigate to="/" replace />;
}

export default ProtectedAdminRoute;