AngularFire & Firebase Patterns Skill

🎯 Purpose

This skill provides implementation patterns for using @angular/fire in a Zoneless, Signal-first, and DDD-compliant Angular 20 application.

🛠️ Core Patterns

1. Repository Implementation (Infrastructure)

How to implement a Domain Repository using Firestore and Signals.

// src/app/integration/persistence/task-firestore.repository.ts import { inject, Injectable } from '@angular/core'; import { Firestore, collection, collectionData, query, where, doc, setDoc } from '@angular/fire/firestore'; import { toSignal } from '@angular/core/rxjs-interop'; import { TaskRepository } from '@domain/repositories'; import { TaskEntity } from '@domain/entities';

@Injectable({ providedIn: 'root' }) export class TaskFirestoreRepository implements TaskRepository { private firestore = inject(Firestore); private collection = collection(this.firestore, 'tasks');

// Return Observable (Infrastructure Standard) findByWorkspace(workspaceId: string): Observable<TaskEntity[]> { const q = query(this.collection, where('workspaceId', '==', workspaceId)); return collectionData(q, { idField: 'id' }) as Observable<TaskEntity[]>; }

async save(task: TaskEntity): Promise<void> { const docRef = doc(this.firestore, tasks/${task.id}); await setDoc(docRef, task); } }

2. Signal-Based Auth State (Account Module)

Standard pattern for building an Auth Store.

// src/app/account/application/stores/auth.store.ts import { inject } from '@angular/core'; import { Auth, user } from '@angular/fire/auth'; import { toSignal } from '@angular/core/rxjs-interop'; import { signalStore, withState, withComputed } from '@ngrx/signals';

export const AuthStore = signalStore( { providedIn: 'root' }, withComputed(() => { const auth = inject(Auth); // Transform Firebase User stream to Signal const currentUser = toSignal(user(auth));

return {
  user: currentUser,
  isAuthenticated: computed(() => !!currentUser()),
  userId: computed(() => currentUser()?.uid ?? null)
};

}) );

3. Error Mapping

Firebase errors should not reach the Domain or UI directly.

try { await signInWithEmailAndPassword(this.auth, email, password); } catch (error: any) { // Map Firebase Auth Error to Domain Error if (error.code === 'auth/wrong-password') { throw new InvalidCredentialsError(); } throw new InfrastructureError(error.message); }

🔐 Security Rules Checklist

• request.auth != null for all workspace data.

• Users can only read workspaces they are members of.

• Use get(/databases/(default)/documents/workspaces/$(workspaceId)).data.members for permission checks.

• No allow read, write: if true; even in development.

🚀 Optimization Patterns

• Zoneless Safety: Ensure all Firestore interactions are wrapped in Angular Signals to avoid missing change detection.

• Snapshot Transformation: Always map Timestamp objects to number (milliseconds) when converting to Domain Entities.

• Batching: Use writeBatch() for multiple updates to maintain atomicity and save costs.