function ProtectedRoute() {
  const { user } = useAuth();

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

  return <Outlet />;
}

Should this route element be rendered for the current client-side auth state?

Can this request load this data?
Can this mutation execute?
Can this subject perform this action on this resource in this tenant?
Can stale auth state be trusted during navigation?
Can hidden UI state leak sensitive data before redirect?
Can a direct API call bypass the route guard?
Can a prefetch, loader, cache, or retry run before the guard decides?
Can a role change revoke access immediately enough?
Can the system explain and audit the denial?

If the user cannot see the page, the user cannot access the feature.

Visibility is not authority.
Rendering is not permission.
Navigation is not enforcement.
The browser is not the policy decision point.

- call APIs directly;
- modify local state;
- replay requests;
- inspect bundles;
- bypass route components;
- race navigation and data loading;
- use stale cached data;
- alter query parameters and resource ids;
- execute JavaScript through XSS if the app is vulnerable;
- use DevTools, scripts, extensions, or custom HTTP clients.

- hiding authenticated-only pages from anonymous users;
- avoiding confusing screens;
- redirecting users to login;
- showing correct layout shell;
- reducing accidental data exposure;
- maintaining a coherent navigation experience.

- protecting backend data;
- preventing direct API calls;
- enforcing object-level authorization;
- preventing mutation;
- enforcing tenant isolation;
- preventing stale permission use;
- auditing access decisions.

- avoiding sensitive data flash;
- redirecting before route UI renders;
- returning 401/403 route errors;
- ensuring data and route auth state are consistent;
- precomputing permitted actions;
- coordinating pending UI and revalidation.

subject + action + resource + context => allow | deny

- REST reads;
- REST mutations;
- GraphQL queries;
- GraphQL mutations;
- file downloads;
- signed URL issuance;
- background job triggers;
- websocket channel subscription;
- bulk actions;
- export endpoints;
- admin endpoints;
- internal BFF endpoints.

- fetches started outside the guarded subtree;
- query caches hydrated before the guard;
- route loaders already triggered by the router;
- preloaded data;
- service worker cache;
- background polling;
- stale React Query/TanStack Query data;
- server-rendered markup;
- assets and route modules already downloaded;
- direct API calls.

function RequireAuth({ children }: { children: React.ReactNode }) {
  const { user, isLoading } = useAuth();

  if (isLoading) return <FullPageSpinner />;
  if (!user) return <Navigate to="/login" replace />;

  return <>{children}</>;
}

function AppRoutes() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        path="/cases/:caseId"
        element={
          <RequireAuth>
            <CasePage />
          </RequireAuth>
        }
      />
    </Routes>
  );
}

function CasePage() {
  const { caseId } = useParams();
  const query = useQuery({
    queryKey: ["case", caseId],
    queryFn: () => fetchJson(`/api/cases/${caseId}`),
  });

  return <CaseDetails data={query.data} />;
}

What happens if the API does not enforce object-level access?
What happens if cached data from a previous user remains in memory?
What happens if /api/cases/:caseId trusts the frontend route guard?
What happens if a user changes caseId in the URL?
What happens if role changes while the tab is open?
What happens if auth state is "loading" but stale data is already rendered?

if (!user) return <Navigate to="/login" />;

Can this user view this tenant?
Can this user read this case?
Can this user edit this case?
Can this user approve this transition?
Can this user see sealed fields?
Can this user export the data?

Who is the user?

What can this user do to this resource under this context?

function RequireRole({ role, children }: Props) {
  const { user } = useAuth();

  if (!user) return <Navigate to="/login" />;
  if (!user.roles.includes(role)) return <Forbidden />;

  return <>{children}</>;
}

admin of tenant A != admin of tenant B
case reviewer != reviewer of this case
manager role != can approve this transition now
editor role != can edit after record is locked
support role != can impersonate without audit and justification

- user experience routing;
- authenticated layout selection;
- avoiding obvious unauthorized screen exposure;
- anonymous vs authenticated route groups;
- preserving return URL intent;
- showing login/onboarding/setup flows;
- coarse navigation filtering;
- reducing accidental data fetching;
- centralizing "must be logged in" behavior.

- final authorization;
- object-level permission;
- tenant isolation;
- mutation approval;
- audit-grade decisioning;
- revocation enforcement;
- hiding secrets;
- protecting API data;
- proving compliance.

/cases/:caseId/approve
  - authenticated user required
  - tenant membership required
  - case readable by user
  - approve action allowed
  - case state must be REVIEWED
  - MFA freshness required for high-risk approval
  - server must audit allow/deny

// auth.server.ts or auth.client.ts depending on architecture
export type SessionUser = {
  id: string;
  tenantId: string;
  displayName: string;
  permissionsVersion: number;
};

export async function getSessionUser(request: Request): Promise<SessionUser | null> {
  const response = await fetch("/api/session", {
    headers: {
      cookie: request.headers.get("cookie") ?? "",
    },
  });

  if (response.status === 401) return null;
  if (!response.ok) throw new Response("Session check failed", { status: 503 });

  return response.json();
}

export async function requireUser(request: Request): Promise<SessionUser> {
  const user = await getSessionUser(request);

  if (!user) {
    const url = new URL(request.url);
    const returnTo = encodeURIComponent(url.pathname + url.search);
    throw redirect(`/login?returnTo=${returnTo}`);
  }

  return user;
}

export async function loader({ request, params }: Route.LoaderArgs) {
  const user = await requireUser(request);

  const caseResponse = await fetchCaseForUser({
    caseId: params.caseId,
    user,
    request,
  });

  if (caseResponse.status === 403) {
    throw new Response("Forbidden", { status: 403 });
  }

  if (caseResponse.status === 404) {
    throw new Response("Not Found", { status: 404 });
  }

  if (!caseResponse.ok) {
    throw new Response("Could not load case", { status: 502 });
  }

  return {
    user,
    case: await caseResponse.json(),
  };
}

The React route is protected, so this endpoint is safe.

Every request is hostile until authenticated and authorized here.

type Decision =
  | { allowed: true }
  | { allowed: false; reason: "NO_SESSION" | "NO_TENANT" | "NO_PERMISSION" | "STATE_DENIED" };

async function canReadCase(subject: Subject, caseId: string): Promise<Decision> {
  const record = await caseRepository.findCaseAccessProjection(caseId);

  if (!record) {
    // Often return 404 for resources the user cannot know exist.
    return { allowed: false, reason: "NO_PERMISSION" };
  }

  if (record.tenantId !== subject.tenantId) {
    return { allowed: false, reason: "NO_TENANT" };
  }

  if (subject.permissions.includes("case:read:any")) {
    return { allowed: true };
  }

  if (record.assignedUserIds.includes(subject.id)) {
    return { allowed: true };
  }

  return { allowed: false, reason: "NO_PERMISSION" };
}

app.get("/api/cases/:caseId", async (req, res) => {
  const subject = await requireSubject(req);
  const decision = await canReadCase(subject, req.params.caseId);

  if (!decision.allowed) {
    auditAccessDenied({
      subjectId: subject.id,
      action: "case.read",
      resourceId: req.params.caseId,
      reason: decision.reason,
    });

    return res.status(404).json({ error: "Not found" });
  }

  const data = await caseRepository.getCase(req.params.caseId);
  return res.json(data);
});

- subject;
- action;
- resource;
- tenant;
- workflow state;
- reason;
- policy version;
- evidence used;
- audit correlation id;
- timestamp;
- enforcement point.

- User logs out, presses back, sees previous sensitive page for a moment.
- User switches tenant, old tenant data remains in table until refetch completes.
- User loses permission, but stale cached admin buttons remain visible.
- Loader redirects to login, but component-level query briefly renders old data.
- Suspense fallback hides the redirect loop but cached data remains in memory.

Auth state unknown => render no sensitive data.
Permission unknown => render no privileged action.
Tenant switch in progress => clear tenant-scoped cache before showing new tenant UI.
Logout started => cancel in-flight requests and purge sensitive caches before navigation.

if (!user && !isLoading) return <Navigate to="/login" />;
return <Outlet />;

While loading, render protected content.

function AuthenticatedOutlet() {
  const auth = useAuthSnapshot();

  switch (auth.status) {
    case "unknown":
    case "checking":
      return <AuthShellSkeleton />;

    case "anonymous":
      return <Navigate to="/login" replace />;

    case "authenticated":
      return <Outlet />;

    case "expired":
      return <Navigate to="/login?reason=expired" replace />;

    case "degraded":
      return <DegradedAuthExperience />;
  }
}

Unknown is not allow.

const queryClient = new QueryClient();

function logout() {
  authClient.logout();
  navigate("/login");
}

- cancel queries;
- clear authenticated query cache;
- remove tenant-scoped data;
- stop background polling;
- broadcast logout to other tabs;
- invalidate permission projection;
- clear optimistic mutations;
- reset websocket subscriptions.

async function logout() {
  authEvents.emit({ type: "logout:start" });

  await queryClient.cancelQueries();
  queryClient.removeQueries({ predicate: isSensitiveQuery });

  realtimeClient.disconnect("logout");
  await authClient.logout();

  authEvents.emit({ type: "logout:complete" });
  router.navigate("/login", { replace: true });
}

- API secrets;
- internal service tokens;
- private keys;
- hidden endpoints;
- privileged algorithms;
- admin-only business rules that are sensitive by themselves;
- tenant data;
- audit evidence;
- signed URL secrets.

Route layer: should we enter this experience?
Data layer: should we load this screen's data?
UI layer: what should be visible and usable?
Mutation layer: should this state change execute?
API/domain layer: final enforcement and audit.

type CasePermissionProjection = {
  resource: { type: "case"; id: string };
  allowedActions: Array<
    | "case.view"
    | "case.comment"
    | "case.assign"
    | "case.approve"
    | "case.close"
  >;
  deniedReasons?: Partial<Record<string, string>>;
  version: number;
};

function CaseActions({ permissions }: Props) {
  return (
    <ActionBar>
      <Button disabled={!permissions.allowedActions.includes("case.comment")}>
        Comment
      </Button>

      {permissions.allowedActions.includes("case.approve") ? (
        <Button variant="primary">Approve</Button>
      ) : null}
    </ActionBar>
  );
}

The projection improves UX.
The backend decision enforces security.

GET /api/admin/users

Backend authorization on every endpoint.

/cases/123 -> /cases/999

Object-level authorization: user can read this specific case.

Short-lived projection, permission version, server-side enforcement, cache invalidation, session refresh, revocation events where necessary.

Tenant-scoped query keys, cache purge on tenant switch, server tenant validation.

Explicit auth state machine and transition guards.

Mutation authorization in action/API/domain service.

Map external identity to internal subject and app-owned permissions.

import { redirect } from "react-router";

export async function requireAuthenticatedLoader({ request }: Route.LoaderArgs) {
  const session = await getSession(request);

  if (!session) {
    const url = new URL(request.url);
    throw redirect(`/login?returnTo=${encodeURIComponent(url.pathname + url.search)}`);
  }

  return session;
}

export async function loader({ request, params }: Route.LoaderArgs) {
  const session = await requireAuthenticatedLoader({ request } as Route.LoaderArgs);

  const response = await fetch(`/api/cases/${params.caseId}/screen`, {
    headers: await authHeadersFor(request),
  });

  if (response.status === 401) {
    throw redirect(`/login?returnTo=${new URL(request.url).pathname}`);
  }

  if (response.status === 403) {
    throw new Response("Forbidden", { status: 403 });
  }

  if (response.status === 404) {
    throw new Response("Not found", { status: 404 });
  }

  if (!response.ok) {
    throw new Response("Upstream failure", { status: 502 });
  }

  return response.json();
}

The route component only receives data that passed the route's loading policy.

export async function action({ request, params }: Route.ActionArgs) {
  await requireAuthenticatedLoader({ request } as Route.LoaderArgs);

  const formData = await request.formData();
  const intent = formData.get("intent");

  if (intent === "approve") {
    const response = await fetch(`/api/cases/${params.caseId}/approve`, {
      method: "POST",
      headers: await authHeadersFor(request),
      body: JSON.stringify({
        comment: formData.get("comment"),
      }),
    });

    if (response.status === 403) {
      return { ok: false, reason: "You cannot approve this case." };
    }

    if (!response.ok) {
      throw new Response("Approval failed", { status: response.status });
    }

    return redirect(`/cases/${params.caseId}`);
  }

  throw new Response("Unknown intent", { status: 400 });
}

<SecureButton permission="case.approve" />

<PermissionAwareButton action="case.approve" />

<ExposureGate action="case.approve" resource={caseRef}>
  <ApproveButton />
</ExposureGate>

SecureButton implies security is enforced in the component.
PermissionAwareButton implies the component adapts to a permission projection.

type ExposureGateProps = {
  action: string;
  resource?: { type: string; id: string };
  fallback?: React.ReactNode;
  children: React.ReactNode;
};

function ExposureGate({ action, resource, fallback = null, children }: ExposureGateProps) {
  const decision = usePermissionProjection(action, resource);

  if (decision.status === "unknown") return fallback;
  if (!decision.allowed) return fallback;

  return <>{children}</>;
}

GET /api/cases/SECRET-CASE-ID

This case exists, but you cannot access it.

No permission to know resource exists => 404
Permission to know resource exists but not perform action => 403
Unauthenticated => 401
Session expired/re-auth required => 401 or 403 with step-up reason, depending on API convention

anonymous user gets redirected to /login

it("does not render protected content while auth state is unknown", () => {
  render(
    <AuthProvider initialState={{ status: "unknown" }}>
      <AuthenticatedOutlet />
    </AuthProvider>
  );

  expect(screen.queryByText(/case details/i)).not.toBeInTheDocument();
});

it("denies direct case read even if frontend would hide the route", async () => {
  const response = await request(app)
    .get("/api/cases/case-b")
    .set("Authorization", tokenFor({ userId: "reviewer-a" }));

  expect([403, 404]).toContain(response.status);
});

RouteExposureGuard
AuthenticatedLayoutGuard
PermissionAwareRenderGate

root route -> /session -> auth snapshot -> child routes

component renders -> useEffect/useQuery fetches sensitive data

loader authenticates -> loader requests authorized screen data -> component renders safe data

{
  "case": { "id": "case_123", "status": "REVIEWED" },
  "permissions": {
    "allowedActions": ["case.comment", "case.approve"]
  }
}

Who is the subject?
What is the action?
What is the resource?
What context matters?
Where is the decision made?
What happens on deny?
Is it audited?

A React route guard may prevent a component from rendering.
It must never be the only thing preventing data access or mutation.

No backend endpoint may rely on the existence of a frontend protected route as proof of authorization.

No sensitive data should render while auth, tenant, or permission state is unknown.

[ ] Is the guard checking authentication, authorization, or both?
[ ] Is unknown auth state fail-closed?
[ ] Does sensitive data load before the guard resolves?
[ ] Are route loaders/actions enforcing early redirect or route error?
[ ] Does the backend enforce the same or stronger rule?
[ ] Are object ids authorized server-side?
[ ] Are tenant ids verified server-side?
[ ] Are mutations authorized independently of hidden/disabled UI?
[ ] Are query caches cleared on logout and tenant switch?
[ ] Are stale permissions invalidated after role/grant changes?
[ ] Does the app avoid data flash during session restore?
[ ] Does direct API access fail correctly?
[ ] Is denial response safe: 401, 403, or 404?
[ ] Is the denial observable and auditable?
[ ] Are redirect targets validated to prevent open redirect?

component guard       -> UX and exposure control
route loader/action   -> pre-render and mutation flow control
API/BFF enforcement   -> request-level security boundary
domain policy engine  -> subject/action/resource/context decision
audit system          -> evidence and accountability