basefyio + Angular: A Backend for Angular Apps

Install

npm install basefyio-js

Create an injectable client

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

@Injectable({ providedIn: "root" })
export class basefyio {
  client = createClient({
    projectId: environment.basefyioProjectId,
    apiKey: environment.basefyioAnonKey,
  });
}

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 { basefyio } from "./basefyio.service";

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

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

Frequently asked questions

Is it safe to use basefyio 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 bf.auth.getUser and bf.auth.onAuthStateChange from your service and store the user in a signal or RxJS subject.

Other integrations