Ionic 6 Firebase Tutorial: Connect Firebase to Ionic App

Ionic Angular Firebase Database tutorial; This comprehensive guide will help you pursue how to connect the Firebase database to the Ionic angular application using the angular fire package.

The AngularFire is an official Angular library for Firebase, and it gives developers flawless experience while developing in the Angular ecosystem.

It comes with handy features that make the development task immensely facile. Here are some features that propel the backend related tasks forward in very less time.

  • Dependency injection: Provide and Inject Firebase services in your components.
  • Zone.js wrappers – Stable zones provide precise functionality of service workers, forms, SSR, and pre-rendering
  • Observable based – Employ RxJS rather than callbacks for realtime streams
  • NgRx friendly API: Mix with NgRx using AngularFire’s action based APIs.
  • Lazy-loading – AngularFire dynamically imports much of Firebase, reducing time to load your app
  • Deploy schematics: Get your Angular application deployed on Firebase Hosting with a single command.
  • Google Analytics – Zero-effort Angular Router awareness in Google Analytics
  • Router Guards – Guard your Angular routes with built-in Firebase Authentication checks.

Throughout this extensive guide you can learn to integrate Firebase in Ionic using Angular Fire package. Firebase makes your life easy by providing Cloud Firestore and Real-time databases on top of that and here are the standard features that Firebase offers for robust web and mobile application development:

  • Cloud storage
  • Realtime update
  • Easy A/B Testing
  • Single-page app hosting
  • Real-time communication
  • Hosting and cloud storage
  • Push notifications support
  • Analytics Monitoring
  • Authentication support
  • Easy Server management
  • Google Cloud IoT tools Integration support

How to Add Firebase Database in Ionic App

  • Step 1: Get Firebase Configuration API Keys
  • Step 2: Install Ionic Angular App
  • Step 3: Install AngularFire Package
  • Step 4: Add Firebase API Keys
  • Step 5: Add Firebase Modules in App Module

Get Firebase Configuration API Keys

Firstly, navigate to firebase.google.com site; most importantly, click on the top-right menu item and sign in using your email id.

Next, create a firebase project by clicking on the Create a project link.

Firebase Create Account

On the next page, provide a name to your firebase project.

Create a project

Further, add Firebase to your app by clicking on one of the three mentioned icons.

add Firebase to app

In the next step, add a project name to include Firebase to your web app.

add firebase

Eventually, you can copy Firebase configuration keys; these keys evoke Ionic and Firebase’s consensus.

Firebase configuration keys

Install Ionic Angular App

Must install Ionic CLI before starting developing an Ionic app:

npm install -g @ionic/cli

Now, use command to create Ionic app:

ionic start ionic-demo-app blank --type=angular

Move to project folder:

cd ionic-demo-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install AngularFire Package

In this step, you will add the Firebase package into the Ionic Angular app, so first install the AngularFire package using the recommended command:

npm install firebase @angular/fire

Add Firebase API Keys

In the subsequent step, we have to add the Firebase Configuration API keys into environment files.

Update Firebase keys in environment.ts file:

export const environment = {

  production: false,
  firebaseConfig: {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  }

};

Again, update Firebase keys in the environment.prod.ts file:

export const environment = {

  production: true,
  firebaseConfig: {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  }

};

Add Firebase Modules in App Module

Lastly, you have to import Firebase modules in AppModule class; AngularFire offers different modules for handling a specific task. However, we imported AngularFireModule, AngularFireAuthModule, AngularFireDatabaseModule and AngularFireStorageModule.

Additionally, the import environment variable and pass it on the initializeApp() method to connect firebase to Ionic.

Update app.module.ts file with Firebase modules and environment details:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


import { environment } from '../environments/environment';

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireDatabaseModule } from '@angular/fire/database';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

export class AppModule {}

Conclusion

You have successfully added the Firebase database to the Ionic Angular application. You can now start developing an Ionic application with Firebase Database.