ng add @angular/fire\n\n- **Dependency injection** - Provide and Inject Firebase services in your components.\n- **Zone.js wrappers** - Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering.\n- **Observable based** - Utilize RxJS rather than callbacks for real-time streams.\n- **NgRx friendly API** - Integrate with NgRx using AngularFire's action based APIs.\n- **Lazy-loading** - AngularFire dynamically imports much of Firebase, reducing the time to load your app.\n- **Deploy schematics** - Get your Angular application deployed on Firebase Hosting with a single command.\n- **Google Analytics** - Zero-effort Angular Router awareness in Google Analytics.\n- **Router Guards** - Guard your Angular routes with built-in Firebase Authentication checks.\n\n## Example use\n\n```ts\nimport { provideFirebaseApp, initializeApp } from '@angular/fire/app';\nimport { getFirestore, provideFirestore } from '@angular/fire/firestore';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideFirebaseApp(() => initializeApp({ ... })),\n provideFirestore(() => getFirestore()),\n ...\n ],\n ...\n})\n```\n\n```ts\nimport { AsyncPipe } from '@angular/common';\nimport { inject } from '@angular/core';\nimport { Firestore, collectionData, collection } from '@angular/fire/firestore';\n\ninterface Item {\n name: string,\n ...\n};\n\n@Component({\n selector: 'app-root',\n template: `\n
- \n @for (item of (item$ | async); track item) {\n
- \n {{ item.name }}\n \n }\n
| \n\n#### [Analytics](docs/analytics.md#analytics)\n```ts\nimport { } from '@angular/fire/analytics';\n```\n | \n\n\n#### [Authentication](docs/auth.md#authentication)\n```ts\nimport { } from '@angular/fire/auth';\n```\n | \n
| \n\n#### [Cloud Firestore](docs/firestore.md#cloud-firestore)\n```ts\nimport { } from '@angular/fire/firestore';\n```\n | \n\n\n#### [Cloud Functions](docs/functions.md#cloud-functions)\n```ts\nimport { } from '@angular/fire/functions';\n```\n | \n
| \n\n#### [Cloud Messaging](docs/messaging.md#cloud-messaging)\n```ts\nimport { } from '@angular/fire/messaging';\n```\n | \n\n\n#### [Cloud Storage](docs/storage.md#cloud-storage)\n```ts\nimport { } from '@angular/fire/storage';\n```\n | \n
| \n\n#### [Performance Monitoring](docs/performance.md#performance-monitoring)\n```ts\nimport { } from '@angular/fire/performance';\n```\n | \n\n\n#### [Realtime Database](docs/database.md#realtime-database)\n```ts\nimport { } from '@angular/fire/database';\n```\n | \n
| \n\n#### [Remote Config](docs/remote-config.md#remote-config)\n```ts\nimport { } from '@angular/fire/remote-config';\n```\n | \n\n\n#### [App Check](docs/app-check.md#app-check)\n```ts\nimport { } from '@angular/fire/app-check';\n```\n | \n
| \n\n#### [Vertex AI](docs/vertexai.md#vertex-ai)\n```ts\nimport { } from '@angular/fire/vertexai';\n```\n | \n\n
![](\"images/analytics-illo_1x.png\")
\n\n\nAngularFire ❱ Developer Guide ❱ Analytics\n\n\n# Analytics\n\nGoogle Analytics is an app measurement solution, available at no charge, that provides insight on app usage and user engagement.\n\n[Learn more](https://firebase.google.com/docs/analytics)\n\n## Dependency Injection\n\nAs a prerequisite, ensure that `AngularFire` has been added to your project via\n```bash\nng add @angular/fire\n```\n\nProvide a Analytics instance in the application's `app.config.ts`:\n\n```ts\nimport { provideFirebaseApp, initializeApp } from '@angular/fire/app';\nimport { provideAnalytics, getAnalytics } from '@angular/fire/analytics';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideFirebaseApp(() => initializeApp({ ... })),\n provideAnalytics(() => getAnalytics()),\n ...\n ],\n ...,\n}\n```\n\nNext inject `Analytics` into your component:\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { Analytics } from '@angular/fire/analytics';\n\n@Component({ ... })\nexport class UserProfileComponent {\n private analytics = inject(Analytics);\n ...\n}\n```\n\n## Firebase API\n\nAngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.\n\nUpdate the imports from `import { ... } from 'firebase/analytics'` to `import { ... } from '@angular/fire/analytics'` and follow the official documentation.\n\n[Getting Started](https://firebase.google.com/docs/analytics/get-started?platform=web) | [API Reference](https://firebase.google.com/docs/reference/js/analytics)\n"
},
{
"path": "docs/app-check.md",
"content": "\nAngularFire ❱ Developer Guide ❱ App Check\n\n\n![](\"images/reCAPTCHA-logo@1x.png\"){kind=logo}
\n\n# App Check\n\nApp Check helps protect your API resources from abuse by preventing unauthorized clients from accessing your backend resources. It works with both Firebase services, Google Cloud services, and your own APIs to keep your resources safe.\n\n[Learn More](https://firebase.google.com/docs/app-check)\n\n## Dependency Injection\n\nAs a prerequisite, ensure that `AngularFire` has been added to your project via\n```bash\nng add @angular/fire\n```\n\nProvide a App Check instance in the application's `app.config.ts`:\n\n```ts\nimport { provideFirebaseApp, initializeApp } from '@angular/fire/app';\nimport { provideAppCheck, initializeAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideFirebaseApp(() => initializeApp({ ... })),\n provideAppCheck(() => initializeAppCheck(getApp(), {\n provider: new ReCaptchaV3Provider(/* configuration */),\n })),\n ...\n ],\n ...\n})\n```\n\nNext inject `AppCheck` it into your component:\n\n```ts\nimport { Component, inject} from '@angular/core';\nimport { AppCheck } from '@angular/fire/app-check';\n\n@Component({ ... })\nexport class AppCheckComponent {\n private appCheck = inject(AppCheck);\n ...\n}\n```\n\n## Firebase API\n\nAngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.\n\nUpdate the imports from `import { ... } from 'firebase/app-check'` to `import { ... } from '@angular/fire/app-check'` and follow the official documentation.\n\n[Getting Started](https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider) | [API Reference](https://firebase.google.com/docs/reference/js/app-check)\n"
},
{
"path": "docs/auth.md",
"content": "![](\"images/auth-illo_1x.png\")
\n\n\nAngularFire ❱ Developer Guide ❱ Authentication\n\n\n# Authentication\n\nMost apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices.\nFirebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.\n\nFirebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.\n\n[Learn more about Firebase Authentication](https://firebase.google.com/docs/auth)\n\n## Dependency Injection\n\nAs a prerequisite, ensure that `AngularFire` has been added to your project via\n```bash\nng add @angular/fire\n```\n\nProvide a Auth instance in the application's `app.config.ts`:\n\n```ts\nimport { provideFirebaseApp, initializeApp } from '@angular/fire/app';\nimport { provideAuth, getAuth } from '@angular/fire/auth';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideFirebaseApp(() => initializeApp({ ... })),\n provideAuth(() => getAuth()),\n ...\n ],\n ...\n})\n```\n\nNext inject `Auth` into your component:\n\n```ts\nimport { Component, inject} from '@angular/core';\nimport { Auth } from '@angular/fire/auth';\n\n@Component({ ... })\nexport class LoginComponent {\n private auth = inject(Auth);\n ...\n}\n```\n\n## Firebase API\n\nAngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.\n\nUpdate the imports from `import { ... } from 'firebase/auth'` to `import { ... } from '@angular/fire/auth'` and follow the official documentation.\n\n[Getting Started](https://firebase.google.com/docs/auth/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/auth)\n\n## Server-side Rendering\n\nTo support Auth context in server-side rendering, you can provide `FirebaseServerApp`:\n\n```ts\nimport { ApplicationConfig, PLATFORM_ID, inject } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { provideFirebaseApp, initializeApp, initializeServeApp, initializeServerApp } from '@angular/fire/app';\nimport { provideAuth, getAuth } from '@angular/fire/auth';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideFirebaseApp(() => {\n if (isPlatformBrowser(inject(PLATFORM_ID))) {\n return initializeApp(firebaseConfig);\n }\n // Optional, since it's null in dev-mode and SSG\n const request = inject(REQUEST, { optional: true });\n const authIdToken = request?.headers.authorization?.split(\"Bearer \")[1];\n return initializeServerApp(firebaseConfig, {\n authIdToken,\n releaseOnDeref: request || undefined\n });\n }),\n provideAuth(() => getAuth(inject(FirebaseApp)),\n ...\n ],\n ...\n})\n```\n\nFollow Firebase's [ Session Management with Service Workers documentation](https://firebase.google.com/docs/auth/web/service-worker-sessions) to learn how to pass the `idToken` to the server. __Note: this will not currently work in dev-mode as Angular SSR does not provide a method to get the Request headers.__\n\n## Convenience observables\n\nAngularFire provides observables to allow convenient use of the Firebase Authentication with RXJS.\n\n### user\n\nThe `user` observable streams events triggered by sign-in, sign-out, and token refresh events.\n\nExample code:\n\n```ts\nimport { Auth, User, user } from '@angular/fire/auth';\n...\n\nexport class UserComponent implements OnDestroy {\n private auth: Auth = inject(Auth);\n user$ = user(auth);\n userSubscription: Subscription;\n ...\n\n constructor() {\n this.userSubscription = this.user$.subscribe((aUser: User | null) => {\n //handle user state changes here. Note, that user will be null if there is no currently logged in user.\n console.log(aUser);\n })\n }\n\n ngOnDestroy() {\n // when manually subscribing to an observable remember to unsubscribe in ngOnDestroy\n this.userSubscription.unsubscribe();\n }\n}\n\n```\n\n### authState\n\nThe `authState` observable streams events triggered by sign-in and sign-out events.\n\nExample code:\n```ts\nimport { Auth, authState } from '@angular/fire/auth';\n...\n\nexport class UserComponent implements OnDestroy {\n private auth: Auth = inject(Auth);\n authState$ = authState(auth);\n authStateSubscription: Subscription;\n ...\n\n constructor() {\n this.authStateSubscription = this.authState$.subscribe((aUser: User | null) => {\n //handle auth state changes here. Note, that user will be null if there is no currently logged in user.\n console.log(aUser);\n })\n }\n\n ngOnDestroy() {\n // when manually subscribing to an observable remember to unsubscribe in ngOnDestroy\n this.authStateSubscription.unsubscribe();\n }\n}\n```\n\n### idToken\n\nThe `idToken` observable streams events triggered by sign-in, sign-out and token refresh events.\n\nExample code:\n```ts\nimport { Auth, idToken } from '@angular/fire/auth';\n...\n\nexport class UserComponent implements OnDestroy {\n private auth: Auth = inject(Auth);\n idToken$ = idToken(auth);\n idTokenSubscription: Subscription;\n ...\n\n constructor() {\n this.idTokenSubscription = this.idToken$.subscribe((token: string | null) => {\n //handle idToken changes here. Note, that user will be null if there is no currently logged in user.\n console.log(string);\n })\n }\n\n ngOnDestroy() {\n // when manually subscribing to an observable remember to unsubscribe in ngOnDestroy\n this.idTokenSubscription.unsubscribe();\n }\n}\n```\n\n## Connecting the emulator suite\n\n```ts\nimport { connectAuthEmulator, getAuth, provideAuth } from '@angular/fire/auth';\n\n@NgModule({\n imports: [\n provideAuth(() => {\n const auth = getAuth();\n connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });\n return auth;\n }),\n ]\n})\n```\n"
},
{
"path": "docs/compat/analytics/getting-started.md",
"content": "# Getting started with Google Analytics\n\n`AngularFireAnalytics` dynamically imports the `firebase/analytics` library and provides a promisified version of the [Firebase Analytics SDK (`firebase.analytics.Analytics`)](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html).\n\n> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).\n\n### API:\n\n```ts\nclass AngularFireAnalytics {\n updateConfig(options: {[key:string]: any}): Promise\n
\n Hello {{ user.displayName }}!
\n \nPlease login.
\n \n- \n
- \n {{ item.name }}\n \n
- \n
- \n {{ item.name }}\n \n
- \n
- \n {{ shirt.name }} is {{ shirt.price }}\n \n
- \n
- \n {{ deposit.description }} for {{ deposit.amount }}\n \n
- \n
- \n {{ log.description }} for {{ log.amount }}\n \n
- \n
- \n {{ item.name }}\n \n
\n {{ (item | async)?.name }}\n
\n `\n})\nexport class AppComponent {\n private itemDoc: AngularFirestoreDocument\n
\n - \n
- \n {{ item.text }}\n \n
No results, try clearing filters
\n \n
\n Filter by size
\n \n \n \n \n\n
\n `,\n})\nexport class AppComponent {\n items$: ObservableFilter by color
\n \n \n \n \n\n\ntraceUntil(\n name: string,\n test: (T) => Boolean,\n options?: { orComplete?: true }\n)\n\n
\n\nTrace the observable until the first emission that passes the provided test.\n\nIf the `orComplete` option is passed it will complete the trace when the observable completes, even if an emission never passed the provided test.\n\n\n\ntraceWhile(\n name: string,\n test: (T) => Boolean,\n options?: { orComplete?: true }\n)\n\n
\n\nStarting with an emission that passes the provided test, trace until an emission fails the test.\n\nIf the `orComplete` option is passed it will complete any existing trace when the observable completes.\n\n### `traceUntilLast(name: string)`\n\nTrace the observable until completion.\n\n### `traceUntilFirst(name: string)`\n\nTraces the observable until the first emission.\n\n## Advanced usage\n\n### Configuration via Dependency Injection\n\nSet `INSTRUMENTATION_ENABLED` or `DATA_COLLECTION_ENABLED` to false disable all automatic and custom traces respectively."
},
{
"path": "docs/compat/remote-config/getting-started.md",
"content": "Getting started with Remote Config β
\n\n`AngularFireRemoteConfig` dynamically imports the `firebase/remote-config` library on demand, provides convenience observables, pipes, and a promisified version of the [Firebase Remote Config SDK (`firebase.remoteConfig.RemoteConfig`)](https://firebase.google.com/docs/reference/js/firebase.remoteconfig.RemoteConfig).\n\n> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).\n\n### API:\n\n```ts\nclass AngularFireRemoteConfigModule { }\n\ninterface ConfigTemplate {[key:string]: string|number|boolean}\n\ntype Parameter extends remoteConfig.Value {\n key: string,\n fetchTimeMillis: number\n}\n\nclass AngularFireRemoteConfig {\n changes: Observable- \n
- \n {{ item | json }}\n \n
- \n
- \n \n \n \n \n
{{ (item | async)?.name }}
\n `,\n})\nexport class AppComponent {\n item: Observable{{ item | async | json }}
\n \n \n\n \n \n \n `,\n})\nexport class AppComponent {\n itemRef: AngularFireObject
Firebase widgets!
\n\n
\n - \n
- \n {{ item.payload.val().text }}\n
{{ item.payload.key }}\n \n
No results, try clearing filters
\n \n
\n `,\n})\nexport class AppComponent {\n items$: ObservableFilter by size
\n \n \n \n \n \n{{ uploadPercent | async }}
\n {{ downloadURL | async }}\n `\n})\nexport class AppComponent {\n uploadPercent: Observable{{ meta | async }}ng add @angular/fire\n\n## Compatibility Developer Guide\n\nAngularFire has a new tree-shakable API, you're looking at the documentation for the compatability version of the library. [Find the new developer guide here](../README.md#developer-guide).\n\n[See the v7 upgrade guide for more information on this change.](version-7-upgrade.md).\n\n### Monitor usage of your application in production\n\n> `AngularFireAnalytics` provides a convenient method of interacting with Google Analytics in your Angular application. The provided `ScreenTrackingService` and `UserTrackingService` automatically log events when you're using the Angular Router or Firebase Authentication respectively. [Learn more about Google Analytics](https://firebase.google.com/docs/analytics).\n\n- [Getting started with Google Analytics](compat/analytics/getting-started.md)\n\n### Interacting with your database(s)\n\nFirebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. [Learn about the differences between them in the Firebase Documentation](https://firebase.google.com/docs/firestore/rtdb-vs-firestore).\n\n#### Cloud Firestore\n\n> `AngularFirestore` allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.\n\n- [Documents](compat/firestore/documents.md)\n- [Collections](compat/firestore/collections.md)\n- [Querying Collections](compat/firestore/querying-collections.md)\n- [Offline data](compat/firestore/offline-data.md)\n\n#### Realtime Database\n\n> `AngularFireDatabase` allows you to work with the Realtime Database, Firebase's original database. It's an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.\n\n- [Objects](compat/rtdb/objects.md)\n- [Lists](compat/rtdb/lists.md)\n- [Querying lists](compat/rtdb/querying-lists.md)\n\n### Authenticate users\n\n- [Getting started with Firebase Authentication](compat/auth/getting-started.md)\n- [Route users with AngularFire guards](compat/auth/router-guards.md)\n\n### Local Emulator Suite\n\n- [Getting started with Firebase Emulator Suite](compat/emulators/emulators.md)\n\n### Upload files\n\n- [Getting started with Cloud Storage](compat/storage/storage.md)\n\n### Receive push notifications\n\n- [Getting started with Firebase Messaging](compat/messaging/messaging.md)\n\n### **BETA:** Change behavior and appearance of your application without deploying\n\n> Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. [Learn more about Remote Config](https://firebase.google.com/docs/remote-config).\n\n- [Getting started with Remote Config](compat/remote-config/getting-started.md)\n\n### Monitor your application performance in production\n\n> Firebase Performance Monitoring is a service that helps you to gain insight into the performance characteristics of your iOS, Android, and web apps. [Learn more about Performance Monitoring](https://firebase.google.com/docs/perf-mon).\n\n- [Getting started with Performance Monitoring](compat/performance/getting-started.md)\n\n### Directly call Cloud Functions\n\n- [Getting started with Callable Functions](compat/functions/functions.md)\n" }, { "path": "docs/database.md", "content": "
![](\"images/database-illo_1x.png\")
\n\n\nAngularFire ❱ Developer Guide ❱ Realtime Database\n\n\n# Realtime Database\n\nStore and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.\n\nThe Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with our iOS, Android, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data. [Learn more about the Realtime Database](https://firebase.google.com/docs/database).\n\n## Dependency Injection\n\nAs a prerequisite, ensure that `AngularFire` has been added to your project via\n```bash\nng add @angular/fire\n```\n\nProvide a Database instance in the application's `app.config.ts`:\n\n```ts\nimport { provideFirebaseApp, initializeApp } from '@angular/fire/app';\nimport { provideDatabase, getDatabase } from '@angular/fire/database';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideFirebaseApp(() => initializeApp({ ... })),\n provideDatabase(() => getDatabase()),\n ...\n ],\n ...\n})\n```\n\nNext inject `Database` into your component:\n\n```ts\nimport { Component, inject } from '@angular/core';\nimport { Database } from '@angular/fire/database';\n\n@Component({...})\nexport class DepartmentComponent {\n private database = inject(Database);\n ...\n}\n```\n\n## Firebase API\n\nAngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.\n\nJust change your imports from `import { ... } from 'firebase/database'` to `import { ... } from '@angular/fire/database'` and follow the official documentation.\n\n[Getting Started](https://firebase.google.com/docs/database/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/database)\n\n## Convenience observables\n\nAngularFire provides observables to allow convenient use of the Realtime Database with RXJS.\n\n### `object`\n\nThe `object()` function creates an observable that emits object changes.\n\n| | |\n|-----------------|------------------------------------------|\n| **function** | `object(ref)` |\n| **params** | ref: `Reference` |\n| **return** | `Observable![](\"images/firestore-illo_1x.png\")
\n\n\nAngularFire ❱ Developer Guide ❱ Cloud Firestore\n\n\n# Cloud Firestore\n\nCloud Firestore is a flexible, scalable NoSQL database for mobile, web, and server development from Firebase and Google Cloud. It keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. \n\n[Learn more](https://firebase.google.com/docs/firestore)\n\nCloud Firestore is the API that gives your application access to your database in the cloud or locally in your [emulator](https://firebase.google.com/docs/emulator-suite).\n\n## Dependency Injection\n\nAs a prerequisite, ensure that `AngularFire` has been added to your project via\n```bash\nng add @angular/fire\n```\nProvide a Firestore instance in the application's `app.config.ts`:\n\n```ts\nimport { provideFirebaseApp, initializeApp } from '@angular/fire/app';\nimport { provideFirestore, getFirestore } from '@angular/fire/firestore';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideFirebaseApp(() => initializeApp({ ... })),\n provideFirestore(() => getFirestore()),\n ...\n ],\n ...\n}\n```\n\nNext inject `Firestore` into your component:\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { Firestore } from '@angular/fire/firestore';\n\n@Component({ ... })\nexport class UserProfileComponent {\n private firestore = inject(Firestore);\n ...\n}\n```\n\n## Firebase API\n\nAngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.\n\nUpdate the imports from `import { ... } from 'firebase/firestore'` to `import { ... } from '@angular/fire/firestore'` and follow the official documentation.\n\n[Getting Started](https://firebase.google.com/docs/firestore/quickstart#web-modular-api) | [API Reference](https://firebase.google.com/docs/reference/js/firestore)\n\n### Reading data\n\nIn Cloud Firestore data is stored in `documents` and `documents` are stored in `collections`. The path to data follows `User Profiles
\n- \n
- \n {{user.username}}\n \n