@angular/fire 16.0.0 → 17.0.0-canary.05e9da2

package/README.md

@@ -7,18 +7,14 @@ by conforming to Angular conventions.
 
 <strong><pre>ng add @angular/fire</pre></strong>
 
-_Note: If you want to ng add AngularFire and will be using Hosting/Cloud Functions, you need to configure the 
-Firebase CLI first so that you are logged in for the schematics that are run as part of `ng add @angular/fire`.
-Follow [this guide](docs/install-firebase-tools.md) to have the Firebase CLI walk you through the setup._
-
-- **Dependency injection** - Provide and Inject Firebase services in your components
-- **Zone.js wrappers** - Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering
-- **Observable based** - Utilize RxJS rather than callbacks for realtime streams
+- **Dependency injection** - Provide and Inject Firebase services in your components.
+- **Zone.js wrappers** - Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering.
+- **Observable based** - Utilize RxJS rather than callbacks for real-time streams.
 - **NgRx friendly API** - Integrate with NgRx using AngularFire's action based APIs.
-- **Lazy-loading** - AngularFire dynamically imports much of Firebase, reducing time to load your app
-- **Deploy schematics** - Get your Angular application deployed on Firebase Hosting with a single command
-- **Google Analytics** - Zero-effort Angular Router awareness in Google Analytics
-- **Router Guards** - Guard your Angular routes with built-in Firebase Authentication checks
+- **Lazy-loading** - AngularFire dynamically imports much of Firebase, reducing the time to load your app.
+- **Deploy schematics** - Get your Angular application deployed on Firebase Hosting with a single command.
+- **Google Analytics** - Zero-effort Angular Router awareness in Google Analytics.
+- **Router Guards** - Guard your Angular routes with built-in Firebase Authentication checks.
 
 ## Example use
 
@@ -62,14 +58,14 @@ export class AppComponent {
 
   constructor() {
     const itemCollection = collection(this.firestore, 'items');
-    this.item$ = collectionData(itemCollection);
+    this.item$ = collectionData<Item>(itemCollection);
   }
 }
 ```
 
 ### Polyfills
 
-Neither AngularFire or Firebase ship with polyfills. To have compatibility across as wide-range of environments we suggest the following polyfills be added to your application:
+Neither AngularFire nor Firebase ship with polyfills. To have compatibility across a wide-range of environments, we suggest the following polyfills be added to your application:
 
 | API | Environments | Suggested Polyfill | License |
 |-----|--------------|--------------------|---------|
@@ -104,7 +100,7 @@ Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?d
 
 ## Developer Guide
 
-This developer guide assimes you're using the new tree-shakable AngularFire API, [if you're looking for the compatability API you can find the documentation here](docs/compat.md).
+This developer guide assumes you're using the new tree-shakable AngularFire API, [if you're looking for the compatability API you can find the documentation here](docs/compat.md).
 
 [See the v7 upgrade guide for more information on this change.](docs/version-7-upgrade.md).
 

package/analytics/analytics.module.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, Injector, ModuleWithProviders, NgZone } from '@angular/core';
+import { EnvironmentProviders, InjectionToken, Injector, NgZone } from '@angular/core';
 import { FirebaseApp } from '@angular/fire/app';
 import { Analytics as FirebaseAnalytics } from 'firebase/analytics';
 import { Analytics } from './analytics';
@@ -14,4 +14,4 @@ export declare class AnalyticsModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<AnalyticsModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AnalyticsModule>;
 }
-export declare function provideAnalytics(fn: (injector: Injector) => FirebaseAnalytics, ...deps: any[]): ModuleWithProviders<AnalyticsModule>;
+export declare function provideAnalytics(fn: (injector: Injector) => FirebaseAnalytics, ...deps: any[]): EnvironmentProviders;

package/analytics/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/angular-fire-analytics.mjs"
+}

package/app/app.module.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, Injector, ModuleWithProviders, NgZone } from '@angular/core';
+import { EnvironmentProviders, InjectionToken, Injector, NgZone } from '@angular/core';
 import { FirebaseApp as IFirebaseApp } from 'firebase/app';
 import { FirebaseApp } from './app';
 import * as i0 from "@angular/core";
@@ -11,4 +11,4 @@ export declare class FirebaseAppModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<FirebaseAppModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FirebaseAppModule>;
 }
-export declare function provideFirebaseApp(fn: (injector: Injector) => IFirebaseApp, ...deps: any[]): ModuleWithProviders<FirebaseAppModule>;
+export declare function provideFirebaseApp(fn: (injector: Injector) => IFirebaseApp, ...deps: any[]): EnvironmentProviders;

package/app/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/angular-fire-app.mjs"
+}

package/app-check/app-check.module.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, Injector, ModuleWithProviders, NgZone } from '@angular/core';
+import { EnvironmentProviders, InjectionToken, Injector, NgZone } from '@angular/core';
 import { FirebaseApp } from '@angular/fire/app';
 import { AppCheck as FirebaseAppCheck } from 'firebase/app-check';
 import { AppCheck } from './app-check';
@@ -12,4 +12,4 @@ export declare class AppCheckModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<AppCheckModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AppCheckModule>;
 }
-export declare function provideAppCheck(fn: (injector: Injector) => FirebaseAppCheck, ...deps: any[]): ModuleWithProviders<AppCheckModule>;
+export declare function provideAppCheck(fn: (injector: Injector) => FirebaseAppCheck, ...deps: any[]): EnvironmentProviders;

package/app-check/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/angular-fire-app-check.mjs"
+}

package/auth/auth.module.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, Injector, ModuleWithProviders, NgZone } from '@angular/core';
+import { EnvironmentProviders, InjectionToken, Injector, NgZone } from '@angular/core';
 import { FirebaseApp } from '@angular/fire/app';
 import { Auth as FirebaseAuth } from 'firebase/auth';
 import { Auth } from './auth';
@@ -12,4 +12,4 @@ export declare class AuthModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<AuthModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AuthModule>;
 }
-export declare function provideAuth(fn: (injector: Injector) => FirebaseAuth, ...deps: any[]): ModuleWithProviders<AuthModule>;
+export declare function provideAuth(fn: (injector: Injector) => FirebaseAuth, ...deps: any[]): EnvironmentProviders;

package/auth/firebase.d.ts

@@ -1,5 +1,5 @@
 export * from 'firebase/auth';
-import { applyActionCode as _applyActionCode, beforeAuthStateChanged as _beforeAuthStateChanged, checkActionCode as _checkActionCode, confirmPasswordReset as _confirmPasswordReset, connectAuthEmulator as _connectAuthEmulator, createUserWithEmailAndPassword as _createUserWithEmailAndPassword, deleteUser as _deleteUser, fetchSignInMethodsForEmail as _fetchSignInMethodsForEmail, getAdditionalUserInfo as _getAdditionalUserInfo, getAuth as _getAuth, getIdToken as _getIdToken, getIdTokenResult as _getIdTokenResult, getMultiFactorResolver as _getMultiFactorResolver, getRedirectResult as _getRedirectResult, initializeAuth as _initializeAuth, initializeRecaptchaConfig as _initializeRecaptchaConfig, isSignInWithEmailLink as _isSignInWithEmailLink, linkWithCredential as _linkWithCredential, linkWithPhoneNumber as _linkWithPhoneNumber, linkWithPopup as _linkWithPopup, linkWithRedirect as _linkWithRedirect, multiFactor as _multiFactor, onAuthStateChanged as _onAuthStateChanged, onIdTokenChanged as _onIdTokenChanged, parseActionCodeURL as _parseActionCodeURL, reauthenticateWithCredential as _reauthenticateWithCredential, reauthenticateWithPhoneNumber as _reauthenticateWithPhoneNumber, reauthenticateWithPopup as _reauthenticateWithPopup, reauthenticateWithRedirect as _reauthenticateWithRedirect, reload as _reload, sendEmailVerification as _sendEmailVerification, sendPasswordResetEmail as _sendPasswordResetEmail, sendSignInLinkToEmail as _sendSignInLinkToEmail, setPersistence as _setPersistence, signInAnonymously as _signInAnonymously, signInWithCredential as _signInWithCredential, signInWithCustomToken as _signInWithCustomToken, signInWithEmailAndPassword as _signInWithEmailAndPassword, signInWithEmailLink as _signInWithEmailLink, signInWithPhoneNumber as _signInWithPhoneNumber, signInWithPopup as _signInWithPopup, signInWithRedirect as _signInWithRedirect, signOut as _signOut, unlink as _unlink, updateCurrentUser as _updateCurrentUser, updateEmail as _updateEmail, updatePassword as _updatePassword, updatePhoneNumber as _updatePhoneNumber, updateProfile as _updateProfile, useDeviceLanguage as _useDeviceLanguage, validatePassword as _validatePassword, verifyBeforeUpdateEmail as _verifyBeforeUpdateEmail, verifyPasswordResetCode as _verifyPasswordResetCode } from 'firebase/auth';
+import { applyActionCode as _applyActionCode, beforeAuthStateChanged as _beforeAuthStateChanged, checkActionCode as _checkActionCode, confirmPasswordReset as _confirmPasswordReset, connectAuthEmulator as _connectAuthEmulator, createUserWithEmailAndPassword as _createUserWithEmailAndPassword, deleteUser as _deleteUser, fetchSignInMethodsForEmail as _fetchSignInMethodsForEmail, getAdditionalUserInfo as _getAdditionalUserInfo, getAuth as _getAuth, getIdToken as _getIdToken, getIdTokenResult as _getIdTokenResult, getMultiFactorResolver as _getMultiFactorResolver, getRedirectResult as _getRedirectResult, initializeAuth as _initializeAuth, initializeRecaptchaConfig as _initializeRecaptchaConfig, isSignInWithEmailLink as _isSignInWithEmailLink, linkWithCredential as _linkWithCredential, linkWithPhoneNumber as _linkWithPhoneNumber, linkWithPopup as _linkWithPopup, linkWithRedirect as _linkWithRedirect, multiFactor as _multiFactor, onAuthStateChanged as _onAuthStateChanged, onIdTokenChanged as _onIdTokenChanged, parseActionCodeURL as _parseActionCodeURL, reauthenticateWithCredential as _reauthenticateWithCredential, reauthenticateWithPhoneNumber as _reauthenticateWithPhoneNumber, reauthenticateWithPopup as _reauthenticateWithPopup, reauthenticateWithRedirect as _reauthenticateWithRedirect, reload as _reload, revokeAccessToken as _revokeAccessToken, sendEmailVerification as _sendEmailVerification, sendPasswordResetEmail as _sendPasswordResetEmail, sendSignInLinkToEmail as _sendSignInLinkToEmail, setPersistence as _setPersistence, signInAnonymously as _signInAnonymously, signInWithCredential as _signInWithCredential, signInWithCustomToken as _signInWithCustomToken, signInWithEmailAndPassword as _signInWithEmailAndPassword, signInWithEmailLink as _signInWithEmailLink, signInWithPhoneNumber as _signInWithPhoneNumber, signInWithPopup as _signInWithPopup, signInWithRedirect as _signInWithRedirect, signOut as _signOut, unlink as _unlink, updateCurrentUser as _updateCurrentUser, updateEmail as _updateEmail, updatePassword as _updatePassword, updatePhoneNumber as _updatePhoneNumber, updateProfile as _updateProfile, useDeviceLanguage as _useDeviceLanguage, validatePassword as _validatePassword, verifyBeforeUpdateEmail as _verifyBeforeUpdateEmail, verifyPasswordResetCode as _verifyPasswordResetCode } from 'firebase/auth';
 export declare const applyActionCode: typeof _applyActionCode;
 export declare const beforeAuthStateChanged: typeof _beforeAuthStateChanged;
 export declare const checkActionCode: typeof _checkActionCode;
@@ -30,6 +30,7 @@ export declare const reauthenticateWithPhoneNumber: typeof _reauthenticateWithPh
 export declare const reauthenticateWithPopup: typeof _reauthenticateWithPopup;
 export declare const reauthenticateWithRedirect: typeof _reauthenticateWithRedirect;
 export declare const reload: typeof _reload;
+export declare const revokeAccessToken: typeof _revokeAccessToken;
 export declare const sendEmailVerification: typeof _sendEmailVerification;
 export declare const sendPasswordResetEmail: typeof _sendPasswordResetEmail;
 export declare const sendSignInLinkToEmail: typeof _sendSignInLinkToEmail;

package/auth/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/angular-fire-auth.mjs"
+}

package/auth-guard/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/angular-fire-auth-guard.mjs"
+}

package/compat/analytics/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-analytics.mjs"
+}

package/compat/auth/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-auth.mjs"
+}

package/compat/auth-guard/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-auth-guard.mjs"
+}

package/compat/database/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-database.mjs"
+}

package/compat/firestore/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-firestore.mjs"
+}

package/compat/functions/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-functions.mjs"
+}

package/compat/messaging/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-messaging.mjs"
+}

package/compat/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/angular-fire-compat.mjs"
+}

package/compat/performance/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-performance.mjs"
+}

package/compat/remote-config/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-remote-config.mjs"
+}

package/compat/storage/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../../fesm2022/angular-fire-compat-storage.mjs"
+}

package/database/database.module.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, Injector, ModuleWithProviders, NgZone } from '@angular/core';
+import { EnvironmentProviders, InjectionToken, Injector, NgZone } from '@angular/core';
 import { FirebaseApp } from '@angular/fire/app';
 import { Database as FirebaseDatabase } from 'firebase/database';
 import { Database } from './database';
@@ -12,4 +12,4 @@ export declare class DatabaseModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<DatabaseModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DatabaseModule>;
 }
-export declare function provideDatabase(fn: (injector: Injector) => FirebaseDatabase, ...deps: any[]): ModuleWithProviders<DatabaseModule>;
+export declare function provideDatabase(fn: (injector: Injector) => FirebaseDatabase, ...deps: any[]): EnvironmentProviders;

package/database/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/angular-fire-database.mjs"
+}

package/docs/compat/auth/getting-started.md

@@ -4,7 +4,7 @@
 
 `AngularFireAuth` promise proxies an initialized
 `firebase.auth.Auth` instance, allowing you to log users in, out, etc. [See
-the Firebase docs for more information on what methods are available.](https://firebase.google.com/docs/reference/js/firebase.auth.Auth)
+the Firebase docs for more information on what methods are available.](https://firebase.google.com/docs/reference/js/auth.auth)
 
 > **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).
 
@@ -65,7 +65,7 @@ import { SETTINGS as AUTH_SETTINGS } from '@angular/fire/compat/auth';
 export class AppModule { }
 ```
 
-Read more at [Firebase Auth Settings](https://firebase.google.com/docs/reference/js/firebase.auth.AuthSettings).
+Read more at [Firebase Auth Settings](https://firebase.google.com/docs/reference/js/auth.authsettings).
 
 ### Use Current Browser Language
 
@@ -90,7 +90,7 @@ export class AppModule { }
 If you want to set a different language, you can use `LANGUAGE_CODE` DI Token
 (*default: null*).
 
-More info at the [firebase auth docs](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#languagecode).
+More info at the [firebase auth docs](https://firebase.google.com/docs/reference/js/auth.auth#authlanguagecode).
 
 ```ts
 import { LANGUAGE_CODE } from '@angular/fire/compat/auth';
@@ -150,7 +150,7 @@ export class AppModule { }
 ```
 
 - [Multi-Tenancy Authentication](https://cloud.google.com/identity-platform/docs/multi-tenancy-authentication)
-- [Firebase Auth Tenant](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#tenantid)
+- [Firebase Auth Tenant](https://firebase.google.com/docs/reference/js/auth.auth#tenantid)
 
 ## UI Libraries
 

package/docs/compat/emulators/emulators.md

@@ -60,6 +60,21 @@ Follow the instructions to download whatever emulator you want to use then check
 }
 ```
 
+Then launch the emulators by running
+
+```shell
+firebase emulators:start
+```
+
+Then you can visit 
+
+```shell
+┌─────────────────────────────────────────────────────────────┐
+│ ✔  All emulators ready! It is now safe to connect your app. │
+│ i  View Emulator UI at http://127.0.0.1:4000/               │
+└─────────────────────────────────────────────────────────────┘
+```
+
 ## Import the DI Tokens at your AppModule
 
 Configuring your app to connect to local emulators is easily done by using dependency injection tokens provided by the library. However, there are slighty changes between 6.0.0 and 6.1.0 in the way it was done.
@@ -68,6 +83,17 @@ Configuring your app to connect to local emulators is easily done by using depen
 
 Each module (database, firestore, auth, function) provides `USE_EMULATOR` token to configure the emulator `host` and `port` by passing a tuple of `[string, number]` values, which are set by default to `localhost` and the asigned port from your `firebase.json` file.
 
+Update your `environment.ts` file:
+
+```ts
+export const environment = {
+  production: false,
+  useEmulators: true,
+  ...
+}
+
+```
+
 Import these tokens at your `app.module.ts` as follow:
 
 ```ts
@@ -80,7 +106,7 @@ import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/compat/fun
   // ... Existing configuration
   providers: [
     // ... Existing Providers
-    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined },
+    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 9099] : undefined },
     { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },
     { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
     { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined },
@@ -131,4 +157,4 @@ import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/compat/firestore';
 export class AppModule { }
 ```
 
-For older versions, please upgrade your app to latest version to get the advantages of these new features :rocket: 
+For older versions, please upgrade your app to latest version to get the advantages of these new features :rocket: 

package/docs/compat/firestore/collections.md

@@ -7,7 +7,7 @@ Each *document* contains a set of key-value pairs. Cloud Firestore is optimized
 
 ## Using `AngularFirestoreCollection`
 
-The `AngularFirestoreCollection` service is a wrapper around the native Firestore SDK's [`CollectionReference`](https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference) and [`Query`](https://firebase.google.com/docs/reference/js/firebase.firestore.Query) types. It is a generic service that provides you with a strongly typed set of methods for manipulating and streaming data. This service is designed for use as an `@Injectable()`.
+The `AngularFirestoreCollection` service is a wrapper around the native Firestore SDK's [`CollectionReference`](https://firebase.google.com/docs/reference/js/v8/firebase.firestore.CollectionReference) and [`Query`](https://firebase.google.com/docs/reference/js/v8/firebase.firestore.Query) types. It is a generic service that provides you with a strongly typed set of methods for manipulating and streaming data. This service is designed for use as an `@Injectable()`.
 
 ```ts
 import { Component } from '@angular/core';

package/docs/compat/firestore/querying-collections.md

@@ -1,13 +1,13 @@
 # 4. Querying Collections in AngularFirestore
 
 > Firestore has [powerful querying syntax](https://firebase.google.com/docs/firestore/query-data/queries) and the `AngularFirestoreCollection` provides a thin wrapper around it. This keeps you from having to learn two query syntax systems.
-If you know the [Firestore query API](https://firebase.google.com/docs/reference/js/firebase.firestore.Query) then you know how to query in AngularFirestore.
+If you know the [Firestore query API](https://firebase.google.com/docs/reference/js/v8/firebase.firestore.Query) then you know how to query in AngularFirestore.
 
 > **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).
 
 ## Creating a query with primitive/scalar values
 
-Queries are created by building on the [`firebase.firestore.CollectionReference`](https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference).
+Queries are created by building on the [`firebase.firestore.CollectionReference`](https://firebase.google.com/docs/reference/js/v8/firebase.firestore.CollectionReference).
 
 ```ts
 afs.collection('items', ref => ref.where('size', '==', 'large'))

package/docs/compat.md

@@ -38,7 +38,7 @@ Firebase offers two cloud-based, client-accessible database solutions that suppo
 
 ### Authenticate users
 
-- [Getting started with Firebase Authentication](acompat/uth/getting-started.md)
+- [Getting started with Firebase Authentication](compat/auth/getting-started.md)
 - [Route users with AngularFire guards](compat/auth/router-guards.md)
 
 ### Local Emulator Suite

package/docs/install-and-setup.md

@@ -73,7 +73,7 @@ import { Observable } from 'rxjs';
   styleUrls: ['app.component.css']
 })
 export class AppComponent {
-  firestore: Firestore = inject(Firestore)
+  firestore: Firestore = inject(Firestore);
   items$: Observable<any[]>;
 
   constructor() {

package/docs/messaging.md

@@ -6,20 +6,198 @@
 
 # Cloud Messaging
 
-The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.
+Firebase FCM allows you to register devices with unique FCM tokens, that you can later programtically send notifications to using Firebase Cloud Functions. It is up to the application to update these tokens in Firebase if you want to use them in other layers of your application, i.e send a notification to all administrators, etc. In that case, you would likely want to store your fcm tokens on your user collection, or a sub collection or another collection with different permissions.
 
-[Learn More](https://firebase.google.com/docs/cloud-messaging/)
+# Provide Messaging to your existing application
 
-## Dependency Injection
+```
+import { getMessaging, provideMessaging } from "@angular/fire/messaging";
 
-YADA YADA YADA
+bootstrapApplication(AppComponent, {
+  providers: [
+	  ...,
+      provideMessaging(() => getMessaging())
+    ),
+  ],
+});
+```
 
-## Firebase API
+# Create a Firebase Messaging Service Worker 
 
-Something something look at the offical docs
+There are two parts to Firebase Messaging, a Service Worker and the DOM API. Angular Fire Messaging allows you to request permission, get tokens, delete tokens, and subscribe to messages on the DOM side. To register to receive notifications you need to set up the Service Worker. [The official Firebase documentation for setting up the details exactly how to do that](https://firebase.google.com/docs/cloud-messaging/js/client).
 
-## Convenience observables
+#### Create your firebase-messaging-sw.js file in your src/assets folder
 
-### Foo
+*Note: When copying the below file, make sure your firebase version in your installation matches the version your are importing from below*
 
-bar baz
+It may be wise to use file replacements or environments here for different environments
+
+```
+// This sample application is using 9.22, make sure you are importing the same version
+
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
+import { getMessaging } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-messaging-sw.js";
+
+const firebaseApp = initializeApp({
+  apiKey: "",
+  authDomain: "",
+  projectId: "",
+  storageBucket: "",
+  messagingSenderId: "",
+  appId: "",
+});
+
+const messaging = getMessaging(firebaseApp);
+```
+
+# Example messaging service
+
+```
+import { Injectable } from "@angular/core";
+import { Messaging, getToken, onMessage, deleteToken } from "@angular/fire/messaging";
+import { Observable, tap } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class FcmService {
+  constructor(private msg: Messaging){
+    Notification.requestPermission().then(
+    (notificationPermissions: NotificationPermission) => {
+      if (notificationPermissions === "granted") {
+        console.log("Granted");
+      }
+      if (notificationPermissions === "denied") {
+        console.log("Denied");
+      }
+    });
+    navigator.serviceWorker
+      .register("/assets/firebase-messaging-sw.js", {
+        type: "module",
+      })
+      .then((serviceWorkerRegistration) => {
+        getToken(this.msg, {
+          vapidKey: `an optional key generated on Firebase for your fcm tokens`,
+          serviceWorkerRegistration: serviceWorkerRegistration,
+        }).then((x) => {
+          console.log('my fcm token', x);
+          // This is a good place to then store it on your database for each user
+        });
+	});  
+    }
+    this.message$ = new Observable((sub) => onMessage(this.msg, (msg) =>     
+      sub.next(msg))).pipe(
+	    tap((msg) => {
+	      console.log("My Firebase Cloud Message", msg);
+	    })
+    );
+    }
+  deleteToken(){
+    // We can also delete fcm tokens, make sure to also update this on your firestore db if you are storing them as well
+    await deleteToken(this.msg);
+  }
+```
+
+# Testing and Sending Notifications
+
+Firebase will allow you to send a test notification under Engage > Messaging > New Campaign > Notifications. Here you can click send a test message. Additionally, you can send them programmatically through Firebase cloud functions. 
+
+Here is a barebones Node example:
+
+```
+export const sendTestMessage = onRequest(async (_, res) => {
+  try {
+    const message = {
+      notification: {
+        title: "Test Title",
+        body: "Test Body",
+      },
+      token: "your token here, you can store these and retreive as you please",
+    };
+    await admin.messaging().send(message);
+    res.sendStatus(200);
+  } catch (error) {
+    console.error(error);
+    res.sendStatus(500);
+  }
+});
+```
+
+Here is a Node example that listens for a new comment on a collection, then sends a notification, and also adds it to a cache on Firebase so users can click through them.
+
+```
+exports.onPostReply =
+  onDocumentCreated("comments/{commentId}", async (event) => {
+    if (!event) throw new Error("No event found for document creation");
+    const snapshot = event.data;
+    if (!snapshot) {
+      throw new Error("No data associated with the event");
+    }
+    const data = snapshot.data();
+    if (!data.postId) {
+      throw new Error("No post ID found");
+    }
+    const postRef = await firestore.collection("posts").doc(data.postId).get();
+    const postData = postRef.data();
+    if (!postData) {
+      throw new Error("No postData found");
+    }
+    // userUid will be the post author's id.
+    const {userUid} = postData;
+    if (!userUid) {
+      throw new Error(
+        "Could not find the userUid for the post author for post reply"
+      );
+    }
+    const messageForNotification = {
+      title: "You have a new reply on your post",
+      body: "",
+    };
+    await createNotificationAndCache(messageForNotification, userUid);
+  });
+
+  // If you want to cache notifications a number of times, abstracting this
+  // to a function can bring a lot of value.
+  
+interface NotificationProps {
+  title: string;
+  body: string;
+}
+
+async function createNotificationAndCache(
+  notificationProps: NotificationProps, userAuthUid: string) {
+  const userRef = await firestore.collection("users").where("authUid", "==",
+    userAuthUid).get();
+  const userData = userRef.docs[0].data();
+
+  const promises: Promise<any>[] = [];
+  // This sample application has seperate fcm tokens for web and mobile
+  if (userData.mobileToken) {
+    const message = {
+      notification: notificationProps,
+      token: userData.mobileToken,
+    };
+    const promise = admin.messaging().send(message);
+    promises.push(promise);
+  }
+  if (userData.webToken) {
+    const message = {
+      notification: notificationProps,
+      token: userData.webToken,
+    };
+    const promise = admin.messaging().send(message);
+    promises.push(promise);
+  }
+
+  const notificationCacheValue = {
+    userAuthUid: userAuthUid,
+    tokenTitle: notificationProps.title,
+    tokenBody: notificationProps.body,
+    isActive: true, // This determines whether a notification has been seen
+  };
+
+  promises.push(
+    firestore.collection("notificationCache").add(notificationCacheValue));
+
+  await Promise.all(promises);
+}  ```