fix(angular): added checks for invalid SSR store and pproviders

Author: dackers86

examples/angular/package.json

@@ -18,7 +18,7 @@
     "@angular/common": "^20.2.4",
     "@angular/compiler": "^20.2.4",
     "@angular/core": "^20.2.4",
-    "@angular/fire": "^19.0.0",
+    "@angular/fire": "^20.0.0",
     "@angular/forms": "^20.2.4",
     "@angular/platform-browser": "^20.2.4",
     "@angular/platform-browser-dynamic": "^20.2.4",
@@ -29,6 +29,7 @@
     "@firebase-ui/core": "workspace:*",
     "@firebase-ui/styles": "workspace:*",
     "@firebase-ui/translations": "workspace:*",
+    "@tanstack/angular-form": "^1.1.0",
     "@tailwindcss/postcss": "^4.0.6",
     "express": "^4.18.2",
     "postcss": "^8.5.2",
@@ -41,7 +42,6 @@
     "@angular/build": "^20.2.2",
     "@angular/cli": "^20.2.2",
     "@angular/compiler-cli": "^20.2.4",
-    "@tanstack/angular-form": "^0.42.0",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",

packages/firebaseui-angular/src/lib/provider.ts

@@ -45,12 +45,28 @@ type PolicyConfig = {
 };
 
 export function provideFirebaseUI(
-  uiFactory: (apps: FirebaseApps) => FirebaseUIType,
+  uiFactory: (apps: FirebaseApps) => FirebaseUIType
 ): EnvironmentProviders {
   const providers: Provider[] = [
     // TODO: This should depend on the FirebaseAuth provider via deps,
     // see https://github.com/angular/angularfire/blob/35e0a9859299010488852b1826e4083abe56528f/src/firestore/firestore.module.ts#L76
-    { provide: FIREBASE_UI_STORE, useFactory: uiFactory, deps: [FirebaseApps] },
+    {
+      provide: FIREBASE_UI_STORE,
+      useFactory: () => {
+        try {
+          // Try to get FirebaseApps, but handle the case where it's not available (SSR)
+          const apps = inject(FirebaseApps, { optional: true });
+          if (!apps || apps.length === 0) {
+            return null as any;
+          }
+          return uiFactory(apps);
+        } catch (error) {
+          // Return null for SSR when FirebaseApps is not available
+          return null as any;
+        }
+      },
+    },
+    FirebaseUI,
   ];
 
   return makeEnvironmentProviders(providers);
@@ -59,16 +75,17 @@ export function provideFirebaseUI(
 export function provideFirebaseUIPolicies(factory: () => PolicyConfig) {
   const providers: Provider[] = [
     { provide: FIREBASE_UI_POLICIES, useFactory: factory },
+    FirebaseUIPolicies,
   ];
 
   return makeEnvironmentProviders(providers);
 }
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: "root",
 })
 export class FirebaseUI {
-  private store = inject(FIREBASE_UI_STORE);
+  private store = inject(FIREBASE_UI_STORE, { optional: true });
   private destroyed$: ReplaySubject<void> = new ReplaySubject(1);
 
   config() {
@@ -77,14 +94,21 @@ export class FirebaseUI {
 
   translation<T extends TranslationCategory>(
     category: T,
-    key: TranslationKey<T>,
+    key: TranslationKey<T>
   ) {
     return this.config().pipe(
-      map((config) => getTranslation(config, category, key)),
+      map((config) => getTranslation(config, category, key))
     );
   }
 
-  useStore<T>(store: Store<T>): Observable<T> {
+  useStore<T>(store: Store<T> | null): Observable<T> {
+    if (!store) {
+      // Return an observable that emits a default value for SSR when store is not available
+      return new Observable<T>((subscriber) => {
+        subscriber.next({} as T);
+        subscriber.complete();
+      });
+    }
     return new Observable<T>((sub) => {
       sub.next(store.get());
       return store.subscribe((value) => sub.next(value));