basefyio + React: A Backend for Your React App

Install

npm install basefyio-js

Create a shared client

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

export const bf =createClient({
  projectId: import.meta.env.VITE_BASEFYIO_PROJECT_ID,
  apiKey: import.meta.env.VITE_BASEFYIO_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 { bf } from "./basefyio";

export function Posts() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    bf.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 basefyio 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 bf.auth.getUser and bf.auth.onAuthStateChange in a React context to expose the current user across your app.

Other integrations