DEV Community

Cover image for Angular Firebase Authentication Update: v.19
Ayyash
Ayyash

Posted on • Originally published at garage.sekrab.com

Angular Firebase Authentication Update: v.19

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

Providers

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
  ],
});
Enter fullscreen mode Exit fullscreen mode

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
  ],
});
Enter fullscreen mode Exit fullscreen mode

APP_INITIALIZER token

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],
  },
Enter fullscreen mode Exit fullscreen mode

This simply becomes this:

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

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

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay