Solution: Member Tools

A shared provider with separate authentication and capability decisions.

Solution: member tools

src/components/PracticeMemberTools.tsx

1import {
2  WpAuthProvider,
3  WpAuthGate,
4  WpCapabilityGate,
5  useWpUser,
6} from "@forgewp/auth"
7
8function Tools() {
9  const user = useWpUser()
10  return (
11    <WpAuthGate fallback={<p>Sign in to open your workspace.</p>}>
12      <h2>Welcome, {user?.displayName}</h2>
13      <WpCapabilityGate
14        allowed="edit_posts"
15        fallback={<p>This account has member access.</p>}
16      >
17        <p>Editorial tools are available.</p>
18      </WpCapabilityGate>
19    </WpAuthGate>
20  )
21}
22
23export default function PracticeMemberTools() {
24  return (
25    <WpAuthProvider>
26      <Tools />
27    </WpAuthProvider>
28  )
29}

The outer gate handles login status; the inner gate checks a specific capability. The provider belongs above Tools, so its hooks and gates read the same current user. The backend that edits a post still needs to authorize the action independently.

Try changing the allowed capability to manage_options, then test accounts with different permission arrays. Do not change the user role on the browser and treat it as server authorization.

Return to the exercise.