Quickstart

1. Create a project

2. Add the SDK

<script src="https://clickbase.thepakclicktes.com/sdk/clickbase.js"></script>
<script>
  const app = ClickBase.init({ projectId: "my-shop", apiKey: "cb_pk_xxxxxxxx" });
</script>

Node.js 18+ / bundlers: const ClickBase = require("./clickbase.js") (download the same file). Pass baseUrl if you self-host.

3. Sign up & sign in

const user = await app.auth.signUp("ali@example.com", "secret123", { displayName: "Ali" });
// later
await app.auth.signIn("ali@example.com", "secret123");
app.auth.onAuthStateChanged(u => console.log(u ? "signed in as " + u.email : "signed out"));

4. Write & read data

const orders = app.db.collection("orders");
const doc = await orders.add({ item: "Biryani", qty: 2, status: "new" });   // -> { id, data, owner, createdAt }
const list = await orders.where("status", "==", "new").orderBy("createdAt", "desc").limit(20).get();
console.log(list.docs, list.total);
await orders.doc(doc.id).update({ status: "done" });
await orders.doc(doc.id).delete();

5. Go realtime

const stop = orders.onSnapshot(docs => {
  ul.innerHTML = docs.map(d => `<li>${d.data.item} × ${d.data.qty}</li>`).join("");
});
// stop() to unsubscribe

6. Secure it

Console → Rules. Default: read requires login, write only by owner. See Security Rules.

Full example (HTML)

<!doctype html><meta charset="utf-8">
<input id="em" placeholder="email"><input id="pw" type="password" placeholder="password">
<button onclick="login()">Login</button> <button onclick="app.auth.signOut()">Logout</button>
<input id="todo" placeholder="New todo"><button onclick="add()">Add</button>
<ul id="list"></ul>
<script src="https://clickbase.thepakclicktes.com/sdk/clickbase.js"></script>
<script>
const app = ClickBase.init({ projectId: "demo", apiKey: "cb_pk_..." });
const todos = app.db.collection("todos");
let stop = null;
app.auth.onAuthStateChanged(u => {
  if (stop) { stop(); stop = null; }
  if (u) stop = todos.orderBy("createdAt","desc").onSnapshot(render);
  else list.innerHTML = "<li>Please login</li>";
});
async function login(){ try { await app.auth.signIn(em.value, pw.value); } catch(e){ if (e.code==="auth/user-not-found") await app.auth.signUp(em.value, pw.value); else alert(e.message);} }
async function add(){ await todos.add({ text: todo.value, done:false }); todo.value=""; }
function render(docs){ list.innerHTML = docs.map(d => `<li>${d.data.text} <button onclick="todos.doc('${d.id}').delete()">x</button></li>`).join(""); }
</script>

Was this page helpful? Tell us. · Download SDK