Firebase Integration

Firebase Authentication, CRUD and filtering

This feature is only available in the PRO version.

The code for this integration is under the following folder: src/app/firebase

Set up

We are going to use AngularFire plugin in order to connect our Ionic Angular application with Firebase.‌

In order to install the plugin we have to run the following command in our ionic project: npm install firebase @angular/fire --save

Now, you need a firebase project to connect to this app. Go to firebase console and start a new project (or select an existing one). Once you have created the firebase project you will be redirected to the following menu:‌

Click on "Add Firebase to your web app" to see your new Firebase application’s credentials. We’ll specify these credentials to tell our Ionic application to communicate with our Firebase application.‌

The next step will be to add our Firebase credentials to our Ionic application. For this we’ll go to our Ionic project, which we created in the previous step, and add the following code in the environment.ts file located in src/environments/:

environment.ts
export const environment = {
production: false,
firebase: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID"
}
};

Keep in mind that you have to replace the constants with your own values.‌

Firebase Integrations

In Ionic 5 Full Starter App PRO Version you will find Firebase Authentication and Firebase CRUD features.

firebase integration code structure

For the CRUD integration we will use Cloud Firestore Database.

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity.