Set Up Firebase Database in Ionic 5 Angular

Last updated on: by Editorial Team
In this Ionic 5 Firebase tutorial, we are going to look at step by step how to set up Firebase Realtime Database in Ionic 5 Angular project.

Firebase is a popularly known Google product and Its a NoSQL Realtime Database. Working with Firebase is easy, It doesn’t make its user to lost in its dashboard due to its superb User Experience. Firebase offers top-notch features for building web and mobile applications swiftly:

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

Firebase offers two services:

Cloud Firestore: It’s a modern Real-time NoSQL database with auto-scaling and more robust queries.

Real-time Database: It allows us to build an app which needs to be updated at real-time. e.g., stock market app, sports app, live chat app etc.

In this tutorial we will focus on Firebase Real-time Database.

Create Firebase Account

Visit and sign in using your Gmail account.

Firebase Account Setup

Click on the “create a project” button then click on continue button.

Ionic Firebase Tutorial

Next, click on the web icon as shown in the screenshot.

Ionic 5 Dashboard

Next, add Firebase to your web app. Enter the app’s nickname and then click on the next button.

Ionic 5 Firebase App Nickname

It will take you to the screen where you will see Firebase configuration, copy the red marked Firebase configuration keys keep it in the notepad or something else. You will need these keys to register in your Ionic/Angular project.

Firebase Config Keys

Next, we will click on the “database” from the left side navbar. Then, look for Realtime Database and click on the “create database” button.

Firebase Realtime Database

It will open the security rules modal popover, select “start in test mode” option. Remember we are setting up these rules fro testing purpose. In real world app be careful about database rules.

Firebase Security

Now, we are all set to use the Firebase Real-time Database.

Create Ionic/Angular Project

Run the following command to generate a new Ionic/Angular project.

ionic start ionic-firebase-setup --type=angular

Choose blank or which ever template you would like to choose from the Ionic’s template list.

? Starter template: 
  tabs         | A starting project with a simple tabbed interface 
  sidemenu     | A starting project with a side menu with navigation in the content area 
❯ blank        | A blank starter project 
  my-first-app | An example application that builds a camera with gallery 
  conference   | A kitchen-sink application that shows off all Ionic has to offer

Head over to the Ionic Firebase project folder.

cd ionic-firebase-setup

Run the following command to install lab mode.

npm i @ionic/lab --save-dev

Start the Ionic app.

ionic serve -l

Ionic Cordova Angular Firebase App

Install Firebase Package in Ionic App

We need to install the Firebase library to set up Firebase in our Ionic app. Run the following command in the terminal.

npm install firebase @angular/fire --save

Add Firebase Config Keys

In this step, we will register the Firebase config rules inside the (production environment) and environment.ts file, you can find these files in the src > environments folder.

Add the following code inside the file.

export const environment = {
  production: true,
  firebaseConfig: {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-cloud-firestore-project>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"

Place the following code inside the environment.ts file.

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-cloud-firestore-project>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"

Import and Register Firebase in AppModule

Lastly, go to app.module.ts file. Here import and register Firebase services along with that also inject Firebase config keys with the AngularFireModule.initializeApp() method.

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 firebase + enviornment

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';

  declarations: [AppComponent],
  entryComponents: [],
  imports: [
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],

export class AppModule {}


That’s it for now, finally we have learned how to set up Firebase in an Ionic 5 app. Now, you can connect your Ionic app with Firebase Realtime database and enjoy building it.