Angular Firebase Authentication

Last time we had Firebase Auth integrated at Angular 17. Here is a quick update to keep it fresh in Angular 19.

Before update, our main.ts looked like this

// main.ts before
const fbApp = () => initializeApp(firebaeConfigHere);
const authApp = () => initializeAuth(fbApp(), {
  persistence: browserSessionPersistence,
  popupRedirectResolver: browserPopupRedirectResolver
});
const firebaseProviders: EnvironmentProviders = importProvidersFrom([
  provideFirebaseApp(fbApp),
  provideAuth(authApp),
]);
bootstrapApplication(AppComponent, {
  providers: [
      // ...
    firebaseProviders
  ],
});

The updates touch the importProvidersFrom, it not longer is needed

// main.ts thew new
const firebaseProviders = [  provideFirebaseApp(fbApp),  provideAuth(authApp),];
bootstrapApplication(AppComponent, {
  providers: [
    // expand it
    ...firebaseProviders
  ],
});

One way to inject the AuthState on application start was to use the APP_INITIALIZER token with no return, and one injection, like this

{
    provide: APP_INITIALIZER,
    // dummy factory
    useFactory: () => () => {},
    multi: true,
    // injected depdencies, this will be constructed immidiately
    deps: [AuthState],
  },

This simply becomes this:

// new provider
provideAppInitializer(() => {
  inject(AuthState);
  return null;
}),

That’s it. Looks like the new Firebase library still works as designed.