Docs Plugins React Client Plugin

React Client Plugin

React Client integration for authorization components and hooks.

The React Client Plugin provides a set of React components and hooks for working with the Kilpi client in a React application.

Installation

Install the plugin with your package manager of choice.

Apply the plugin in your KilpiClient configuration as follows.

kilpi.ts
import { createKilpiClient } from "@kilpi/client";
import { ReactClientPlugin } from "@kilpi/react-client";


export const KilpiClient = createKilpiClient({
  // ...
  plugins: [ReactClientPlugin()]
})

Features

The ReactClientPlugin includes multiple components and hooks to make authorizing a client-side React application easier.

The <AuthorizeClient /> component

The ReactClientPlugin provides the <AuthorizeClient /> component to authorize and conditionally render your client-side UI, similarly to the <Authorize /> RSC component from ReactServerPlugin. 

const { AuthorizeClient } = KilpiClient.$createReactClientComponents();

You can use the component as follows. 

// Only show EditPostForm when authorized to edit the post
<AuthorizeClient policy={KilpiClient.posts.edit(post)}>
  <EditPostForm post={post} />
</AuthorizeClient>

Additionally, you can provide optional unauthorized, pending, error and idle UIs for all statuses. You can even disable the query with isDisabled. 

<AuthorizeClient
  policy={KilpiClient.posts.delete(post)}
  Pending={<p>Loading...</p>}
  Unauthorized={<p>You are not allowed to delete this post</p>}
  Idle={<p>Authorization disabled</p>}
  Error={<p>Error authorizing post deletion</p>}
  isDisabled={shouldDisableQuery}
>
  <DeletePostForm post={post} />
</AuthorizeClient>

You can even use render props to access the query to render the authorized and unauthorized UIs or disable the query entirely. 

<AuthorizeClient
  policy={KilpiClient.posts.create()}
  Pending={(query) => <p>Query is {query.status}</p>}
  Unauthorized={({ decision }) => <p>{decision.message}</p>}
  Error={({ error }) => <p>Error: {error.message}</p>}
  Idle={({ status }) => <p>Query is {status}</p>}
>
  {({ decision }) => <CreatePostForm authorName={decision.subject.name} />}
</AuthorizeClient>

useAuthorize()

The ReactClientPlugin augments policies with the useAuthorize() function, which automatically wraps the policy’s authorize() fetch call with common utilities such as the query status, caching, re-fetch on cache invalidation and more. 

export function DeleteCommentButton({ comment, onDelete }) {
  const {
    status, // "idle" | "pending" | "success" | "error"
    granted, // boolean (shorthand for decision?.granted)
    decision, // The full decision object
  } = KilpiClient.comments.delete(comment).useAuthorize();


  return (
    <button disabled={!granted} onClick={onDelete}>
      Delete comment
    </button>
  );
}