From d6fc54981dc52b1bfdc58d39cf5e2bad9c257b90 Mon Sep 17 00:00:00 2001 From: Armando Navarro Date: Sat, 24 Oct 2026 07:00:33 -0700 Subject: [PATCH] docs: fix the beforeAuthStateChanged import and the Imagen removal note The auth guide's cookie sync and the sample app imported beforeAuthStateChanged from firebase/auth, because AngularFire's version kept the app unstable until the first sign-in or sign-out (#3748). The fix (#3770) shipped in 20.1.1 and 21.0.0-rc.2, so both now import it from @angular/fire/auth, and the guide's note lists the releases that still need the workaround. The v21 upgrade guide covered only getImagenModel. firebase 12.18 removed every Imagen export, and the migration warns about getImagenModel only in files that imported an old Vertex AI entry point. Fixes #3815 Fixes #3816 --- docs/auth.md | 8 ++++---- docs/version-21-upgrade.md | 2 ++ sample/src/app/auth/auth.component.ts | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/auth.md b/docs/auth.md index 31f6056c2..ca0123790 100644 --- a/docs/auth.md +++ b/docs/auth.md @@ -93,8 +93,8 @@ Add the cookie sync to your `app.config.ts`. AngularFire's `idToken` observable 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'; +// on AngularFire 20.1.0 and earlier, or 21.0.0-rc.0 and rc.1, import beforeAuthStateChanged from firebase/auth (see note below) +import { Auth, beforeAuthStateChanged, idToken } from '@angular/fire/auth'; import cookies from 'js-cookie'; // add to appConfig.providers @@ -151,9 +151,9 @@ This cookie carries a short-lived ID token that scripts on your page can read. F 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` +#### On AngularFire 20.1.0 and earlier, or 21.0.0-rc.0 and rc.1 -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`. In AngularFire 21.0.0-rc.1 and earlier, 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 ([#3748](https://github.com/angular/angularfire/issues/3748)). +On these releases, import `beforeAuthStateChanged` from `firebase/auth` instead of `@angular/fire/auth`. Otherwise it keeps the app marked as busy until its callback first runs, and this callback only runs when someone signs in or out ([#3748](https://github.com/angular/angularfire/issues/3748)). The fix shipped in AngularFire 20.1.1 and 21.0.0-rc.2. ### 3. Pass the cookie into the render diff --git a/docs/version-21-upgrade.md b/docs/version-21-upgrade.md index 474884423..004ed61e1 100644 --- a/docs/version-21-upgrade.md +++ b/docs/version-21-upgrade.md @@ -77,6 +77,8 @@ Two symbols were removed rather than renamed. The migration leaves their imports - `VertexAIOptions`: the new `AIOptions` takes a `backend` instead of a `location`, so rebuild the options by hand using the table above. - `getImagenModel`: Firebase shut the Imagen models down in August 2026 and removed the API in firebase 12.18 (`@firebase/ai` 2.15), so move image generation to the Gemini image models through [`getGenerativeModel`](https://firebase.google.com/docs/ai-logic/generate-images-gemini). + - The same release removed every other `Imagen*` export too, such as `ImagenModel`, `ImagenAspectRatio` and `ImagenGenerationConfig`. + - The migration does not warn about those. It warns about `getImagenModel` only in files that imported an old Vertex AI entry point, so check imports from `@angular/fire/ai` and `firebase/ai` by hand. ## Other notes diff --git a/sample/src/app/auth/auth.component.ts b/sample/src/app/auth/auth.component.ts index 92ba70b45..a42d643c2 100644 --- a/sample/src/app/auth/auth.component.ts +++ b/sample/src/app/auth/auth.component.ts @@ -1,10 +1,10 @@ import { Component, EnvironmentInjector, inject, makeStateKey, OnDestroy, PLATFORM_ID, runInInjectionContext, TransferState } from '@angular/core'; -import { Auth, signInAnonymously, signOut, User } from '@angular/fire/auth'; +import { Auth, beforeAuthStateChanged, signInAnonymously, signOut, User } from '@angular/fire/auth'; import { map, startWith, switchMap, tap } from 'rxjs/operators'; import { AsyncPipe, isPlatformBrowser, isPlatformServer } from '@angular/common'; import cookies from 'js-cookie'; import { from, Observable } from 'rxjs'; -import { GoogleAuthProvider, onAuthStateChanged, signInWithPopup, beforeAuthStateChanged, onIdTokenChanged } from "firebase/auth"; +import { GoogleAuthProvider, onAuthStateChanged, signInWithPopup, onIdTokenChanged } from "firebase/auth"; import { ɵzoneWrap } from "@angular/fire"; // TODO bring this to RxFire