-
AngularFire2
-The official library for Firebase and Angular 2
- -### AngularFire2 is currently not on new Firebase 3.0 SDK, but there is an update in progress. +# AngularFire -[](https://travis-ci.org/angular/angularfire2) [](https://gitter.im/angular/angularfire2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +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. -Status: Beta +ng add @angular/fire-## What is AngularFire2? +- **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 the time to load your app. +- **Google Analytics** - Zero-effort Angular Router awareness in Google Analytics. +- **Router Guards** - Guard your Angular routes with built-in Firebase Authentication checks. -- **Observable based** - Use the power of rxjs, Angular 2, and Firebase. -- **Realtime bindings** - Synchronize collections as objects or lists. -- **Authentication** - Monitor authentication state in realtime. +## Example use -## Install +```ts +import { ApplicationConfig } from '@angular/core'; +import { provideFirebaseApp, initializeApp } from '@angular/fire/app'; +import { getFirestore, provideFirestore } from '@angular/fire/firestore'; -```bash -npm install angularfire2 firebase --save +export const appConfig: ApplicationConfig = { + providers: [ + provideFirebaseApp(() => initializeApp({ /* ...your Firebase config... */ })), + provideFirestore(() => getFirestore()), + // ... + ], + // ... +} ``` -## Example use: - ```ts -import {Component} from '@angular/core'; -import {AngularFire, FirebaseListObservable} from 'angularfire2'; +import { AsyncPipe } from '@angular/common'; +import { Component, inject } from '@angular/core'; +import { Firestore, collectionData, collection } from '@angular/fire/firestore'; + +interface Item { + name: string; +}; @Component({ - selector: 'project-name-app', + selector: 'app-root', template: `
-
-
- - {{ item.name }} - + @for (item of (items$ | async); track item) { +
- + {{ item.name }} + + }
| + +#### [AI Logic](docs/ai.md#ai-logic) +```ts +import { } from '@angular/fire/ai'; +``` + | ++ +#### [Analytics](docs/analytics.md#analytics) +```ts +import { } from '@angular/fire/analytics'; +``` + | +
| + +#### [App Check](docs/app-check.md#app-check) +```ts +import { } from '@angular/fire/app-check'; +``` + | ++ +#### [Authentication](docs/auth.md#authentication) +```ts +import { } from '@angular/fire/auth'; +``` + | +
| + +#### [Cloud Firestore](docs/firestore.md#cloud-firestore) +```ts +import { } from '@angular/fire/firestore'; +``` + | ++ +#### [Cloud Functions](docs/functions.md#cloud-functions) +```ts +import { } from '@angular/fire/functions'; +``` + | +
| -## [API Reference](docs/api-reference.md) +#### [Cloud Messaging](docs/messaging.md#cloud-messaging) +```ts +import { } from '@angular/fire/messaging'; +``` + | ++ +#### [Cloud Storage](docs/storage.md#cloud-storage) +```ts +import { } from '@angular/fire/storage'; +``` + | +
| + +#### [Data Connect](docs/data-connect.md#data-connect) +```ts +import { } from '@angular/fire/data-connect'; +``` + | ++ +#### [Performance Monitoring](docs/performance.md#performance-monitoring) +```ts +import { } from '@angular/fire/performance'; +``` + | +
| + +#### [Realtime Database](docs/database.md#realtime-database) +```ts +import { } from '@angular/fire/database'; +``` + | ++ +#### [Remote Config](docs/remote-config.md#remote-config) +```ts +import { } from '@angular/fire/remote-config'; +``` + | +
-
-
- - {{item.$value}} - -
{{ (item | async)?.name }}
- `, -}) -export class AppComponent { - item: FirebaseObjectObservable{{ item | async | json }}
- - -- - - - `, -}) -export class RcTestAppComponent { - item: FirebaseObjectObservable
-
-
- - {{ item.name }} - -
-
-
- - - - - -
-
-
- - {{ item.text }} - -
-
- `,
-})
-export class RcTestAppComponent {
- items: FirebaseListObservableFilter by size
- - - - {{ (af.auth | async).uid }}
-
- `,
-})
-export class RcTestAppComponent {
- constructor(public af: AngularFire) {}
- login() {
- this.af.auth.login();
- }
-}
-```
-
-## Override configuration / No config
-
-Authentication works without configuration, and even if you have setup
-authentication in the boostrap phase, you can still override the configuration.
-
-```ts
-// Anonymous
-af.auth.login({
- provider: AuthProviders.Anonymous,
- method: AuthMethods.Anonymous,
-})
-
-// Email and password
-af.auth.login({
- provider: AuthProviders.Password,
- method: AuthMethods.Password,
-})
-
-// Social provider redirect
-af.auth.login({
- provider: AuthProviders.Twitter,
- method: AuthMethods.Redirect,
-})
-
-// Social provider popup
-af.auth.login({
- provider: AuthProviders.Github,
- method: AuthMethods.Popup,
-})
-```
-
-**Example app:**
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
-
-@Component({
- moduleId: module.id,
- selector: 'app',
- template: `
- {{ (af.auth | async).uid }}
-
-
- `,
-})
-export class RcTestAppComponent {
- constructor(public af: AngularFire) {
- this.af.auth.subscribe(auth => console.log(auth));
- }
- login() {
- this.af.auth.login({
- provider: AuthProviders.Twitter,
- method: AuthMethods.Popup,
- });
- }
- overrideLogin() {
- this.af.auth.login({
- provider: AuthProviders.Anonymous,
- method: AuthMethods.Anonymous,
- });
- }
-}
-```
\ No newline at end of file
diff --git a/docs/ai.md b/docs/ai.md
new file mode 100644
index 000000000..248b54825
--- /dev/null
+++ b/docs/ai.md
@@ -0,0 +1,55 @@
+
+AngularFire ❱ Developer Guide ❱ AI Logic
+
+
+# AI Logic
+
+Firebase AI Logic gives you access to the latest generative AI models from Google: the Gemini models, including the Gemini image models.
+
+[Learn more](https://firebase.google.com/docs/ai-logic)
+
+> Firebase AI Logic was previously called **Vertex AI in Firebase**. If you are upgrading from AngularFire 20, the module moved from `@angular/fire/vertexai` to `@angular/fire/ai` and most symbols were renamed (`provideVertexAI` to `provideAI`, `VertexAI` to `AI`). One is not a rename: plain `getAI()` uses the Gemini Developer API backend, so the old `getVertexAI()` maps to `getAI(app, { backend: new VertexAIBackend() })`. Running `ng update @angular/fire` rewrites all of this for you and keeps your app on the Vertex AI backend. See the [AngularFire 20 to 21 upgrade guide](./version-21-upgrade.md).
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide an AI instance in the application's `app.config.ts`:
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideAI, getAI } from '@angular/fire/ai';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideFirebaseApp(() => initializeApp({ ... })),
+ provideAI(() => getAI()),
+ ...
+ ],
+ ...,
+}
+```
+
+Next inject `AI` into your component:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { AI } from '@angular/fire/ai';
+
+@Component({ ... })
+export class MyComponent {
+ private ai = inject(AI);
+ ...
+}
+```
+
+## 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/ai'` to `import { ... } from '@angular/fire/ai'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/ai-logic/get-started?platform=web) | [API Reference](https://firebase.google.com/docs/reference/js/ai)
diff --git a/docs/analytics.md b/docs/analytics.md
new file mode 100644
index 000000000..e064730b9
--- /dev/null
+++ b/docs/analytics.md
@@ -0,0 +1,55 @@
+
+
+
+AngularFire ❱ Developer Guide ❱ Analytics
+
+
+# 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 an Analytics instance in the application's `app.config.ts`:
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideAnalytics, getAnalytics } from '@angular/fire/analytics';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideFirebaseApp(() => initializeApp({ ... })),
+ provideAnalytics(() => getAnalytics()),
+ ...
+ ],
+ ...,
+}
+```
+
+Next inject `Analytics` into your component:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { Analytics } from '@angular/fire/analytics';
+
+@Component({ ... })
+export class UserProfileComponent {
+ private analytics = inject(Analytics);
+ ...
+}
+```
+
+## 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/analytics'` to `import { ... } from '@angular/fire/analytics'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/analytics/get-started?platform=web) | [API Reference](https://firebase.google.com/docs/reference/js/analytics)
diff --git a/docs/api-reference.md b/docs/api-reference.md
deleted file mode 100644
index bdb0003b9..000000000
--- a/docs/api-reference.md
+++ /dev/null
@@ -1,220 +0,0 @@
-#API Reference
-
-**Work in progress. [See the developer guide](/docs/1-install-and-setup.md) for a comprehensive walkthrough of AngularFire2.**
-
-### AngularFire Service
-
-The recommended way to take advantage of the AngularFire library is to
-use the injectable AngularFire service.
-
-```typescript
-import {Component} from '@angular/core';
-import {bootstrap} from '@angular2/platform-browser';
-import {Observable} from 'rxjs/Observable';
-import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2';
-import {Question} from './services/question';
-
-@Component({
- template:`
- -
-
- - {{question.text}} - -
You are logged in
- Please log in
- `
-})
-class App {
- constructor (@Inject(FirebaseAuth) public auth: FirebaseAuth) {}
-}
-```
-
-### FirebaseListObservable
-
-Subclass of rxjs `Observable` which also has methods for updating
-list-like Firebase data.
-
-type: `class`
-
-additional methods:
-
-`add:(val) => void`: Add an element to the Firebase ref.
diff --git a/docs/app-check.md b/docs/app-check.md
new file mode 100644
index 000000000..557bf578a
--- /dev/null
+++ b/docs/app-check.md
@@ -0,0 +1,58 @@
+
+AngularFire ❱ Developer Guide ❱ App Check
+
+
+
+
+# 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 in the application's `app.config.ts`:
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideFirebaseApp, initializeApp, getApp } from '@angular/fire/app';
+import { provideAppCheck, initializeAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideFirebaseApp(() => initializeApp({ ... })),
+ provideAppCheck(() => initializeAppCheck(getApp(), {
+ provider: new ReCaptchaV3Provider(/* configuration */),
+ })),
+ ...
+ ],
+ ...
+}
+```
+
+Next inject `AppCheck` it into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { AppCheck } from '@angular/fire/app-check';
+
+@Component({ ... })
+export class AppCheckComponent {
+ private appCheck = inject(AppCheck);
+ ...
+}
+```
+
+## 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/app-check'` to `import { ... } from '@angular/fire/app-check'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/app-check/web/recaptcha-provider) | [API Reference](https://firebase.google.com/docs/reference/js/app-check)
diff --git a/docs/app-hosting.md b/docs/app-hosting.md
new file mode 100644
index 000000000..d72eca28b
--- /dev/null
+++ b/docs/app-hosting.md
@@ -0,0 +1,95 @@
+
+AngularFire ❱ Developer Guide ❱ Deploying SSR to Firebase App Hosting
+
+
+# Deploying a server-rendered app to Firebase App Hosting
+
+[Firebase App Hosting](https://firebase.google.com/docs/app-hosting) is Firebase's recommended way to deploy a server-side-rendered (SSR) Angular application. It builds your app in Google Cloud Build, runs the Node server, and serves it behind Google's CDN and proxy. This applies to either way of deploying to App Hosting, a connected GitHub repository or `firebase deploy` from your own machine; both build the same way and are affected the same way.
+
+This guide covers one thing that trips up almost every new SSR deployment: **the server can silently stop server-rendering and fall back to client-side rendering (CSR), with no error anywhere obvious.** It explains how to detect that in 30 seconds and how to fix it.
+
+## How to deploy
+
+If you have not deployed yet, follow Firebase's own guides: [Get started with App Hosting](https://firebase.google.com/docs/app-hosting/get-started) to connect a GitHub repository (App Hosting builds and deploys on every push), or [Alternative ways to deploy](https://firebase.google.com/docs/app-hosting/alt-deploy) to deploy with `firebase deploy` from your own machine. Both build your app the same way in Google Cloud Build. The rest of this guide covers an Angular-specific issue you can hit once your app is deployed either way.
+
+## The symptom: SSR silently downgrades to CSR
+
+A freshly deployed Angular SSR app usually *looks* fine in a browser, the page renders and works. But the server may be sending an almost-empty HTML shell and letting the browser do all the rendering. When that happens you lose the whole point of SSR: crawlers and link previews see no content, and first paint on slow devices is worse.
+
+There is no error in the deploy output and no error in the browser. The only trace is in your backend's server logs, which nothing prompts you to check.
+
+App Hosting runs on Cloud Run, not Cloud Functions, so its logs live in Cloud Logging:
+
+- In the Firebase console, open your backend and go to its **Logs** tab, then look at **Runtime logs**.
+- From a terminal, use `gcloud`:
+
+ ```bash
+ gcloud logging read 'resource.type=cloud_run_revision AND resource.labels.service_name=YOUR_BACKEND_ID' --project YOUR_PROJECT_ID --limit 10
+ ```
+
+See Firebase's [View logs and metrics](https://firebase.google.com/docs/app-hosting/logging) guide for more.
+
+## The 30-second check to run after every deploy
+
+Pick an SSR route (not an SSG/prerendered one) and fetch it:
+
+```bash
+curl -s https://YOUR-SITE/ | grep ng-server-context
+```
+
+Angular's server renderer stamps a `ng-server-context` attribute on the app's root element:
+
+- `ng-server-context="ssr"` - the route was server-rendered (SSR). This is what you want.
+- `ng-server-context="ssg"` - the route was prerendered (SSG). Fine in itself, but not the SSR path this guide is about.
+- **No `ng-server-context` at all** - the server returned a client-only shell and the browser is doing all the rendering. This is the silent CSR fallback described above, regardless of how the page looks in a browser.
+
+## Why it happens
+
+Angular's server engine only trusts the `X-Forwarded-*` headers a proxy attaches to a request when it is told to. App Hosting's proxy adds several of these headers (for example `x-forwarded-for` and `x-forwarded-proto`). If Angular does not trust the full set the platform sends, it treats the request as untrusted and de-optimizes to CSR on every request.
+
+
+
+## The Fix
+
+Two steps are needed together.
+
+**1. Update Angular to the latest patch:**
+
+```bash
+npm update @angular/core @angular/ssr
+```
+
+**2. Turn on proxy-header trust when you create the server engine.** In `src/server.ts`, pass `trustProxyHeaders: true` to `AngularNodeAppEngine`:
+
+```ts
+import { AngularNodeAppEngine } from '@angular/ssr/node';
+
+const angularApp = new AngularNodeAppEngine({
+ trustProxyHeaders: true,
+});
+```
+
+Redeploy, then run the 30-second check above. You should now see `ng-server-context="ssr"`.
+
+### Why both steps
+
+The two steps address different halves of the same handshake, and neither alone is enough:
+
+- Recent Angular patches let the `trustProxyHeaders` engine option take effect on App Hosting; on older patches a platform environment variable wins instead, so the code option is ignored. The `npm update` gets you onto a patch where the option is honored.
+- Even on the latest patch, you still have to *set* the option, so App Hosting's proxy headers are trusted.
+
+This matches Firebase's own guidance. For the current, authoritative version of this fix (including any App Hosting or Angular version notes), see Firebase's [App Hosting troubleshooting guide](https://firebase.google.com/docs/app-hosting/troubleshooting#angular-proxy-trust).
+
+> Note: App Hosting also has an experimental, opt-in local-build deploy option (you build on your own machine, then `firebase deploy`) in which the Firebase CLI applies this proxy-header configuration for you. It is off by default and not a documented, supported workflow, so this guide targets the standard source deploy; apply the fix above.
+
+## Related Angular documentation
+
+- [Angular SSR guide](https://angular.dev/guide/ssr)
+- [Configuring trusted proxy headers](https://angular.dev/best-practices/security#configuring-trusted-proxy-headers)
diff --git a/docs/auth.md b/docs/auth.md
new file mode 100644
index 000000000..163f87115
--- /dev/null
+++ b/docs/auth.md
@@ -0,0 +1,388 @@
+
+
+
+AngularFire ❱ Developer Guide ❱ Authentication
+
+
+# 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 `app.config.ts`:
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideAuth, getAuth } from '@angular/fire/auth';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideFirebaseApp(() => initializeApp({ ... })),
+ provideAuth(() => getAuth()),
+ ...
+ ],
+ ...
+}
+```
+
+Next inject `Auth` into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { Auth } from '@angular/fire/auth';
+
+@Component({ ... })
+export class LoginComponent {
+ private 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 official documentation.
+
+[Getting Started](https://firebase.google.com/docs/auth/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/auth)
+
+## Server-side Rendering
+
+When Angular renders your app on the server, the server does not know which user is visiting. To render the page as that user, pass their Auth ID token to `initializeServerApp`, which gives you a Firebase app that is already signed in as them.
+
+Getting the token to the server is your app's job. This guide keeps it in a cookie, because the browser attaches cookies to every request on its own.
+
+All 4 steps below are required. Miss any one of them and the page still renders, but it renders signed out, with no error to tell you why.
+
+### 1. Serve the route with `RenderMode.Server`
+
+`ng new --ssr` scaffolds `app.routes.server.ts` with every route set to `RenderMode.Prerender`. Prerendering runs at build time, so there is no request and no cookie, and Angular provides neither `REQUEST` nor `REQUEST_CONTEXT`. Any route that must already render as the signed-in user before hydration has to be `RenderMode.Server`. A `RenderMode.Client` route renders in the browser, where the user is already signed in, so it needs none of this.
+
+```ts
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+ { path: 'account', renderMode: RenderMode.Server },
+ { path: '**', renderMode: RenderMode.Prerender },
+];
+```
+
+The rest of this guide has no effect on routes rendered any other way.
+
+### 2. Keep the ID token in a cookie
+
+Install [js-cookie](https://github.com/js-cookie/js-cookie):
+
+```bash
+npm install js-cookie
+npm install --save-dev @types/js-cookie
+```
+
+Add the cookie sync to your `app.config.ts`. AngularFire's `idToken` observable emits on sign-in, on sign-out, and whenever the token is refreshed.
+
+```ts
+import { DestroyRef, PLATFORM_ID, inject, provideAppInitializer } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Auth, idToken } from '@angular/fire/auth';
+import { beforeAuthStateChanged } from 'firebase/auth';
+import cookies from 'js-cookie';
+
+// add to appConfig.providers
+provideAppInitializer(() => {
+ if (!isPlatformBrowser(inject(PLATFORM_ID))) {
+ return;
+ }
+ const auth = inject(Auth);
+ const destroyRef = inject(DestroyRef);
+
+ const writeSessionCookie = (token: string | undefined) => {
+ if (token) {
+ cookies.set('__session', token, { secure: true, sameSite: 'lax' });
+ } else {
+ cookies.remove('__session');
+ }
+ };
+
+ idToken(auth)
+ .pipe(takeUntilDestroyed(destroyRef))
+ .subscribe((token) => writeSessionCookie(token ?? undefined));
+
+ let priorToken: string | undefined;
+ const unsubscribe = beforeAuthStateChanged(
+ auth,
+ async (user) => {
+ // Must update the cookie before the sign-out completes, otherwise a page
+ // load that races it still sends the signed-out user's token.
+ priorToken = cookies.get('__session');
+ writeSessionCookie(await user?.getIdToken());
+ },
+ () => writeSessionCookie(priorToken)
+ );
+ destroyRef.onDestroy(unsubscribe);
+}),
+```
+
+The 2 hooks cover different moments:
+- `idToken` fires after an auth state change has completed, and also when Firebase refreshes the token in the background, which is what keeps the cookie current.
+- `beforeAuthStateChanged` fires earlier, while an auth state change is still in progress and before Firebase sets the new user, so a page load that races a sign-out cannot send a token for the user who just left and get their data rendered back. Its third argument puts the cookie back if another blocking callback rejects the auth state change.
+
+Name the cookie `__session`. Behind Firebase Hosting it is the [only cookie forwarded](https://firebase.google.com/docs/hosting/manage-cache#using_cookies) to your server code, and any other name is dropped before your app sees it.
+
+#### Both attributes matter
+
+The cookie sync above sets `{ secure: true, sameSite: 'lax' }`, and neither attribute is optional.
+
+- `secure` keeps the cookie off unencrypted connections. Browsers make an exception for `localhost`, so local development still works.
+- `sameSite: 'lax'` keeps the cookie off cross-site requests while still sending it when someone follows a link into your app, which is what lets that first page render signed in. If your app never needs a signed-in first render from an external link, use `'strict'` instead.
+
+#### What this cookie carries
+
+This cookie carries a short-lived ID token that scripts on your page can read. Firebase already keeps the signed-in state in browser storage, so the cookie does not create a new place for a token to be stolen from, but it does travel on every request.
+
+If you need a session the browser cannot read, use Firebase's [session cookies](https://firebase.google.com/docs/auth/admin/manage-cookies) with the Admin SDK instead. Those cannot be handed to `initializeServerApp`, so that approach means verifying the cookie yourself and building your own server-side Auth context.
+
+#### `beforeAuthStateChanged` from `firebase/auth`
+
+One import in the code above is deliberately different from the rest of this guide. `beforeAuthStateChanged` comes from `firebase/auth` rather than `@angular/fire/auth`. AngularFire's version keeps the app marked as busy until its callback first runs, and this callback only runs when someone signs in or out.
+
+Importing it from `@angular/fire/auth` makes `ng build` hang during route extraction and fail with a timeout. That is a bug on our side, tracked in [#3748](https://github.com/angular/angularfire/issues/3748). Once the fix lands, this can be imported from `@angular/fire/auth` like everything else.
+
+### 3. Pass the cookie into the render
+
+Install [cookie-parser](https://github.com/expressjs/cookie-parser):
+
+```bash
+npm install cookie-parser
+npm install --save-dev @types/cookie-parser
+```
+
+The `server.ts` the Angular CLI generated already renders your app for every request that is not a static file. Replace that existing `app.use` block with this one, which reads the cookie and hands the token to the render. Do not add a second block, because the first one to match wins and the token would never arrive:
+
+```ts
+// server.ts
+import cookieParser from 'cookie-parser';
+
+app.use(cookieParser());
+
+app.use((req, res, next) => {
+ angularApp
+ .handle(req, { authIdToken: req.cookies?.__session })
+ .then((response) =>
+ response ? writeResponseToNodeResponse(response, res) : next(),
+ )
+ .catch(next);
+});
+```
+
+Keep it where the generated block already was, below the block that serves static files, so real files are still served before Angular tries to render them. The rest of the file, including the part that starts the server, stays as it is.
+
+The second argument to `handle` is what the render reads back as `REQUEST_CONTEXT`.
+
+### 4. Build the server app from the token
+
+In `app.config.ts`, choose the Firebase app based on where the code is running, and pass that app to every Firebase provider:
+
+```ts
+import {
+ ApplicationConfig,
+ PLATFORM_ID,
+ REQUEST_CONTEXT,
+ inject,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import {
+ FirebaseApp,
+ initializeApp,
+ initializeServerApp,
+ provideFirebaseApp,
+} from '@angular/fire/app';
+import { getAuth, provideAuth } from '@angular/fire/auth';
+import { getFirestore, provideFirestore } from '@angular/fire/firestore';
+
+const firebaseConfig = { /* ...your Firebase configuration... */ };
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideFirebaseApp(() => {
+ if (isPlatformBrowser(inject(PLATFORM_ID))) {
+ return initializeApp(firebaseConfig);
+ }
+ const requestContext = inject(REQUEST_CONTEXT, { optional: true }) as
+ | { authIdToken?: string }
+ | null;
+ if (!requestContext?.authIdToken) {
+ return initializeApp(firebaseConfig);
+ }
+ return initializeServerApp(firebaseConfig, {
+ authIdToken: requestContext.authIdToken,
+ releaseOnDeref: requestContext,
+ });
+ }),
+ provideAuth(() => getAuth(inject(FirebaseApp))),
+ provideFirestore(() => getFirestore(inject(FirebaseApp))),
+ // ...
+ ],
+};
+```
+
+#### Five details make this work
+
+- **Keep exactly one `provideFirebaseApp`.** AngularFire hands you the app you provided only when a single one is registered, and falls back to the default app otherwise. A second registration anywhere in your configuration would make the server app be silently ignored.
+- **Pass `inject(FirebaseApp)` to every provider, not just `provideAuth`.** `ng add @angular/fire` writes them without an argument, which resolves the default app. On a signed-in request the factory above builds a server app instead, so a provider that asks for the default app fails outright on a freshly started server.
+- **Keep the signed-out fallback.** There is no request context when Angular prerenders a page, and no token when the visitor is signed out, so the fallback builds an ordinary Firebase app and the page renders signed out.
+- **Pass `releaseOnDeref`.** It tells the SDK when it may release the server app. The SDK watches the object you give it and releases once that object is garbage collected, so pass one that lives exactly as long as the render, such as the request context itself. Leave it out and the SDK requires you to call `deleteApp` yourself for each server app you create.
+- **The cast is needed** because Angular types `REQUEST_CONTEXT` as `unknown`.
+
+AngularFire's [sample app](https://github.com/angular/angularfire/tree/main/sample) does this differently, giving the browser and the server their own `app.config.client.ts` and `app.config.server.ts` instead of deciding at runtime, inside a single `provideFirebaseApp` factory, which of `initializeApp` and `initializeServerApp` to call. That is also fine, and it keeps the server-only code out of the browser bundle, at the cost of an extra file to wire up.
+
+ID tokens are short-lived, and a returning visitor's browser can send one that expired while the tab was closed. The server cannot refresh it, because a user restored from an ID token has no refresh token, so Firebase logs an error and the page renders signed out. The browser then refreshes the token and the page updates.
+
+### Using `REQUEST` instead of a cookie
+
+Angular also exposes the request itself through the `REQUEST` token, so you can read the ID token from an `Authorization` header rather than a cookie. Firebase's [session management with service workers](https://firebase.google.com/docs/auth/web/service-worker-sessions) guide covers attaching that header. Steps 1, 3 and 4 stay the same apart from the server half of the factory, which becomes:
+
+```ts
+import { PLATFORM_ID, REQUEST, inject } from '@angular/core';
+
+provideFirebaseApp(() => {
+ if (isPlatformBrowser(inject(PLATFORM_ID))) {
+ return initializeApp(firebaseConfig);
+ }
+ const request = inject(REQUEST, { optional: true });
+ const authIdToken = request?.headers.get('authorization')?.split('Bearer ')[1];
+ if (!authIdToken) {
+ return initializeApp(firebaseConfig);
+ }
+ return initializeServerApp(firebaseConfig, {
+ authIdToken,
+ releaseOnDeref: request,
+ });
+}),
+```
+
+`REQUEST` is a standard [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request), so headers are read with `headers.get(...)`. Angular sets it to `null` during builds, during static site generation, and during route extraction in development, and it is only supplied at all on `RenderMode.Server` routes, so keep the signed-out fallback for those passes.
+
+## 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(this.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(this.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(this.auth);
+ idTokenSubscription: Subscription;
+ ...
+
+ constructor() {
+ this.idTokenSubscription = this.idToken$.subscribe((token: string | null) => {
+ //handle idToken changes here. Note, that token will be null if there is no currently logged in user.
+ console.log(token);
+ })
+ }
+
+ ngOnDestroy() {
+ // when manually subscribing to an observable remember to unsubscribe in ngOnDestroy
+ this.idTokenSubscription.unsubscribe();
+ }
+}
+```
+
+## Connecting the emulator suite
+
+```ts
+import { ApplicationConfig, inject } from '@angular/core';
+import { FirebaseApp, provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { connectAuthEmulator, getAuth, provideAuth } from '@angular/fire/auth';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideFirebaseApp(() => initializeApp({ ... })),
+ provideAuth(() => {
+ const auth = getAuth(inject(FirebaseApp));
+ connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });
+ return auth;
+ }),
+ ]
+}
+```
diff --git a/docs/compat.md b/docs/compat.md
new file mode 100644
index 000000000..bd8721b25
--- /dev/null
+++ b/docs/compat.md
@@ -0,0 +1,70 @@
+# AngularFire
+The official [Angular](https://angular.dev/) library for [Firebase](https://firebase.google.com/).
+
+ng add @angular/fire+ +## Compatibility Developer Guide + +AngularFire 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). + +[See the v7 upgrade guide for more information on this change.](version-7-upgrade.md). + +### Monitor usage of your application in production + +> `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). + +- [Getting started with Google Analytics](compat/analytics/getting-started.md) + +### Interacting with your database(s) + +Firebase 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). + +#### Cloud Firestore + +> `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. + +- [Documents](compat/firestore/documents.md) +- [Collections](compat/firestore/collections.md) +- [Querying Collections](compat/firestore/querying-collections.md) +- [Offline data](compat/firestore/offline-data.md) + +#### Realtime Database + +> `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. + +- [Objects](compat/rtdb/objects.md) +- [Lists](compat/rtdb/lists.md) +- [Querying lists](compat/rtdb/querying-lists.md) + +### Authenticate users + +- [Getting started with Firebase Authentication](compat/auth/getting-started.md) +- [Route users with AngularFire guards](compat/auth/router-guards.md) + +### Local Emulator Suite + +- [Getting started with Firebase Emulator Suite](compat/emulators/emulators.md) + +### Upload files + +- [Getting started with Cloud Storage](compat/storage/storage.md) + +### Receive push notifications + +- [Getting started with Firebase Messaging](compat/messaging/messaging.md) + +### **BETA:** Change behavior and appearance of your application without deploying + +> 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). + +- [Getting started with Remote Config](compat/remote-config/getting-started.md) + +### Monitor your application performance in production + +> 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). + +- [Getting started with Performance Monitoring](compat/performance/getting-started.md) + +### Directly call Cloud Functions + +- [Getting started with Callable Functions](compat/functions/functions.md) diff --git a/docs/compat/analytics/getting-started.md b/docs/compat/analytics/getting-started.md new file mode 100644 index 000000000..3c5af8aaf --- /dev/null +++ b/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
+
+ Hello {{ user.displayName }}!
+ +Please login.
+ +-
+
- + {{ item.name }} + +
-
+
- + {{ item.name }} + +
-
+
- + {{ shirt.name }} is {{ shirt.price }} + +
-
+
- + {{ deposit.description }} for {{ deposit.amount }} + +
-
+
- + {{ log.description }} for {{ log.amount }} + +
-
+
- + {{ item.name }} + +
+ {{ (item | async)?.name }}
+
+ `
+})
+export class AppComponent {
+ private itemDoc: AngularFirestoreDocument
+
+ -
+
- + {{ item.text }} + +
No results, try clearing filters
+
+
+ Filter by size
+ + + + +
+
+ `,
+})
+export class AppComponent {
+ items$: ObservableFilter by color
+ + + + +
+
+traceUntil(
+ name: string,
+ test: (T) => Boolean,
+ options?: { orComplete?: true }
+)
+
+
+
+Trace the observable until the first emission that passes the provided test.
+
+If the `orComplete` option is passed it will complete the trace when the observable completes, even if an emission never passed the provided test.
+
+
+
+traceWhile(
+ name: string,
+ test: (T) => Boolean,
+ options?: { orComplete?: true }
+)
+
+
+
+Starting with an emission that passes the provided test, trace until an emission fails the test.
+
+If the `orComplete` option is passed it will complete any existing trace when the observable completes.
+
+### `traceUntilLast(name: string)`
+
+Trace the observable until completion.
+
+### `traceUntilFirst(name: string)`
+
+Traces the observable until the first emission.
+
+## Advanced usage
+
+### Configuration via Dependency Injection
+
+Set `INSTRUMENTATION_ENABLED` or `DATA_COLLECTION_ENABLED` to false disable all automatic and custom traces respectively.
\ No newline at end of file
diff --git a/docs/compat/remote-config/getting-started.md b/docs/compat/remote-config/getting-started.md
new file mode 100644
index 000000000..ab4bfa049
--- /dev/null
+++ b/docs/compat/remote-config/getting-started.md
@@ -0,0 +1,134 @@
+Getting started with Remote Config β
+ +`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). + +> **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 AngularFireRemoteConfigModule { } + +interface ConfigTemplate {[key:string]: string|number|boolean} + +type Parameter extends remoteConfig.Value { + key: string, + fetchTimeMillis: number +} + +class AngularFireRemoteConfig { + changes: Observable-
+
- + {{ item | json }} + +
-
+
- + + + + +
{{ (item | async)?.name }}
+ `, +}) +export class AppComponent { + item: Observable{{ item | async | json }}
+ + ++ + + + `, +}) +export class AppComponent { + itemRef: AngularFireObject
Firebase widgets!
+
+
+ -
+
-
+ {{ item.payload.val().text }}
+
{{ item.payload.key }}+
+
No results, try clearing filters
+
+
+ `,
+})
+export class AppComponent {
+ items$: ObservableFilter by size
+ + + + + +{{ uploadPercent | async }}
+ {{ downloadURL | async }}
+ `
+})
+export class AppComponent {
+ uploadPercent: Observable{{ meta | async }}
+
+
+AngularFire ❱ Developer Guide ❱ Realtime Database
+
+
+# Realtime Database
+
+Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.
+
+The 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).
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Database instance in the application's `app.config.ts`:
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideDatabase, getDatabase } from '@angular/fire/database';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideFirebaseApp(() => initializeApp({ ... })),
+ provideDatabase(() => getDatabase()),
+ ...
+ ],
+ ...
+}
+```
+
+Next inject `Database` into your component:
+
+```ts
+import { Component, inject } from '@angular/core';
+import { Database } from '@angular/fire/database';
+
+@Component({...})
+export class DepartmentComponent {
+ private database = inject(Database);
+ ...
+}
+```
+
+## Firebase API
+
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Just change your imports from `import { ... } from 'firebase/database'` to `import { ... } from '@angular/fire/database'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/database/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/database)
+
+## Convenience observables
+
+AngularFire provides observables to allow convenient use of the Realtime Database with RXJS.
+
+### `object`
+
+The `object()` function creates an observable that emits object changes.
+
+| | |
+|-----------------|------------------------------------------|
+| **function** | `object(ref)` |
+| **params** | ref: `Reference` |
+| **return** | `Observable
+
+
+AngularFire ❱ Developer Guide ❱ Cloud Firestore
+
+
+# Cloud Firestore
+
+Cloud 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.
+
+[Learn more](https://firebase.google.com/docs/firestore)
+
+Cloud 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).
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+Provide a Firestore instance in the application's `app.config.ts`:
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideFirestore, getFirestore } from '@angular/fire/firestore';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideFirebaseApp(() => initializeApp({ ... })),
+ provideFirestore(() => getFirestore()),
+ ...
+ ],
+ ...
+}
+```
+
+Next inject `Firestore` into your component:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { Firestore } from '@angular/fire/firestore';
+
+@Component({ ... })
+export class UserProfileComponent {
+ private firestore = inject(Firestore);
+ ...
+}
+```
+
+## 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/firestore'` to `import { ... } from '@angular/fire/firestore'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/firestore/quickstart#web-modular-api) | [API Reference](https://firebase.google.com/docs/reference/js/firestore)
+
+### Reading data
+
+In Cloud Firestore data is stored in `documents` and `documents` are stored in `collections`. The path to data follows `User Profiles
+-
+
- + {{user.username}} + +