@angular/fire 7.6.0 → 16.0.0-canary.596e208

package/docs/auth.md

@@ -1,165 +0,0 @@
-<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 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

@@ -1,137 +0,0 @@
-# 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.

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

@@ -1,162 +0,0 @@
-# 5. Getting started with Firebase Authentication
-
-`AngularFireAuth.user` provides you an `Observable<User|null>` to monitor your application's authentication State.
-
-`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)
-
-> **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).
-
-**Example app:**
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireAuth } from '@angular/fire/compat/auth';
-import firebase from 'firebase/compat/app';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <div *ngIf="auth.user | async as user; else showLogin">
-      <h1>Hello {{ user.displayName }}!</h1>
-      <button (click)="logout()">Logout</button>
-    </div>
-    <ng-template #showLogin>
-      <p>Please login.</p>
-      <button (click)="login()">Login with Google</button>
-    </ng-template>
-  `,
-})
-export class AppComponent {
-  constructor(public auth: AngularFireAuth) {
-  }
-  login() {
-    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
-  }
-  logout() {
-    this.auth.signOut();
-  }
-}
-```
-
-## Configuration with Dependency Injection
-
-The AngularFireAuth Module provides several DI tokens to further configure your
-authentication process.
-
-### Configure 
-
-Using the `SETTINGS` DI Token (*default: null*), we can set the current Auth
-instance's settings. This is used to edit/read configuration related options
-like app verification mode for phone authentication, which is useful for
-[testing](https://cloud.google.com/identity-platform/docs/test-phone-numbers).
-
-```ts
-import { SETTINGS as AUTH_SETTINGS } from '@angular/fire/compat/auth';
-
-@NgModule({
-  // ... Existing configuration
-  providers: [
-    // ... Existing Providers
-    { provide: AUTH_SETTINGS, useValue: { appVerificationDisabledForTesting: true } },
-  ]
-})
-export class AppModule { }
-```
-
-Read more at [Firebase Auth Settings](https://firebase.google.com/docs/reference/js/firebase.auth.AuthSettings).
-
-### Use Current Browser Language
-
-Using the `USE_DEVICE_LANGUAGE` DI Token (*default: null*), which is a boolean
-that allow you to set the current language to the default device/browser
-preference. This allows to localize emails but be aware that this only applies
-if you use the standard template provided by Firebase. 
-
-```ts
-import { USE_DEVICE_LANGUAGE } from '@angular/fire/compat/auth';
-
-@NgModule({
-  // ... Existing configuration
-  providers: [
-    // ... Existing Providers
-    { provide: USE_DEVICE_LANGUAGE, useValue: true },
-  ]
-})
-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).
-
-```ts
-import { LANGUAGE_CODE } from '@angular/fire/compat/auth';
-
-@NgModule({
-  // ... Existing configuration
-  providers: [
-    // ... Existing Providers
-    { provide: LANGUAGE_CODE, useValue: 'fr' },
-  ]
-})
-export class AppModule { }
-```
-
-### Persistence
-
-Firebase Auth default behavior is to persist a user's session even after the
-user closes the browser. To change the current type of persistence on the
-current Auth instance for the currently saved Auth session and apply this type
-of persistence for future sign-in requests, including sign-in with redirect
-requests, you can use the `PERSISTENCE` DI Token (*default: null*).
-
-The possible types are `'local'`, `'session'` or `'none'`. Read more at 
-[authentication state persistence](https://firebase.google.com/docs/auth/web/auth-state-persistence).
-
-```ts
-import { PERSISTENCE } from '@angular/fire/compat/auth';
-
-@NgModule({
-  // ... Existing configuration
-  providers: [
-    // ... Existing Providers
-    { provide: PERSISTENCE, useValue: 'session' },
-  ]
-})
-export class AppModule { }
-```
-
-### Tenant
-
-If you need to use multi-tenancy, you can set the current Auth instance's tenant
-ID using `TENANT_ID` DI Token (*default: null*).
-
-More tutorials regarding this topic are _coming soon_.
-
-```ts
-import { TENANT_ID } from '@angular/fire/compat/auth';
-
-@NgModule({
-  // ... Existing configuration
-  providers: [
-    // ... Existing Providers
-    { provide: TENANT_ID, useValue: 'tenant-id-app-one' },
-  ]
-})
-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)
-
-## UI Libraries
-
-- Material Design : [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)
-- Bootstrap : [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)
-
-## Cordova
-
-Learn how to [setup Firebase Authentication with Cordova](https://firebase.google.com/docs/auth/web/cordova) in the Firebase Guides.

package/docs/compat/auth/router-guards.md

@@ -1,104 +0,0 @@
-# Route users with AngularFire guards
-
-`AngularFireAuthGuard` provides a prebuilt [`canActivate` Router Guard](https://angular.io/api/router/CanActivate) using `AngularFireAuth`. By default unauthenticated users are not permitted to navigate to protected routes:
-
-> **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).
-
-```ts
-import { AngularFireAuthGuard } from '@angular/fire/compat/auth-guard';
-
-export const routes: Routes = [
-    { path: '',      component: AppComponent },
-    { path: 'items', component: ItemListComponent, canActivate: [AngularFireAuthGuard] },
-]
-```
-
-## Customizing the behavior of `AngularFireAuthGuard`
-
-To customize the behavior of `AngularFireAuthGuard`, you can pass an RXJS pipe through the route data's `authGuardPipe` key.
-
-The `auth-guard` module provides the following pre-built pipes:
-
-| Exported pipe                      | Functionality |
-|-|-|
-| `loggedIn`                         | The default pipe, rejects if the user is not authenticated. |
-| `isNotAnonymous`                   | Rejects if the user is anonymous |
-| `emailVerified`                    | Rejects if the user's email is not verified |
-| `hasCustomClaim(claim)`            | Rejects if the user does not have the specified claim |
-| `redirectUnauthorizedTo(redirect)` | Redirect unauthenticated users to a different route  |
-| `redirectLoggedInTo(redirect)`     | Redirect authenticated users to a different route |
-
-Example use:
-
-```ts
-import { AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/compat/auth-guard';
-
-const adminOnly = () => hasCustomClaim('admin');
-const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
-const redirectLoggedInToItems = () => redirectLoggedInTo(['items']);
-const belongsToAccount = (next) => hasCustomClaim(`account-${next.params.id}`);
-
-export const routes: Routes = [
-    { path: '',      component: AppComponent },
-    { path: 'login', component: LoginComponent,        canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToItems }},
-    { path: 'items', component: ItemListComponent,     canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToLogin }},
-    { path: 'admin', component: AdminComponent,        canActivate: [AngularFireAuthGuard], data: { authGuardPipe: adminOnly }},
-    { path: 'accounts/:id', component: AdminComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: belongsToAccount }}
-];
-```
-
-Use the provided `canActivate` helper and spread syntax to make your routes more readable:
-
-```ts
-import { canActivate } from '@angular/fire/compat/auth-guard';
-
-export const routes: Routes = [
-    { path: '',             component: AppComponent },
-    { path: 'login',        component: LoginComponent,    ...canActivate(redirectLoggedInToItems) },
-    { path: 'items',        component: ItemListComponent, ...canActivate(redirectUnauthorizedToLogin) },
-    { path: 'admin',        component: AdminComponent,    ...canActivate(adminOnly) },
-    { path: 'accounts/:id', component: AdminComponent,    ...canActivate(belongsToAccount) }
-];
-```
-
-### Compose your own pipes
-
-`AngularFireAuthGuard` pipes are RXJS operators which transform an optional User to a boolean or Array (for redirects). You can easily build your own to customize behavior further:
-
-```ts
-import { map } from 'rxjs/operators';
-
-// This pipe redirects a user to their "profile edit" page or the "login page" if they're unauthenticated
-// { path: 'profile', ...canActivate(redirectToProfileEditOrLogin) }
-const redirectToProfileEditOrLogin = () => map(user => user ? ['profiles', user.uid, 'edit'] : ['login']);
-```
-
-The `auth-guard` modules provides a `customClaims` operator to reduce boiler plate when checking a user's claims:
-
-```ts
-import { pipe } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { customClaims } from '@angular/fire/compat/auth-guard';
-
-// This pipe will only allow users with the editor role to access the route
-// { path: 'articles/:id/edit', component: ArticleEditComponent, ...canActivate(editorOnly) }
-const editorOnly = () => pipe(customClaims, map(claims => claims.role === 'editor'));
-```
-
-### Using router state
-
-`AngularFireAuthGuard` will also accept `AuthPipeGenerator`s which generate `AuthPipe`s given the router state:
-
-```ts
-import { pipe } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { customClaims } from '@angular/fire/compat/auth-guard';
-
-// Only allow navigation to the route if :userId matches the authenticated user's uid
-// { path: 'user/:userId/edit', component: ProfileEditComponent, ...canActivate(onlyAllowSelf) }
-const onlyAllowSelf = (next) => map(user => !!user && next.params.userId === user.uid);
-
-// Only allow navigation to the route if the user has a custom claim matching  :accountId
-// { path: 'accounts/:accountId/billing', component: BillingDetailsComponent, ...canActivate(accountAdmin) }
-const accountAdmin = (next) => pipe(customClaims, map(claims => claims[`account-${next.params.accountId}-role`] === 'admin'));
-```