Kolaybase + React: A Backend for Your React App

Install

npm install kolaybase-js

Create a shared client

// src/kolaybase.ts
import { createClient } from "kolaybase-js";

export const kb = createClient({
  projectId: import.meta.env.VITE_KOLAYBASE_PROJECT_ID,
  apiKey: import.meta.env.VITE_KOLAYBASE_ANON_KEY,
});

Always use the client-safe anon key in the browser. Row-level security policies decide what each user can read or write.

Load data in a component

import { useEffect, useState } from "react";
import { kb } from "./kolaybase";

export function Posts() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    kb.from("posts").select("id, title").then(({ data }) => setPosts(data ?? []));
  }, []);
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

Frequently asked questions

Is it safe to use Kolaybase in the browser?

Yes, with the anon key and row-level security enabled. Policies run in the database, so users only ever read or write rows they're allowed to.

Can I build a custom auth hook?

Yes. Wrap kb.auth.getUser and kb.auth.onAuthStateChange in a React context to expose the current user across your app.

Other integrations