Official JavaScript SDK (browser and node) for interacting with the PocketBase API.

• Installation
• Usage
• Caveats
  • File upload
  • Errors handling
  • AuthStore
  • Auto cancellation
  • Send hooks
  • SSR integration
  • Security
• Definitions
• Development

<script src="/path/to/dist/pocketbase.umd.js"></script>

OR if you are using ES modules:

<script type="module">
    import PocketBase from '/path/to/dist/pocketbase.es.mjs'
    ...
</script>

npm install pocketbase --save

// Using ES modules (default)
import PocketBase from 'pocketbase'

// OR if you are using CommonJS modules
const PocketBase = require('pocketbase/cjs')

🔧 For Node < 17 you'll need to load a fetch() polyfill. I recommend lquixada/cross-fetch:

// npm install cross-fetch --save
require('cross-fetch/polyfill');

🔧 Node doesn't have native EventSource implementation, so in order to use the realtime service (aka. client.realtime.subscribe()) you'll need to load a EventSource polyfill. I recommend EventSource/eventsource:

// npm install eventsource --save
global.EventSource = require('eventsource');

import PocketBase from 'pocketbase';

const client = new PocketBase('http://127.0.0.1:8090');

...

// list and filter "example" collection records
const result = await client.records.getList('example', 1, 20, {
    filter: 'status = true && created > "2022-08-01 10:00:00"'
});

// authenticate as regular user
const userData = await client.users.authViaEmail('[email protected]', '123456');

// or as admin
const adminData = await client.admins.authViaEmail('[email protected]', '123456');

// and much more...

More detailed API docs and copy-paste examples could be found in the API documentation for each service.

PocketBase Web API supports file upload via multipart/form-data requests, which means that to upload a file it is enough to provide a FormData object as body.

Here is a simple browser example of uploading multiple files together with some other regular fields:

<input type="file" id="fileInput" />

import PocketBase from 'pocketbase';

const client = new PocketBase('http://127.0.0.1:8090');

...

const formData = new FormData();

const fileInput = document.getElementById('fileInput');

// listen to file input changes and add the selected files to the form data
fileInput.addEventListener('change', function () {
    for (let file of fileInput.files) {
        formData.append('documents', file);
    }
});

// set some other regular text field value
formData.append('title', 'Hello world!');

...

// upload and create new record
const createdRecord = await client.Records.create('example', formData);

All services return a standard Promise-based response, so the error handling is straightforward:

client.records.getList('example', 1, 50).then((result) {
  // success...
  console.log('Result:', result);
}).catch((error) {
  // error...
  console.log('Error:', error);
});

// OR if you are using the async/await syntax:
try {
  const result = await client.records.getList('example', 1, 50);
  console.log('Result:', result);
} catch (error) {
  console.log('Error:', error);
}

The response error is normalized and always returned as ClientResponseError object with the following public fields that you could use:

ClientResponseError {
    url:           string,     // requested url
    status:        number,     // response status code
    data:          { ... },    // the API JSON error response
    isAbort:       boolean,    // is abort/cancellation error
    originalError: Error|null, // the original non-normalized error
}

The SDK keeps track of the authenticated token and auth model for you via the client.authStore instance.

The default LocalAuthStore uses the browser's LocalStorage if available, otherwise - will fallback to runtime/memory (aka. on page refresh or service restart you'll have to authenticate again).

The default client.authStore extends BaseAuthStore and has the following public members that you can use:

BaseAuthStore {
    // base fields
    token:   string          // the authenticated token
    model:   User|Admin|null // the authenticated User or Admin model
    isValid: boolean         // checks if the store has existing and unexpired token

    // main methods
    clear()            // "logout" the authenticated User or Admin
    save(token, model) // update the store with the new auth data
    onChange(callback) // register a callback that will be called on store change

    // cookie parse and serialize helpers
    loadFromCookie(cookieHeader, key = 'pb_auth')
    exportToCookie(options = {}, key = 'pb_auth')
}

To "logout" an authenticated user or admin, you can just call client.authStore.clear().

To "listen" for changes in the auth store, you can register a new listener via client.authStore.onChange, eg:

const removeListener = client.authStore.onChange((token, model) => {
    console.log('New store data:', token, model)
});

removeListener(); // (optional) removes the attached listener function

If you want to create your own AuthStore, you can extend BaseAuthStore and pass the new custom instance as constructor argument to the client:

import PocketBase, { BaseAuthStore } from 'pocketbase';

class CustomAuthStore extends BaseAuthStore {
    save(token, model) {
        super.save(token, model);
        // your custom business logic...
    }
}

const client = new PocketBase('http://127.0.0.1:8090', 'en-US', new CustomAuthStore());

The SDK client will auto cancel duplicated pending requests for you. For example, if you have the following 3 duplicated calls, only the last one will be executed, while the first 2 will be cancelled with ClientResponseError error:

client.records.getList('example', 1, 20) // cancelled
client.records.getList('example', 2, 20) // cancelled
client.records.getList('example', 3, 20) // executed

To change this behavior, you could make use of 2 special query parameters:

• $autoCancel - set it to false to disable auto cancellation for this request
• $cancelKey - set it to a string that will be used as request identifier and based on which pending requests will be matched (default to HTTP_METHOD path, eg. "GET /api/users")

Example:

client.records.getList('example', 1, 20);                           // cancelled
client.records.getList('example', 1, 20);                           // executed
client.records.getList('example', 1, 20, { '$autoCancel': false }); // executed
client.records.getList('example', 1, 20, { '$autoCancel': false })  // executed
client.records.getList('example', 1, 20, { '$cancelKey': "test" })  // cancelled
client.records.getList('example', 1, 20, { '$cancelKey': "test" })  // executed

To manually cancel pending requests, you could use client.cancelAllRequests() or client.cancelRequest(cancelKey).

If you want to completelly disable the auto cancellation behavior, you could use the client.beforeSend hook and delete the reqConfig.signal property.

Sometimes you may want to modify the request sent data or to customize the response.

To accomplish this, the SDK provides 2 function hooks:

• beforeSend - triggered right before sending the fetch request, allowing you to inspect/modify the request config.

  const client = new PocketBase('http://127.0.0.1:8090');
  
  client.beforeSend = function (url, reqConfig) {
      // For list of the possible reqConfig properties check
      // https://developer.mozilla.org/en-US/docs/Web/API/fetch#options
      reqConfig.headers = Object.assign({}, reqConfig.headers, {
          'X-Custom-Header': 'example',
      });
  
      return reqConfig;
  };

• afterSend - triggered after successfully sending the fetch request, allowing you to inspect/modify the response object and its parsed data.

  const client = new PocketBase('http://127.0.0.1:8090');
  
  client.afterSend = function (response, data) {
      // do something with the response state
      console.log(response.status);
  
      return Object.assign(data, {
          // extend the data...
          "additionalField": 123,
      });
  };

Unfortunately, there is no "one size fits all" solution because each framework handle SSR differently (and even in a single framework there is more than one way of doing things).

But in general, the idea is to use a cookie based flow:

1. Create a new PocketBase instance for each server-side request
2. "Load/Feed" your client.authStore with data from the request cookie
3. Perform your application server-side actions
4. Before returning the response to the client, update the cookie with the latest client.authStore state

All BaseAuthStore instances have 2 helper methods that should make working with cookies a little bit easier:

// update the store with the parsed data from the cookie string
client.authStore.loadFromCookie('pb_auth=...');

// exports the store data as cookie, with option to extend the default SameSite, Secure, HttpOnly, Path and Expires attributes
client.authStore.exportToCookie({ httpOnly: false }); // Output: 'pb_auth=...'

Below you could find several examples:

// src/hooks.js
import PocketBase from 'pocketbase';

export async function handle({ event, resolve }) {
    event.locals.pocketbase = new PocketBase("http://127.0.0.1:8090");

    // load the store data from the request cookie string
    event.locals.pocketbase.authStore.loadFromCookie(event.request.headers.get('cookie') || '');

    const response = await resolve(event);

    // send back the default 'pb_auth' cookie to the client with the latest store state
    response.headers.set('set-cookie', event.locals.pocketbase.authStore.exportToCookie());

    return response;
}

// src/routes/login/ server.js
//
// creates a `POST /login` server-side endpoint
export function POST({ request, locals }) {
    const { email, password } = await request.json();

    const { token, user } = await locals.pocketbase.users.authViaEmail(email, password);

    return new Response('Success...');
}

// plugins/pocketbase.js
import PocketBase from 'pocketbase';

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      pocketbase: () => {
        const client = new PocketBase('http://127.0.0.1:8090');

        // load the store data from the request cookie string
        client.authStore.loadFromCookie(nuxtApp.ssrContext?.event?.req?.headers?.cookie || '');

        // send back the default 'pb_auth' cookie to the client with the latest store state
        client.authStore.onChange(() => {
          if (nuxtApp.ssrContext?.event?.res) {
            nuxtApp.ssrContext.event.res.setHeader('set-cookie', client.authStore.exportToCookie());
          }
        });

        return client;
      }
    }
  }
});

<template>
  <div>
    Show: {{ data }}
  </div>
</template>

<script setup>
  const { data } = await useAsyncData(async (nuxtApp) => {
    const client = nuxtApp.$pocketbase();

    // fetch and return all "demo" records...
    return await client.records.getFullList('demo');
  })
</script>

import PocketBase, { BaseAuthStore } from 'pocketbase';

class NextAuthStore extends BaseAuthStore {
  constructor(req, res) {
    super();

    this.req = req;
    this.res = res;

    this.loadFromCookie(this.req?.headers?.cookie);
  }

  save(token, model) {
    super.save(token, model);

    this.res?.setHeader('set-cookie', this.exportToCookie());
  }

  clear() {
    super.clear();

    this.res?.setHeader('set-cookie', this.exportToCookie());
  }
}

export async function getServerSideProps({ req, res }) {
  const client = new PocketBase("http://127.0.0.1:8090");
  client.authStore = new NextAuthStore(req, res);

  // fetch example records...
  const result = await client.records.getList("example", 1, 30);

  return {
    props: {
      // ...
    },
  }
}

export default function Home() {
  return (
    <div>Hello world!</div>
  )
}

The most common frontend related vulnerability is XSS (and CSRF when dealing with cookies). Fortunately, modern browsers can detect and mitigate most of this type of attacks if Content Security Policy (CSP) is provided.

To prevent a malicious user or 3rd party script to steal your PocketBase auth token, it is recommended to configure a basic CSP for your application (either as meta tag or HTTP header).

This is out of the scope of the SDK, but you could find more resources about CSP at:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
• https://content-security-policy.com

const client = new PocketBase(
    baseUrl = '/',
    lang = 'en-US',
    authStore = LocalAuthStore
);

Each instance method returns the PocketBase instance allowing chaining.

Each service call returns a Promise object with the API response.

# run unit tests
npm test

# build and minify for production
npm run build