React

npm install @pawabase/client

// src/pawabase.ts
import { createClient } from "@pawabase/client";

export const pawabase = createClient({
  url: import.meta.env.VITE_PAWABASE_URL,
  apiKey: import.meta.env.VITE_PAWABASE_KEY,   // a pb_pk_… key
});

// src/useUser.ts
import { useEffect, useState } from "react";
import type { User } from "@pawabase/client";
import { pawabase } from "./pawabase";

export function useUser() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const { unsubscribe } = pawabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  return { user, loading };
}

import { useState } from "react";
import { ValidationError } from "@pawabase/client";
import { pawabase } from "./pawabase";

export function SignIn() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    try {
      const result = await pawabase.auth.signInWithPassword({ email, password });
      if (result.status === "mfa_required") {
        const code = prompt("Enter your authenticator code") ?? "";
        await result.verify(code);
      }
    } catch (err) {
      setError(err instanceof ValidationError ? "Check your details" : "Wrong email or password");
    }
  }

  return (
    <form onSubmit={submit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" />
      <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" />
      <button>Sign in</button>
      {error && <p>{error}</p>}
    </form>
  );
}

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

type Task = { id: string; title: string; done: boolean };

export function Tasks() {
  const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    pawabase.from("tasks").order("created_at", "desc").then((page) => setTasks(page.data as Task[]));

    const channel = pawabase.realtime.channel("resource:tasks");
    channel.on("message", ({ event, payload }: any) => {
      const row = payload.record as Task;
      setTasks((current) =>
        event === "deleted" ? current.filter((t) => t.id !== row.id)
        : current.some((t) => t.id === row.id) ? current.map((t) => (t.id === row.id ? row : t))
        : [row, ...current],
      );
    });
    channel.subscribe();
    return () => { channel.unsubscribe(); };
  }, []);

  async function add(title: string) {
    await pawabase.from("tasks").create({ title, done: false });
  }

  return (
    <>
      <button onClick={() => add("New task")}>Add</button>
      <ul>{tasks.map((t) => <li key={t.id}>{t.title}</li>)}</ul>
    </>
  );
}

<button onClick={() => pawabase.auth.signOut()}>Sign out</button>