@angular/fire 16.0.0-canary.5793d6f → 16.0.0-canary.78407bc

package/README.md

@@ -0,0 +1,200 @@
+
+# AngularFire
+
+AngularFire smooths over the rough edges an Angular developer might encounter when implementing the framework-agnostic
+[Firebase JS SDK](https://github.com/firebase/firebase-js-sdk) & aims to provide a more natural developer experience
+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
+- **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
+
+## Example use
+
+```ts
+import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
+import { getFirestore, provideFirestore } from '@angular/fire/firestore';
+
+@NgModule({
+  imports: [
+    provideFirebaseApp(() => initializeApp({ ... })),
+    provideFirestore(() => getFirestore()),
+  ],
+  ...
+})
+export class AppModule { }
+```
+
+```ts
+import { inject } from '@angular/core';
+import { Firestore, collectionData, collection } from '@angular/fire/firestore';
+import { Observable } from 'rxjs';
+
+interface Item {
+  name: string,
+  ...
+};
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <ul>
+    <li *ngFor="let item of item$ | async">
+      {{ item.name }}
+    </li>
+  </ul>
+  `
+})
+export class AppComponent {
+  item$: Observable<Item[]>;
+  firestore: Firestore = inject(Firestore);
+
+  constructor() {
+    const itemCollection = collection(this.firestore, 'items');
+    this.item$ = collectionData(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:
+
+| API | Environments | Suggested Polyfill | License |
+|-----|--------------|--------------------|---------|
+| Various ES5+ features  | Safari &lt; 10 | [`core-js/stable`](https://github.com/zloirock/core-js#readme) | MIT |
+| `globalThis` | [Chrome &lt; 71<br>Safari &lt; 12.1<br>iOS &lt; 12.2<br>Node &lt; 12](https://caniuse.com/mdn-javascript_builtins_globalthis) | [`globalThis`](https://github.com/es-shims/globalThis#readme) | MIT |
+| `Proxy` | [Safari &lt; 10](https://caniuse.com/proxy) | [`proxy-polyfill`](https://github.com/GoogleChrome/proxy-polyfill#readme) | Apache 2.0 |
+| `fetch` | [Safari &lt; 10.1<br>iOS &lt; 10.3](https://caniuse.com/fetch) | [`cross-fetch`](https://github.com/lquixada/cross-fetch#readme) | MIT |
+
+## Resources
+
+[Quickstart](docs/install-and-setup.md) - Get your first application up and running by following our quickstart guide.
+
+[Contributing](CONTRIBUTING.md)
+
+[Stackblitz Template](https://stackblitz.com/edit/angular-fire-start) - Remember to set your Firebase configuration in `app/app.module.ts`.
+
+[Upgrading to v7.0? Check out our guide.](docs/version-7-upgrade.md)
+
+### Sample apps
+
+We have three sample apps in this repository:
+
+1. [`samples/compat`](samples/compat) a kitchen sink application that demonstrates use of the "compatibility" API
+1. [`samples/modular`](samples/modular) a kitchen sink application that demonstrates the new tree-shakable API
+1. [`samples/advanced`](samples/advanced) the same app as `samples/modular` but demonstrates more advanced concepts such as Angular Universal state-transfer, dynamically importing Firebase feature modules, and Firestore data bundling.
+
+### Having troubles?
+
+Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?discussions_q=category%3AQ%26A), the official [Firebase Mailing List](https://groups.google.com/forum/#!forum/firebase-talk), the [Firebase Community Slack](https://firebase.community/) (`#angularfire2`), the [Angular Community Discord](http://discord.gg/angular) (`#firebase`), [Gitter](https://gitter.im/angular/angularfire2), the [Firebase subreddit](https://www.reddit.com/r/firebase), or [Stack Overflow](https://stackoverflow.com/questions/tagged/angularfire2).
+
+> **NOTE:** AngularFire is maintained by Googlers but is not a supported Firebase product. Questions on the mailing list and issues filed here are answered on a <strong>best-effort basis</strong> by maintainers and other community members. If you are able to reproduce a problem with Firebase <em>outside of AngularFire's implementation</em>, please [file an issue on the Firebase JS SDK](https://github.com/firebase/firebase-js-sdk/issues) or reach out to the personalized [Firebase support channel](https://firebase.google.com/support/).
+
+## 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).
+
+[See the v7 upgrade guide for more information on this change.](docs/version-7-upgrade.md).
+
+### Firebase product integrations
+
+<table>
+  <tr>
+    <td>
+
+#### [Analytics](docs/analytics.md#analytics)
+```ts
+import { } from '@angular/fire/analytics';
+```
+</td>
+    <td>
+
+#### [Authentication](docs/auth.md#authentication)
+```ts
+import { } from '@angular/fire/auth';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
+
+#### [Cloud Firestore](docs/firestore.md#cloud-firestore)
+```ts
+import { } from '@angular/fire/firestore';
+```
+</td>
+    <td>
+
+#### [Cloud Functions](docs/functions.md#cloud-functions)
+```ts
+import { } from '@angular/fire/functions';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
+
+#### [Cloud Messaging](docs/messaging.md#cloud-messaging)
+```ts
+import { } from '@angular/fire/messaging';
+```
+</td>
+    <td>
+
+#### [Cloud Storage](docs/storage.md#cloud-storage)
+```ts
+import { } from '@angular/fire/storage';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
+
+#### [Performance Monitoring](docs/performance.md#performance-monitoring)
+```ts
+import { } from '@angular/fire/performance';
+```
+</td>
+    <td>
+
+#### [Realtime Database](docs/database.md#realtime-database)
+```ts
+import { } from '@angular/fire/database';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
+
+#### [Remote Config](docs/remote-config.md#remote-config)
+```ts
+import { } from '@angular/fire/remote-config';
+```
+</td>
+    <td>
+
+#### [App Check](docs/app-check.md#app-check)
+```ts
+import { } from '@angular/fire/app-check';
+```
+</td>
+  </tr>
+</table>
+
+### Deploying your site
+
+* Deploy to Firebase Hosting
+* Angular Universal: Deploy to Cloud Functions
+* Angular Universal: Deploy to Cloud Run

package/analytics/firebase.d.ts

@@ -1,11 +1,14 @@
 export * from 'firebase/analytics';
-import { getAnalytics as _getAnalytics, initializeAnalytics as _initializeAnalytics, logEvent as _logEvent, setAnalyticsCollectionEnabled as _setAnalyticsCollectionEnabled, setCurrentScreen as _setCurrentScreen, settings as _settings, setUserId as _setUserId, setUserProperties as _setUserProperties } from 'firebase/analytics';
+import { getAnalytics as _getAnalytics, getGoogleAnalyticsClientId as _getGoogleAnalyticsClientId, initializeAnalytics as _initializeAnalytics, logEvent as _logEvent, setAnalyticsCollectionEnabled as _setAnalyticsCollectionEnabled, setConsent as _setConsent, setCurrentScreen as _setCurrentScreen, setDefaultEventParameters as _setDefaultEventParameters, settings as _settings, setUserId as _setUserId, setUserProperties as _setUserProperties } from 'firebase/analytics';
 export { isSupported } from './overrides';
 export declare const getAnalytics: typeof _getAnalytics;
+export declare const getGoogleAnalyticsClientId: typeof _getGoogleAnalyticsClientId;
 export declare const initializeAnalytics: typeof _initializeAnalytics;
 export declare const logEvent: typeof _logEvent;
 export declare const setAnalyticsCollectionEnabled: typeof _setAnalyticsCollectionEnabled;
+export declare const setConsent: typeof _setConsent;
 export declare const setCurrentScreen: typeof _setCurrentScreen;
+export declare const setDefaultEventParameters: typeof _setDefaultEventParameters;
 export declare const settings: typeof _settings;
 export declare const setUserId: typeof _setUserId;
 export declare const setUserProperties: typeof _setUserProperties;

package/app-check/firebase.d.ts

@@ -1,5 +1,6 @@
 export * from 'firebase/app-check';
-import { getToken as _getToken, initializeAppCheck as _initializeAppCheck, onTokenChanged as _onTokenChanged, setTokenAutoRefreshEnabled as _setTokenAutoRefreshEnabled } from 'firebase/app-check';
+import { getLimitedUseToken as _getLimitedUseToken, getToken as _getToken, initializeAppCheck as _initializeAppCheck, onTokenChanged as _onTokenChanged, setTokenAutoRefreshEnabled as _setTokenAutoRefreshEnabled } from 'firebase/app-check';
+export declare const getLimitedUseToken: typeof _getLimitedUseToken;
 export declare const getToken: typeof _getToken;
 export declare const initializeAppCheck: typeof _initializeAppCheck;
 export declare const onTokenChanged: typeof _onTokenChanged;

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, 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, 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, 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;
@@ -15,6 +15,7 @@ export declare const getIdTokenResult: typeof _getIdTokenResult;
 export declare const getMultiFactorResolver: typeof _getMultiFactorResolver;
 export declare const getRedirectResult: typeof _getRedirectResult;
 export declare const initializeAuth: typeof _initializeAuth;
+export declare const initializeRecaptchaConfig: typeof _initializeRecaptchaConfig;
 export declare const isSignInWithEmailLink: typeof _isSignInWithEmailLink;
 export declare const linkWithCredential: typeof _linkWithCredential;
 export declare const linkWithPhoneNumber: typeof _linkWithPhoneNumber;
@@ -49,5 +50,6 @@ export declare const updatePassword: typeof _updatePassword;
 export declare const updatePhoneNumber: typeof _updatePhoneNumber;
 export declare const updateProfile: typeof _updateProfile;
 export declare const useDeviceLanguage: typeof _useDeviceLanguage;
+export declare const validatePassword: typeof _validatePassword;
 export declare const verifyBeforeUpdateEmail: typeof _verifyBeforeUpdateEmail;
 export declare const verifyPasswordResetCode: typeof _verifyPasswordResetCode;

package/docs/analytics.md

@@ -0,0 +1,67 @@
+<img align="right" width="30%" src="images/analytics-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Analytics
+</small>
+
+# Analytics
+
+Google Analytics is an app measurement solution, available at no charge, that provides insight on app usage and user engagement.
+
+[Learn more](https://firebase.google.com/docs/analytics)
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Google Analytics instance in the application's `NgModule` (`app.module.ts`):
+
+```ts
+@NgModule({
+  declarations: [
+    ...
+  ],
+  imports: [
+    ...
+    // App initialization
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAnalytics(() => getAnalytics())
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+In your component class, for example `user-profile.component.ts` import and inject `Firestore`:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { Analytics } from '@angular/fire/analytics';
+
+@Component({
+    standalone: true,
+    selector: 'app-user-profile',
+    ...
+})
+export class UserProfileComponent {
+    private analytics: Analytics = inject(Analytics);
+    ...
+}
+```
+
+## Firebase API
+
+The [Firebase API for Google Analytics documentation](https://firebase.google.com/docs/reference/js/analytics.md#analytics_package) is available on the Firebase website.
+
+## Services
+
+### ScreenTrackingService
+
+Coming soon, for now [please review the documentation](https://firebase.google.com/docs/analytics/screenviews)
+
+### UserTrackingService
+Coming soon
+

package/docs/app-check.md

@@ -0,0 +1,53 @@
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime App Check
+</small>
+
+<img align="right" width="30%" src="images/reCAPTCHA-logo@1x.png">
+
+# App Check
+
+App 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.
+
+[Learn More](https://firebase.google.com/docs/app-check)
+
+## Dependency Injection
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide an App Check instance and configuration in the application's `NgModule` (`app.module.ts`):
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideAppCheck } from '@angular/fire/app-check';
+
+@NgModule({
+  imports: [
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAppCheck(() => initializeAppCheck(getApp(), {
+        provider: new ReCaptchaV3Provider(/* configuration */),
+      })),
+  ]
+})
+```
+
+Next inject it into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { AppCheck } from '@angular/fire/app-check';
+
+@Component({ ... })
+export class AppCheckComponent {
+  private appCheck: AppCheck = inject(AppCheck);
+  ...
+}
+```
+
+## Firebase API
+
+The [AppCheck documentation](https://firebase.google.com/docs/reference/js/app-check) is available on the Firebase website.
+
+## Convenience observables
+Coming soon.

package/docs/auth.md

@@ -0,0 +1,165 @@
+<img align="right" width="30%" src="images/auth-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Authentication
+</small>
+
+# Authentication
+
+Most 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.
+Firebase 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.
+
+Firebase 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.
+
+[Learn more about Firebase Authentication](https://firebase.google.com/docs/auth)
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide an auth instance in the application's `NgModule` (`app.module.ts`):
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { getAuth, provideAuth } from '@angular/fire/auth';
+
+@NgModule({
+  imports: [
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAuth(() => getAuth()),
+  ]
+})
+```
+
+Next inject it into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { Auth } from '@angular/fire/auth';
+
+@Component({ ... })
+export class LoginComponent {
+  private auth: Auth = inject(Auth);
+  ...
+}
+```
+
+## Firebase API
+
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Update the imports from `import { ... } from 'firebase/auth'` to `import { ... } from '@angular/fire/auth'` and follow the offical documentation.
+
+[Getting Started](https://firebase.google.com/docs/auth/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/auth)
+
+## Convenience observables
+
+AngularFire provides observables to allow convenient use of the Firebase Authentication with RXJS.
+
+### user
+
+The `user` observable streams events triggered by sign-in, sign-out, and token refresh events.
+
+Example code:
+
+```ts
+import { Auth, User, user } from '@angular/fire/auth';
+...
+
+export class UserComponent implements OnDestroy {
+  private auth: Auth = inject(Auth);
+  user$ = user(auth);
+  userSubscription: Subscription;
+  ...
+
+  constructor() {
+    this.userSubscription = this.user$.subscribe((aUser: User | null) => {
+        //handle user state changes here. Note, that user will be null if there is no currently logged in user.
+     console.log(aUser);
+    })
+  }
+
+  ngOnDestroy() {
+    // when manually subscribing to an observable remember to unsubscribe in ngOnDestroy
+    this.userSubscription.unsubscribe();
+  }
+}
+
+```
+
+### authState
+
+The `authState` observable streams events triggered by sign-in and sign-out events.
+
+Example code:
+```ts
+import { Auth, authState } from '@angular/fire/auth';
+...
+
+export class UserComponent implements OnDestroy {
+  private auth: Auth = inject(Auth);
+  authState$ = authState(auth);
+  authStateSubscription: Subscription;
+  ...
+
+  constructor() {
+    this.authStateSubscription = this.authState$.subscribe((aUser: User | null) => {
+        //handle auth state changes here. Note, that user will be null if there is no currently logged in user.
+     console.log(aUser);
+    })
+  }
+
+  ngOnDestroy() {
+    // when manually subscribing to an observable remember to unsubscribe in ngOnDestroy
+    this.authStateSubscription.unsubscribe();
+  }
+}
+```
+
+### idToken
+
+The `idToken` observable streams events triggered by sign-in, sign-out and token refresh events.
+
+Example code:
+```ts
+import { Auth, idToken } from '@angular/fire/auth';
+...
+
+export class UserComponent implements OnDestroy {
+  private auth: Auth = inject(Auth);
+  idToken$ = idToken(auth);
+  idTokenSubscription: Subscription;
+  ...
+
+  constructor() {
+    this.idTokenSubscription = this.idToken$.subscribe((token: string | null) => {
+        //handle idToken changes here. Note, that user will be null if there is no currently logged in user.
+     console.log(string);
+    })
+  }
+
+  ngOnDestroy() {
+    // when manually subscribing to an observable remember to unsubscribe in ngOnDestroy
+    this.idTokenSubscription.unsubscribe();
+  }
+}
+```
+
+## Connecting the emulator suite
+
+```ts
+import { connectAuthEmulator, getAuth, provideAuth } from '@angular/fire/auth';
+
+@NgModule({
+  imports: [
+    provideAuth(() => {
+      const auth = getAuth();
+      connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });
+      return auth;
+    }),
+  ]
+})
+```

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

@@ -0,0 +1,137 @@
+# Getting started with Google Analytics
+
+`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).
+
+> **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).
+
+### API:
+
+```ts
+class AngularFireAnalytics {
+  updateConfig(options: {[key:string]: any}): Promise<void>;
+
+  // from firebase.analytics() proxy:
+  logEvent(eventName: string, eventParams?: {[key: string]: any}, options?: analytics.AnalyticsCallOptions): Promise<void>;
+  setCurrentScreen(screenName: string, options?: analytics.AnalyticsCallOptions): Promise<void>;
+  setUserId(id: string, options?: analytics.AnalyticsCallOptions): Promise<void>;
+  setUserProperties(properties: analytics.CustomParams, options?: analytics.AnalyticsCallOptions): Promise<void>;
+  setAnalyticsCollectionEnabled(enabled: boolean): Promise<void>;
+  app: Promise<app.App>;
+}
+
+COLLECTION_ENABLED = InjectionToken<boolean>;
+APP_VERSION = InjectionToken<string>;
+APP_NAME = InjectionToken<string>;
+DEBUG_MODE = InjectionToken<boolean>;
+CONFIG = InjectionToken<Config>;
+```
+
+### Usage:
+
+```ts
+import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
+
+@NgModule({
+  imports: [
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireAnalyticsModule
+  ]
+})
+export class AppModule { }
+```
+
+`AngularFireAnalyticsModule` will dynamically import and configure `firebase/analytics`. A `page_view` event will automatically be logged (see `CONFIG` below if you wish to disable this behavior.)
+
+In your component you can then dependency inject `AngularFireAnalytics` and make calls against the SDK:
+
+```ts
+import { AngularFireAnalytics } from '@angular/fire/compat/analytics';
+
+constructor(analytics: AngularFireAnalytics) {
+  analytics.logEvent('custom_event', { ... });
+}
+```
+
+## Tracking Screen Views
+
+You can log [`screen_view` events](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#parameters_10) yourself of course, but AngularFire provides the `ScreenTrackingService` which automatically integrates with the Angular Router to provide Firebase with screen view tracking. You simply can integrate like so:
+
+```ts
+import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/compat/analytics';
+
+@NgModule({
+  imports: [
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireAnalyticsModule
+  ],
+  providers: [
+    ScreenTrackingService
+  ]
+})
+export class AppModule { }
+```
+
+`AngularFireAnalyticsModule` will initialize `ScreenTrackingService` if it is provided.
+
+## Tracking User Identifiers
+
+To enrich your Analytics data you can track the currently signed in user by setting [`setuserid`](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#setuserid) and [`setUserProperties`](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#set-user-properties). AngularFire provides a `UserTrackingService` which will dynamically import `firebase/auth`, monitor for changes in the logged in user, and call `setuserid` for you automatically.
+
+
+```ts
+import { AngularFireAnalyticsModule, UserTrackingService } from '@angular/fire/compat/analytics';
+
+@NgModule({
+  imports: [
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireAnalyticsModule
+  ],
+  providers: [
+    UserTrackingService
+  ]
+})
+export class AppModule { }
+```
+
+`AngularFireAnalyticsModule` will initialize `UserTrackingService` if it is provided.
+
+## Configuration with Dependency Injection
+
+### Configure Google Analtyics with `CONFIG`
+
+Using the `CONFIG` DI Token (*default: {}*) will allow you to configure Google Analytics. E.g, you could skip sending the initial `page_view` event, anonymize IP addresses, and disallow ads personalization signals for all events like so:
+
+```ts
+import { AngularFireAnalyticsModule, CONFIG } from '@angular/fire/compat/analytics';
+
+@NgModule({
+  imports: [
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireAnalyticsModule
+  ],
+  providers: [
+    { provide: CONFIG, useValue: {
+      send_page_view: false,
+      allow_ad_personalization_signals: false,
+      anonymize_ip: true
+    } }
+  ]
+})
+export class AppModule { }
+```
+
+See the gtag.js documentation to learn of the different configuration options at your disposal.
+
+### Use DebugView `DEBUG_MODE`
+
+To use [DebugView in Analytics](https://console.firebase.google.com/project/_/analytics/debugview) set `DEBUG_MODE` to `true` (*default: false*).
+
+### Track deployments with `APP_NAME` and `APP_VERSION`
+
+If you provide `APP_NAME` and `APP_VERSION` (*default: undefined*) you will be able to [track version adoption](https://console.firebase.google.com/project/_/analytics/latestrelease) of your PWA.
+
+### Disable analytics collection via `COLLECTION_ENABLED`
+
+If you set `COLLECTION_ENABLED` (*default: true*) to `false` then analytics collection will be disabled for this app on this device. To opt back in to analytics collection you could then call `setAnalyticsCollectionEnabled(true)`.
+
+Putting these APIs to use with cookies would allow you to create a flexible analytics collection scheme that would respect your user's desire for privacy.