Kolaybase + Angular: A Backend for Angular Apps

Install

npm install kolaybase-js

Create an injectable client

// src/app/kolaybase.service.ts
import { Injectable } from "@angular/core";
import { createClient } from "kolaybase-js";
import { environment } from "../environments/environment";

@Injectable({ providedIn: "root" })
export class Kolaybase {
  client = createClient({
    projectId: environment.kolaybaseProjectId,
    apiKey: environment.kolaybaseAnonKey,
  });
}

Put the anon key in environment.ts. Row-level security keeps it safe in the browser. Never ship a service key to an Angular bundle.

Use the service in a component

import { Component, inject, signal } from "@angular/core";
import { Kolaybase } from "./kolaybase.service";

@Component({ selector: "app-posts", template: "..." })
export class PostsComponent {
  private kb = inject(Kolaybase);
  posts = signal<any[]>([]);

  async ngOnInit() {
    const { data } = await this.kb.client.from("posts").select("id, title");
    this.posts.set(data ?? []);
  }
}

Frequently asked questions

Is it safe to use Kolaybase in an Angular app?

Yes, with the anon key and row-level security enabled. Policies run in the database, so users only access rows they're permitted to.

How do I track the current user in Angular?

Expose kb.auth.getUser and kb.auth.onAuthStateChange from your service and store the user in a signal or RxJS subject.

Other integrations