How to Implement Protected Routes with @frontegg/react?

If you'd like to check that the user is authenticated only on specific routes, you could implement a method similar to the below example in your code: 

import { FC, useEffect } from 'react';
import { useAuthRoutes, useAuthUserOrNull, useIsAuthenticated } from "@frontegg/react";
import { useLocation, useNavigate } from "react-router-dom";

const ProtectRoute: FC = (props) => {
  const user = useAuthUserOrNull();
  const navigate = useNavigate();
  const location = useLocation();
  const { loginUrl } = useAuthRoutes();
  const isAuthenticated = useIsAuthenticated();

  useEffect(() => {
    if(!isAuthenticated) {
      navigate([loginUrl, '?redirectUrl=', encodeURIComponent(location.pathname + location.search + location.hash)].join(''))
    }
  }, [navigate, loginUrl])

  if (isAuthenticated && user)
    return <>{props.children}</>;
  return null;
};

export default ProtectRoute;

function App() {
    const [isLoading, setIsLoading] = useState(true);


    return (
        <>
            <FronteggProvider customLoader={setIsLoading} {...fronteggOptions}>
                <Routes>
                    <Route path="/" element={<PublicRoutePage/>}/>
                    <Route path="private-route" element={<ProtectRoute><PrivateRoutePage/></ProtectRoute>}/>
                </Routes>
            </FronteggProvider>
            {isLoading && 'This is my custom Loader'}
        </>


    );
}

export default App;