Require Auth

1// Route gate for member-only surfaces. Wrap any protected element in <RequireAuth> — it renders the
2// children only for a logged-in member, otherwise redirects to /login (carrying the attempted path so
3// login can return there). This is the gate the shipped Account page uses; reuse it for your own
4// member-only routes ("my orders", "my plans", …). Reads useMember; no styling of its own.
5import { Navigate, useLocation } from "react-router-dom";
6import { useMember } from "@/context/MemberContext";
7
8export default function RequireAuth({ children, fallback = "/login" }) {
9  const { loggedIn, loading } = useMember();
10  const location = useLocation();
11
12  // Wait for the initial session read before deciding — otherwise a logged-in member gets bounced to
13  // /login on first paint while the token check is still resolving.
14  if (loading) {
15    return <div className="p-12 text-center text-muted-foreground">Loading…</div>;
16  }
17  if (!loggedIn) {
18    return <Navigate to={fallback} replace state={{ from: location.pathname }} />;
19  }
20  return children;
21}