PocketBase providers for Refine.

npm install refine-pocketbase

import PocketBase from "pocketbase";
import { authProvider, dataProvider, liveProvider } from "refine-pocketbase";

const pb = new PocketBase(POCKETBASE_URL);

<Refine
  authProvider={authProvider(pb)}
  dataProvider={dataProvider(pb)}
  liveProvider={liveProvider(pb)}
  ...
>
  ...
</Refine>

The code below uses useList to fetch a list of users. The resulting list contains user records with the id, name, avatar and the name of the organisation a user is assigned to. The meta properties fields and expand are used to customize the server response to the requirements of the user interface.

const users = useList({
  resource: "users",
  meta: {
    fields: ["id", "name", "avatar", "expand.org.name"],
    expand: ["org"],
  }
});

Here fields is an array of strings limiting the fields to return in the server's response. expand is an array with names of the related records that will be included in the response. Pocketbase supports up to 6-level depth nested relations expansion. See https://pocketbase.io/docs/api-records for more examples.

A couple of other refine hooks and components like useOne, useTable, <Show/>, <List/>, etc. will support the meta props fields and expand if used with the refine-pocketbase data provider.

The useCustom hook allows you to make custom API calls to your PocketBase backend. This is particularly useful when you need to interact with custom PocketBase endpoints.

Here's an example of how to use the useCustom hook:

const apiUrl = useApiUrl();

const { data, isLoading } = useCustom({
    url: `${apiUrl}/api/custom-endpoint`,
    method: "get",
  });

A number of configuration properties are supported by the auth provider, primarily for controlling redirection following specific auth events. Please take a look at the self-explanatory names in the AuthOptions typescript interface to find the available options.

import { authProvider, AuthOptions } from "refine-pocketbase";

const authOptions: AuthOptions = {
  loginRedirectTo: "/dashboard",
};

<Refine
  authProvider={authProvider(pb, authOptions)}
  ...
>
  ...
</Refine>

users is the default auth collection in Pocketbase. Several auth collections can be supported in a single Pocketbase instance. You can use a different collection with the authProvider by using the collection property:

const authOptions: AuthOptions = {
  collection: "superusers",
};

• auth provider
  • register
  • login with password
  • login with provider
  • forgot password
  • update password
• data provider
  • filters
  • sorters
  • pagination
  • expand
  • filter
• live provider
  • subscribe
  • unsubscribe
• audit log provider

• auditLogProvider implementation
• happy path test specs
  • authProvider
  • dataProvider (except for deleteOne)
  • liveProvider
  • auditLogProvider
• test specs for authProvider error conditions
  • register
  • forgotPassword
  • updatePassword
  • login
• test specs for dataProvider error conditions
  • getList
  • create
  • update
  • getOne
  • deleteOne
• test specs for deleteOne
• test specs with expand
  • getList
  • getOne
• test specs with fields
  • getList
  • getOne
• test specs for auditLogProvider errors
• Setup Github Actions
  • test environment
  • build & publish

• leave a star ⭐
• report a bug 🐞
• open a pull request 🏗️
• help others ❤️
• buy me a coffee ☕