@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.
npm install @angular/fire firebase// 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';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()),
],
});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 {}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);
}
}@angular/fire is built around several key architectural patterns:
provideAuth()) and NgModules (AuthModule) for maximum compatibilityEssential 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;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>;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>;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[]>;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[]>;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>;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;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>;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;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;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;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>;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;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;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 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 {}interface FirebaseOptions {
apiKey?: string;
authDomain?: string;
projectId?: string;
storageBucket?: string;
messagingSenderId?: string;
appId?: string;
measurementId?: string;
}
interface FirebaseApp {
readonly name: string;
readonly options: FirebaseOptions;
}// 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>>;