Ionic Firebase Communication

HOW TO CONNECT IONIC 5 TO FIREBASE

Google firebase is a life changing game for developers as it gives you the chance to concentrate on business needs, other than worrying about back-end logic and code maintenance.

Firebase is a noSQL database which provides you with a scalable cloud database to store and sync data.

Websites or mobile apps should have a connection to firebase to aid user authentications, crud functionality of an app, push notifications, crash reports and many other features brought by firebase.

See how to connect ionic application to firebase.

To begin, first create ionic 5 angular application using ionic start

$ ionic start fireBaseProject --type=angular

Check this if you don’t know how to start 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 new project in firebase console. Jump to firebase and create an account or login if you already a registered member.

Go to console at the top right hand corner to create a new project. Alternatively you can select any project already created by you to work with.

Add new project.

Here project name is ionicTutorials. Give your desired name but and make it reasonable.

Proceed and enable Google analytics for ‘this project’.

Move to last step, accept all required terms, select analytics country and create project.

Wulabaaa our new firebase project is now created and you should be presented with a dashboard. Let now 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 your 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. App fully connected to firebase.

Stay tune for more articles on ionic-firebase user authentication, crud operations, push notifications and many more.

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