React Server Components (RSC) Plugin

Installation

Install the plugin with your package manager of choice.

npm

npm install @kilpi/react-server

yarn

yarn add @kilpi/react-server

pnpm

pnpm add @kilpi/react-server

bun

bun add @kilpi/react-server

Apply the plugin in your Kilpi configuration as follows.

kilpi.ts

export const Kilpi = createKilpi({
  getSubject,
  policies,
  plugins: [ReactServerComponentPlugin()]
})

Features

Scope

The plugin automatically provides a scope for React Server Components.

export default async function ProtectedPage() {
  Kilpi.onUnauthorized(() => redirect("/")); // Just works
  Kilpi.authorize("any:policy");
  return <div>...</div>
}

Components

Use the Kilpi.ReactServer.createComponents function (provided by the plugin) to create React server component bindings for working with Kilpi.

kilpi.components.ts

export const { Access } = Kilpi.ReactServer.createComponents();

<Access />

Access is used to show or hide components based on the user’s authorizations.

Access is an asynchronous component which implement <Suspense /> internally, allowing you to stream in UI and use a loading fallback.

async function Component({ comment }) {
  return <div>
    <p>{comment.content}</p>
    <Access
      to="comments:delete" // Required
      on={comment} // Required only if policy takes in a resource
      Loading={<p>Loading...</p>} // Optional fallback
      Unauthorized={<p>Unauthorized</p>} // Optional fallback
    >
      <button>Delete</button>
    </Access>
  </div>
}