Build an access decision simulator in React

Question

Design and implement the frontend flow for a simulator that evaluates whether a selected user can perform an action on a selected resource. Handle async requests, cancellation, errors, explainability, and stale responses.

Accepted Answer

Interview framing:
A simulator must be responsive and trustworthy. Users will change inputs quickly, so stale decisions are a real correctness bug.

State model:
- inputs: subject, action, resource, environment/context.
- status: idle | loading | success | error.
- result: allow/deny plus explanation, matched policies, warnings, and timestamp.

Race-safe request pattern:
```ts
let latestRequest = 0
let controller: AbortController | null = null

async function simulateAccess(payload: SimulationInput) {
  const requestId = ++latestRequest
  controller?.abort()
  controller = new AbortController()
  setState({ status: 'loading', result: null })

try {
    const result = await api.simulate(payload, { signal: controller.signal })
    if (requestId !== latestRequest) return
    setState({ status: 'success', result })
  } catch (error) {
    if (requestId !== latestRequest || controller.signal.aborted) return
    setState({ status: 'error', error })
  }
}
```

UX details:
- Debounce free-text identity/resource search.
- Keep previous valid result visible while refreshing if useful.
- Label results clearly: Allowed, Denied, Partial, or Needs approval.
- Explain the decision with matched policies and missing conditions.
- Distinguish validation errors from backend failures.

Security details:
- Do not expose policy internals to users without permission.
- Audit simulator runs if they reveal sensitive authorization data.
- Enforce simulator permissions server-side.

Good closing:
"I would treat stale response prevention as part of correctness because showing the wrong allow/deny answer can mislead an admin."

Build an access decision simulator in React

Answer