How to Use Firebase with Angular: Simple Setup and Example

To use Firebase with Angular, install the @angular/fire package and initialize Firebase in your Angular app module with your Firebase project settings. Then, use AngularFire services like AngularFireAuth or AngularFirestore to interact with Firebase features.

Syntax

First, install AngularFire and Firebase packages. Then, import AngularFireModule and initialize it with your Firebase config in AppModule. Import other AngularFire modules as needed.

• AngularFireModule.initializeApp(config): Connects your Angular app to Firebase using your project settings.
• AngularFireAuth: Service to handle authentication.
• AngularFirestore: Service to work with Firestore database.

typescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AppComponent } from './app.component';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Example

This example shows how to set up Firebase authentication in Angular and display the current user's email after login.

typescript

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';
import firebase from 'firebase/compat/app';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="user$ | async as user; else login">
      <p>Welcome, {{ user.email }}</p>
      <button (click)="logout()">Logout</button>
    </div>
    <ng-template #login>
      <button (click)="login()">Login with Google</button>
    </ng-template>
  `
})
export class AppComponent {
  user$: Observable<any>;

  constructor(private afAuth: AngularFireAuth) {
    this.user$ = afAuth.authState;
  }

  login() {
    this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
    this.afAuth.signOut();
  }
}

Output

<p>Before login: A button labeled 'Login with Google' is shown.<br>After login: Text 'Welcome, [e-mail]' and a 'Logout' button appear.</p>

Common Pitfalls

Common mistakes include:

• Not installing @angular/fire and firebase packages before use.
• Forgetting to add Firebase config in AngularFireModule.initializeApp().
• Using incompatible Firebase SDK versions with AngularFire.
• Not importing required AngularFire modules in AppModule.
• Trying to use Firebase services before AngularFire is initialized.

typescript

/* Wrong: Missing AngularFireModule initialization */
@NgModule({
  imports: [BrowserModule, AngularFireAuthModule]
})
export class AppModule {}

/* Right: Proper initialization with config */
@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule
  ]
})
export class AppModule {}

Quick Reference

• Install packages: npm install firebase @angular/fire
• Import and initialize Firebase in AppModule.
• Use AngularFire services like AngularFireAuth for auth and AngularFirestore for database.
• Always check Firebase config matches your Firebase console project.

Key Takeaways

Install and import @angular/fire and firebase packages before using Firebase in Angular.

Initialize Firebase in AppModule with your project config using AngularFireModule.initializeApp().

Use AngularFire services like AngularFireAuth and AngularFirestore to access Firebase features.

Always verify your Firebase config matches your Firebase project settings.

Avoid using Firebase services before AngularFire is properly initialized.