Ionic Firebase Integration

Learn how to use Ionic Firebase Authentication, CRUD and data querying

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

Cloud Firestore is a NoSQL, document-oriented database.

Unlike a SQL database, there are no tables or rows. Instead, you store data in documents, which are organized into collections.

Each document contains a set of key-value pairs. Cloud Firestore is optimized for storing large collections of small documents.

All documents must be stored in collections. Documents can contain subcollections and nested objects, both of which can include primitive fields like strings or complex objects like lists.

Collections and documents are created implicitly in Cloud Firestore. Simply assign data to a document within a collection. If either the collection or document does not exist, Cloud Firestore creates it.

Learn more about Data Model in Firebase Firestore.

pageFirebase CRUDpageFirebase Authentication