Next.js (React Server Components)

let adopted:
  { version: string | number | undefined; access: ShopAccess } | undefined;
 
/**
 * The evaluator over `document`, parsed only when the version moved.
 *
 * `parseMatrix` and not `hydratePolicy`: a key the document does not carry,
 * such as the internal `inventory.read`, refuses with `unknown-action` where
 * `hydratePolicy` would throw mid-render.
 *
 * The cast states this app's subject and row types. `parseMatrix` reads the
 * document at runtime, so it returns an `Access` over plain records, and
 * TypeScript cannot check that against `ShopAccess`. The document's `schema`,
 * which `parseMatrix` checks every condition against, is what keeps shop-api's
 * rows and these types in step.
 */
function adopt(document: PolicyDocument): ShopAccess {
  if (adopted && adopted.version === document.version) return adopted.access;
  const access = parseMatrix(document.matrix) as unknown as ShopAccess;
  adopted = { version: document.version, access };
  return access;
}

export const currentAccess = cache(async (): Promise<ShopAccess> =>
  adopt(await fetchJson<PolicyDocument>('/policy')),
);
 
/**
 * The matrix bound to this page view's subject and one clock instant.
 *
 * Bound once so every widget decides against the same actor at the same
 * instant. Two widgets settling their own `now` a few milliseconds apart would
 * be able to disagree about a rule with a time window in it.
 *
 * This is the handle the widgets call, and it is the app's whole enforcement
 * story on the render side. shop-api decides again on its own copy of the same
 * document for every request this app sends it, so a widget that decided wrong
 * is a rendering bug and not an access-control one.
 */
export const authorized = cache(async (): Promise<Authorized<ShopObjects>> => {
  const [access, subject] = await Promise.all([
    currentAccess(),
    currentSubject(),
  ]);
  return access.authorize(subject);
});

// Decided before the fetch. A gate that renders nothing over data it already
// asked for has still pulled the events into this process.
const may = await authorized();
if (!may.can('telemetry', 'read').allowed) return null;
 
const events = await fetchJson<TelemetryEvent[]>('/telemetry');

const may = await authorized();
if (!may.can('game', 'read').allowed) return null;
 
const [game, stock] = await Promise.all([
  fetchJson<Game>(`/games/${urnPath(urn)}`),
  fetchJson<Stock>(`/inventory/${urnPath(urn)}`),
]);
const mayReprice = may.can('game', 'reprice', game).allowed;

import { pickAllowedFields, policy, type Action } from '@evanion/acl';
 
type ShopSubject = { id: string; roles: string[]; shop: string };
type Game = { urn: string; shop: string; availability: string; price: number };
 
const access = policy<
  ShopSubject,
  { game: Game },
  { game: Action | 'declare' }
>()
  .for('game', (p) =>
    p
      .allow(
        'declare',
        p.contains('subject.roles', 'operator'),
        p.eq('object.shop', 'subject.shop'),
      )
      .fields({ fields: ['availability'] }),
  )
  .build();
 
const catalogue = new Map<string, Game>([
  [
    'urn:game:wingspan',
    {
      urn: 'urn:game:wingspan',
      shop: 'stockholm',
      availability: 'in-stock',
      price: 59900,
    },
  ],
  [
    'urn:game:gloomhaven',
    {
      urn: 'urn:game:gloomhaven',
      shop: 'gothenburg',
      availability: 'in-stock',
      price: 149900,
    },
  ],
]);
 
// Stands in for reading the verified session, which Next.js reaches through
// `cookies()`.
const currentSubject = async (): Promise<ShopSubject> => ({
  id: 'staff:ines',
  roles: ['operator'],
  shop: 'stockholm',
});
 
async function declareAvailability(form: FormData): Promise<void> {
  'use server';
 
  const subject = await currentSubject();
  const game = catalogue.get(String(form.get('urn')));
  if (!game) throw new Error('not-found');
 
  // Whatever the sender put a name on arrives here, `urn` and `price` too.
  const proposed = Object.fromEntries(form) as Partial<Game>;
  const decision = access.canFields(
    subject,
    'game',
    'declare',
    game,
    'write',
    proposed,
  );
  if (!decision.action.allowed) throw new Error('forbidden');
 
  catalogue.set(game.urn, {
    ...game,
    ...pickAllowedFields(decision, proposed),
  });
}
 
// Two submissions straight to the action, with no render before either.
const submit = (fields: Record<string, string>) => {
  const form = new FormData();
  for (const [name, value] of Object.entries(fields)) form.set(name, value);
  return declareAvailability(form).then(
    () => 'written',
    (error: Error) => error.message,
  );
};
 
const own = await submit({
  urn: 'urn:game:wingspan',
  availability: 'preorder',
  price: '1',
});
own; // -> 'written'
catalogue.get('urn:game:wingspan')?.price; // -> 59900
 
const other = await submit({
  urn: 'urn:game:gloomhaven',
  availability: 'preorder',
});
other; // -> 'forbidden'