HOW TO CONNECT IONIC 5 TO FIREBASE

Firebase helps you build production-ready apps without worrying much about backend logic and code maintenance.

It’s a noSQL database that provides you with a scalable cloud database to store and sync data.

Applications (web, mobile, and desktop) that seek to make use of Firebase need to establish a connection to the platform. This will aid user authentication, crud functionalities, push notifications, crash reports, and other features brought by Firebase.

To establish a connection with Ionic 5 and Firebase, first create an ionic angular application using ionic start as seen below.

$ ionic start fireBaseProject --type=angular

Check this if you don’t know how to start a new ionic application.

Next, navigate inside the project folder and, with npm, install angular/fire. AngularFire is the official angular library for Firebase.

npm install firebase @angular/fire — save

Now we need to create a new project in the Firebase console. Jump to firebase and create an account or login if you are already a registered member.

Go to the console at the top right-hand corner and create a new project. Alternatively, you can select any previous project to work with.

Add a new project.

ionicTutorials is the fictional project name. Take a reasonable desired name to proceed and enable Google analytics for ‘this project’.

With the last step, accept all required terms and create project.

Firebase project is now created if the above was followed successfully and should be presented with a dashboard. To add firebase to the ionic app from the dashboard, select add firebase to your web app as shown below.

Give a nickname to the web app. Ionic Firebase Project is the name used here. Use a prefered name and register the app.

Lastly, copy firebase config from the dashboard and past into the ionic app code.

With the configuration script copied from firebase, past it into the environment file within the ionic app. Environment file is found within the project root folder of the ionic app.

export const environment = {
  production: true,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectID",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

Next open environment.ts file within the same folder.

export const environment = {
  production: false,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectId",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

Wrapping things up, open app.module.ts to import the insalled module @angular/fire.

//import what you need from firebase
import { AngularFireModule } from '@angular/fire';
//import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
//import { AngularFireStorageModule } from '@angular/fire/storage';
//environment
import { environment } from '../environments/environment';

Job done and app fully connected to firebase.

Takeaway

Connecting a web app, mobile or desktop application to firebase is pretty straight forward and as seen from the opening pages of this article, firebase makes it easy to develop enterprise apps without worrying much about the backend code logic and maintenance which makes it one of the most widely used noSQL databases.

Firebase documentation is another way to further expand your knowledge on this noSQL database.