Using Angular with Firebase

• You can add your Firebase config object directly to your environment config
• @angular/fire is the official integration package
• You just import the base package and anything else you want to use

import {AngularFireModule} from '@angular/fire';
import {AngularFireAnalyticsModule} from '@angular/fire/analytics';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {AngularFireDatabaseModule} from '@angular/fire/database';
import {environment} from 'src/environments/environment';
...
// in the NgModule imports
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule,
AngularFireAuthModule,
AngularFireDatabaseModule,

• You can then inject and use instances from any of the imported modules

  • [Using Firebase Realtime Database from Angular]
  • [Using Firebase Authentication with Angular Guards]
  • [Authenticated Remote Calls with Firebase and Angular]
  • [How to add Firebase Authentication to an Angular application]

• private readonly fireAuth: AngularFireAuth

• fireAuth.user is an observable of the current user

• fireAuth.currentUser is a plain object

• I think this effectively auto-logs in users with Google

fireAuth.onAuthStateChanged((user: User|null) => {
  if (!user) {
    fireAuth.signInWithPopup(new auth.GoogleAuthProvider());
  }
});