@angular/fire Is Dead: Can I Use the Native Firebase SDK Instead?

[coturiv]

Describe your environment

I manage projects that are over 8 years old, built with Angular and Firebase. However, I’m unable to maintain them as updates to @angular/fire have fallen significantly behind. Therefore, I’m considering a different approach.

I also noticed that this package still mentions using @angular/fire. Is there any other approach, similar to how React handles this?

---

Describe the problem

Steps to reproduce

angular/angularfire#3678

angular/angularfire#3689

[russellwheatley]

Hi @coturiv - I'm afraid the Angular project requires AngularFire. It is used throughout the Angular FirebaseUI package. I'm not sure angularfire is dead as you mentioned, but it might take some time to update.

[spock123]

Yes you can, we use the native SDK without any issues.
Less bloat, more simple. It just works

[MichaelVerdon]

I think hypothetically you could run it from a local fork where you patch the angular package to use the native js-sdk but unsure if it is worth the effort (unless its not being worked on at all) and I am unsure about plans for Angular-fire. Unfortunately we would not be able to control this here.

[anisabboud]

Please decouple this project from AngularFire.

Instead of doing:

import { Auth } from '@angular/fire/auth';
private auth = inject(Auth);

Just import directly from the firebase js sdk:

import { getAuth } from 'firebase/auth';
private auth = getAuth();

AngularFire hasn't been properly maintained for years now. It's always behind.

[spock123]

Here is an example of how you can use native js SDK to lazy load and use Firebase Auth. The Firebase Auth is initialized first time the service is referenced, so it's lazy loaded. You can just add more methods and expose state as signals etc if you want. Or do that in other services using the exposed auth property.

import { Injectable } from '@angular/core';
import {
    getAuth,
    Auth,
    AuthProvider,
    signInWithRedirect,
    browserLocalPersistence
} from 'firebase/auth';
import { initializeApp } from 'firebase/app';
import { environment } from '@environment';
import { signInWithEmailAndPassword, UserCredential } from 'firebase/auth';

@Injectable({
    providedIn: 'root'
})
export class FirebaseAuthService {
    public auth: Auth;

    constructor() {

        // Initialize Firebase on first use, this makes it lazy loaded
        const app = initializeApp(environment.firebase);
        this.auth = getAuth(app);
        this.auth.setPersistence(browserLocalPersistence);

        /*
        // Here is how you can subscribe to auth state changes and other stuff
        // You could expose different values as signals 
        this.auth.onAuthStateChanged(() => {
            console.log(`onAuthStateChanged. User: ${this.auth.currentUser}`);
        });
        */
    }

    // Login with username and password
    async usernamePasswordLogin(email: string, password: string): Promise<UserCredential> {
        try {
            const user = await signInWithEmailAndPassword(this.auth, email, password);
            return user;
        } catch (err) {
            console.error(err);
            throw err;
        }
    }

    // Login with provider
    async providerLogin(provider: AuthProvider): Promise<void> {
        try {
            await signInWithRedirect(this.auth, provider);
        } catch (err) {
            console.error(err);
        }
    }
}

[spock123]

Here is how to lazy-load and use Firestore natively. Inject this class and it will configure Firestore on the first reference. Extend with more functions if you want. I couldn't figure out the typing of the firestore property.

import { Injectable } from '@angular/core';
import { initializeApp } from 'firebase/app';
import {
    getFirestore,
    doc,
    updateDoc,
    getDoc,
    setDoc,
    DocumentReference
} from 'firebase/firestore';
import { environment } from '@environment';

@Injectable({
    providedIn: 'root'
})
export class FirestoreService {
    public firestore: any;

    constructor() {
        const app = initializeApp(environment.firebase);
        this.firestore = getFirestore(app);
    }

    async getDocument(path: string) {
        const docRef: DocumentReference = doc(this.firestore, ...path.split('/'));
        const docSnap = await getDoc(docRef);
        if (docSnap.exists()) {
            return docSnap.data();
        } else {
            return null;
        }
    }

    async updateDocument(path: string, data: any) {
        const docRef = doc(this.firestore, ...path.split('/'));
        await updateDoc(docRef, data);
    }

    async setDocument(path: string, data: any) {
        const docRef: DocumentReference = doc(this.firestore, ...path.split('/'));
        await setDoc(docRef, data);
    }
}

[coturiv]

@spock123, thanks for taking the time to explain this in detail! I’ll check it locally. I really appreciate you sharing your insight.

[anisabboud]

@spock123 thank you. For typing Firestore you can:

import { type Firestore, getFirestore } from 'firebase/firestore';

  private firestore: Firestore = getFirestore(this.app);

[Ehesp]

cc @jamesdaniels @jhuleatt @kroikie thoughts on this?

[Ehesp]

I wonder whether we could do something like:

export function provideFirebaseUI(uiFactory: (apps: FirebaseApps) => FirebaseUIStore): EnvironmentProviders {
  const providers: Provider[] = [
    {
      provide: FIREBASE_UI_STORE,
      deps: [FirebaseApps, [new Optional(), Auth]],
      useFactory: () => {
        const apps = inject(FirebaseApps);
        if (!apps || apps.length === 0) {
          // Pull from Firebase SDK
          return uiFactory(getApps());
        }
        return uiFactory(apps);
      },
    },
  ];

  return makeEnvironmentProviders(providers);
}

So if there's no AngularFire context injected we grab the apps from the native SSK instead.