CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-angular--fire

Angular + Firebase integration library providing Angular-native services, dependency injection, Zone.js wrappers, Observable-based APIs, and comprehensive Firebase service support.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@angular/fire

@angular/fire is the official Angular library for Firebase, providing seamless integration between Angular applications and Firebase services. It offers Angular-native services with dependency injection, Zone.js wrappers for proper change detection, Observable-based APIs using RxJS, lazy-loading capabilities, and comprehensive support for all major Firebase services.

Package Information

  • Package Name: @angular/fire
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/fire firebase

Core Imports

// Core utilities and version info
import { VERSION, LogLevel, setLogLevel } from '@angular/fire';

// Firebase app initialization
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

For compatibility with legacy Firebase v8:

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';

Basic Usage

Standalone API (Angular 14+)

import { bootstrapApplication } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

const firebaseConfig = {
  // Your Firebase config
};

bootstrapApplication(AppComponent, {
  providers: [
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
  ],
});

NgModule API

import { NgModule } from '@angular/core';
import { FirebaseAppModule, initializeApp } from '@angular/fire/app';
import { AuthModule } from '@angular/fire/auth';
import { FirestoreModule } from '@angular/fire/firestore';

@NgModule({
  imports: [
    FirebaseAppModule.forRoot(firebaseConfig),
    AuthModule,
    FirestoreModule,
  ],
})
export class AppModule {}

Service Usage in Components

import { Component, inject } from '@angular/core';
import { Auth, signInWithEmailAndPassword, user } from '@angular/fire/auth';
import { Firestore, collection, addDoc } from '@angular/fire/firestore';

@Component({
  selector: 'app-example',
  template: `...`,
})
export class ExampleComponent {
  private auth = inject(Auth);
  private firestore = inject(Firestore);
  user$ = user(this.auth);

  async signIn(email: string, password: string) {
    return signInWithEmailAndPassword(this.auth, email, password);
  }

  async addData(data: any) {
    const collectionRef = collection(this.firestore, 'items');
    return addDoc(collectionRef, data);
  }
}

Architecture

@angular/fire is built around several key architectural patterns:

  • Dual Provider System: Both standalone providers (provideAuth()) and NgModules (AuthModule) for maximum compatibility
  • Zone Integration: All Firebase operations are automatically wrapped with Angular's Zone.js for proper change detection
  • Observable APIs: RxFire integration provides reactive streams for real-time Firebase data
  • Lazy Loading: Services are tree-shakable and only load when imported
  • Angular DI: Full integration with Angular's dependency injection system
  • TypeScript Support: Complete type safety for all Firebase APIs

Core Library

Core Functions

Essential utilities and zone integration for Angular Firebase apps.

// Version information
export const VERSION: Version;

// Logging control
export enum LogLevel {
  SILENT = 0,
  WARN = 1,
  VERBOSE = 2
}
export function setLogLevel(logLevel: LogLevel): void;

// Zone integration utilities
export class ɵZoneScheduler implements SchedulerLike {
  constructor(private zone: any, private delegate?: any);
  now(): number;
  schedule(work: (this: SchedulerAction<any>, state?: any) => void, delay?: number, state?: any): Subscription;
}

export class ɵAngularFireSchedulers {
  readonly outsideAngular: ɵZoneScheduler;
  readonly insideAngular: ɵZoneScheduler;
}

// Internal utilities for dependency injection
export function ɵgetDefaultInstanceOf<T>(identifier: string, provided: T[] | undefined, defaultApp: FirebaseApp): T | undefined;
export function ɵgetAllInstancesOf<T>(identifier: string, app?: FirebaseApp): T[];
export function ɵzoneWrap<T extends (...args: any[]) => any>(fn: T, skipFirst?: boolean): T;

Capabilities

Firebase App

Core Firebase application initialization and configuration. Required foundation for all other Firebase services.

// Standalone provider
export function provideFirebaseApp(
  fn: () => FirebaseApp
): EnvironmentProviders;

// Service
export class FirebaseApp extends FirebaseApp {}
export class FirebaseApps extends Array<FirebaseApp> {}
export const firebaseApp$: Observable<FirebaseApp>;

Firebase App

Authentication

Comprehensive user authentication with support for email/password, social providers, anonymous auth, and custom authentication flows.

// Standalone provider
export function provideAuth(fn: () => Auth): EnvironmentProviders;

// Core service
export class Auth extends Auth {}
export const authState: (auth: Auth) => Observable<User | null>;
export const user: (auth: Auth) => Observable<User | null>;
export const idToken: (auth: Auth) => Observable<string | null>;

// Key auth functions
export function signInWithEmailAndPassword(
  auth: Auth,
  email: string,
  password: string
): Promise<UserCredential>;
export function createUserWithEmailAndPassword(
  auth: Auth,
  email: string,
  password: string
): Promise<UserCredential>;
export function signOut(auth: Auth): Promise<void>;

Authentication

Firestore

Cloud Firestore NoSQL database with real-time synchronization, offline support, and powerful querying capabilities.

// Standalone provider
export function provideFirestore(fn: () => Firestore): EnvironmentProviders;

// Core service
export class Firestore extends Firestore {}

// Document operations
export function doc(firestore: Firestore, path: string): DocumentReference;
export function setDoc<T>(ref: DocumentReference<T>, data: T): Promise<void>;
export function getDoc<T>(ref: DocumentReference<T>): Promise<DocumentSnapshot<T>>;
export function deleteDoc(ref: DocumentReference): Promise<void>;

// Collection operations
export function collection(firestore: Firestore, path: string): CollectionReference;
export function addDoc<T>(ref: CollectionReference<T>, data: T): Promise<DocumentReference<T>>;
export function getDocs<T>(query: Query<T>): Promise<QuerySnapshot<T>>;

// Real-time observables
export function docData<T>(ref: DocumentReference<T>): Observable<T | undefined>;
export function collectionData<T>(ref: CollectionReference<T> | Query<T>): Observable<T[]>;

Firestore

Realtime Database

Firebase Realtime Database with real-time synchronization and offline capabilities.

// Standalone provider
export function provideDatabase(fn: () => Database): EnvironmentProviders;

// Core service
export class Database extends Database {}

// Database operations
export function ref(database: Database, path?: string): DatabaseReference;
export function set(ref: DatabaseReference, value: any): Promise<void>;
export function update(ref: DatabaseReference, values: object): Promise<void>;
export function remove(ref: DatabaseReference): Promise<void>;

// Real-time observables
export function objectVal<T>(ref: DatabaseReference): Observable<T | null>;
export function listVal<T>(ref: DatabaseReference): Observable<T[]>;

Realtime Database

Cloud Storage

Firebase Cloud Storage for uploading and serving user-generated content like images, videos, and other files.

// Standalone provider
export function provideStorage(fn: () => Storage): EnvironmentProviders;

// Core service
export class Storage extends Storage {}

// Storage operations
export function ref(storage: Storage, path?: string): StorageReference;
export function uploadBytes(ref: StorageReference, data: Blob | Uint8Array): Promise<UploadResult>;
export function getDownloadURL(ref: StorageReference): Promise<string>;
export function deleteObject(ref: StorageReference): Promise<void>;

// Upload progress observables
export function uploadBytesResumable(
  ref: StorageReference,
  data: Blob | Uint8Array
): UploadTask;
export function percentage(task: UploadTask): Observable<number>;

Cloud Storage

Analytics

Google Analytics integration with automatic screen tracking and custom event logging.

// Standalone provider
export function provideAnalytics(fn: () => Analytics): EnvironmentProviders;

// Core service
export class Analytics extends Analytics {}

// Analytics functions
export function logEvent(
  analytics: Analytics,
  eventName: string,
  eventParams?: object
): void;
export function setUserId(analytics: Analytics, id: string | null): void;
export function setUserProperties(analytics: Analytics, properties: object): void;

Analytics

Cloud Functions

Call server-side functions directly from your Angular app with automatic serialization and error handling.

// Standalone provider
export function provideFunctions(fn: () => Functions): EnvironmentProviders;

// Core service
export class Functions extends Functions {}

// Functions operations
export function httpsCallable<T = any, R = any>(
  functions: Functions,
  name: string
): HttpsCallable<T, R>;

Cloud Functions

Cloud Messaging

Firebase Cloud Messaging for push notifications and background messaging.

// Standalone provider
export function provideMessaging(fn: () => Messaging): EnvironmentProviders;

// Core service
export class Messaging extends Messaging {}

// Messaging functions
export function getToken(messaging: Messaging): Promise<string>;
export function onMessage(
  messaging: Messaging,
  nextOrObserver: (payload: MessagePayload) => void
): Unsubscribe;

Cloud Messaging

Performance Monitoring

Monitor your app's performance with automatic and custom performance traces.

// Standalone provider
export function providePerformance(fn: () => Performance): EnvironmentProviders;

// Core service
export class Performance extends Performance {}

// Performance functions
export function trace(performance: Performance, name: string): Trace;

Performance Monitoring

Remote Config

Dynamically configure your app's behavior and appearance without requiring an app update.

// Standalone provider
export function provideRemoteConfig(fn: () => RemoteConfig): EnvironmentProviders;

// Core service
export class RemoteConfig extends RemoteConfig {}

// Remote Config functions
export function fetchAndActivate(remoteConfig: RemoteConfig): Promise<boolean>;
export function getValue(remoteConfig: RemoteConfig, key: string): Value;

Remote Config

App Check

Protect your app's backend resources from abuse by ensuring requests are coming from authentic instances of your app.

// Standalone provider
export function provideAppCheck(fn: () => AppCheck): EnvironmentProviders;

// Core service
export class AppCheck extends AppCheck {}

// App Check functions
export function getToken(appCheck: AppCheck): Promise<AppCheckToken>;

App Check

Auth Guard

Angular route guards and utilities for implementing authentication-based routing and access control.

// Auth Guard
export class AuthGuard implements CanActivate {
  canActivate(): Observable<boolean>;
}

// Auth pipes
export const loggedIn: AuthPipe;
export const isNotAnonymous: AuthPipe;
export const emailVerified: AuthPipe;

// Helper functions
export function redirectUnauthorizedTo(redirect: any[]): AuthPipe;
export function redirectLoggedInTo(redirect: any[]): AuthPipe;
export function hasCustomClaim(claim: string): AuthPipe;

Auth Guard

Vertex AI

Google Cloud Vertex AI integration for generative AI capabilities.

// Standalone provider
export function provideVertexAI(fn: () => VertexAI): EnvironmentProviders;

// Core service
export class VertexAI extends VertexAI {}

// Vertex AI functions
export function getGenerativeModel(
  vertexAI: VertexAI,
  modelParams: ModelParams
): GenerativeModel;

Vertex AI

Firebase AI

Firebase AI services for machine learning and artificial intelligence features.

// Standalone provider
export function provideAI(fn: () => AI): EnvironmentProviders;

// Core service
export class AI extends AI {}

Firebase AI

Data Connect

Firebase Data Connect for relational database integration and GraphQL-like queries.

// Standalone provider
export function provideDataConnect(fn: () => DataConnect): EnvironmentProviders;

// Core service
export class DataConnect extends DataConnect {}

Data Connect

Core Types

Firebase App Types

interface FirebaseOptions {
  apiKey?: string;
  authDomain?: string;
  projectId?: string;
  storageBucket?: string;
  messagingSenderId?: string;
  appId?: string;
  measurementId?: string;
}

interface FirebaseApp {
  readonly name: string;
  readonly options: FirebaseOptions;
}

Common Types

// Angular provider types
type EnvironmentProviders = Provider[];
interface Provider {
  provide: any;
  useValue?: any;
  useFactory?: (...args: any[]) => any;
  deps?: any[];
}

interface ModuleWithProviders<T> {
  ngModule: Type<T>;
  providers?: Provider[];
}

// RxJS types
interface Observable<T> {
  subscribe(observer: (value: T) => void): Subscription;
  pipe<U>(...operators: any[]): Observable<U>;
}

interface Subscription {
  unsubscribe(): void;
}

// Zone scheduler types
interface SchedulerLike {
  now(): number;
  schedule(work: (this: SchedulerAction<any>, state?: any) => void, delay?: number, state?: any): Subscription;
}

interface SchedulerAction<T> {
  schedule(state?: T, delay?: number): Subscription;
  execute(state: T, delay?: number): any;
}

// Firebase SDK base types
interface FirebaseError extends Error {
  code: string;
  message: string;
  name: string;
}

type Unsubscribe = () => void;

// Utility types
type Partial<T> = {
  [P in keyof T]?: T[P];
};

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/fire@20.0.x
Publish Source
CLI
Badge
tessl/npm-angular--fire badge