Submit data from your Ionic app to a Cloud Firestore Database

Firebase is one of the most powerful and popular Database as a Service (DBaaS) solutions available today. It provides a scalable NoSQL cloud database to store and sync data for client and server side development. Firebase is built on Google infrastructure and scales automatically, for even the largest apps, so you don’t need to worry about scaling your own servers.

Support for Firebase in Ionic and angular has been growing recently, and in this ionic and firebase tutorial, we will show you how to upload data from an Ionic 3 app to a database in Firebase Cloud Firestore.

Firebase Cloud Firestore is a scalable and flexible database for mobile, web, and server development. It keeps your data synchronized across client apps through realtime listeners and also offers offline support for mobile and web so you can build responsive apps that work regardless the Internet connectivity.

In this ionic 3 firebase authentication tutorial we’ll use a simple form to interact with the user with only three inputs:

  • first name
  • last name
  • age

For more information on forms and validations in Ionic framework, I suggest you to read this really complete tutorial Forms and Validation in Ionic.

But for our purposes, to interact with the firebase database from our application built with Ionic Framework, we’re going to use the Angularfire2 plugin. AngularFire is The official library for Firebase and Angular.

Connect your Ionic App with Firebase

To start off, let’s create an Ionic Application. You can either download this ionic 3 example for free by clicking in the "GET THE CODE" button from above or you can create your own ionic app from scratch.

If you’re completely new to the world of Ionic Framework, I suggest that you check out Ionic Framework introduction and key components.

To install the AngularFire plugin that we mentioned earlier, we have to run the following command from our console. (If you need help setting up your development environment to develop ionic apps just read Setup your development environment to build Ionic apps)

npm install firebase angularfire2 --save

Firebase Configuration

Once you’ve installed the plugin that we’re going to use to communicate between our Ionic app and Firebase, we have to create a new project in Firebase. To create your project, go in the Firebase console where you will see the following menu:

Firebase console

Click on “Add Firebase to your web app” to see the credentials of your new Firebase application. We’re going to use these credentials to tell our Ionic application to communicate with our Firebase application.

Firebase app credentials

The next step is to add these credentials to your Ionic project. For this, we’re going to use the file environment.ts located at src/environment/ were we will add the following:

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.


If you want to begin to develop your app with Ionic Framework but you don’t know where to start, I recommend that you try out Ion2FullApp ELITE. It’s an ionic template that you could use to create your Ionic app to save yourself hundreds of hours of design and development.

These are some of the Ionic pages you can find in the Firebase Integration section of Ion2FullApp ELITE.

The functionalities of this firebase integration include: authentication with different providers, feed with search filters, profile page with image handling (for profile picture) and all the CRUD operations.

Ion2FullApp Ionic Firebase Authentication
Ion2FullApp Firebase Ionic
Ion2FullApp Firebase CRUD

Congrats! We’re finished with the installation process. Now we’re ready to go on with the implementation of creating a form in Ionic using Firestore.

Building an Ionic Form with Firebase

In our example, we created an ionic framework app that recorded data with an angular form using the three fields that we already mentioned and a button to add a new “user” to the database.

As you can see in the screenshot below, out example ionic app will be as simple as this:

Firebase ionic example

To perform the operation of adding this user to the firebase firestore database, we will create an ionic service that will contain a method to handle this functionality.

export class FirebaseService {

  constructor(
    public afs: AngularFirestore
  ){ }

    addUser(value){
      return new Promise<any>((resolve, reject) => {
        this.afs.collection('/users').add({
          name: value.name,
          surname: value.surname,
          age: parseInt(value.age)
        })
        .then(
          (res) => {
            resolve(res)
          },
          err => reject(err)
        )
      })
    }
}

With this method, we’ll save in the “users” collection the data submitted in the form of our Ionic app. It should be noted that the “users” collection is automatically created in Firestore when the first element is inserted. This means you don’t have to create it manually.

So, after inserting the new record in the Firestore database, if you go to your Firebase Console, you should see the user added to the collection like in the following screenshot:

Firebase database

Finally, we are going to explain the function of pressing the “ADD” button to submit the form data to the cloud database.

add(value){
  this.firebaseService.addUser(value)
  .then( res => {
    let toast = this.toastCtrl.create({
      message: 'User was created successfully',
      duration: 3000
    });
    toast.present();
    this.resetFields();
  }, err => {
    console.log(err)
  })
}

The add function receives the values entered in the ionic form. We use these values to call the addUser function from the FirebaseService that we saw previously when creating the records in the database.

So, as you can see it’s super easy to build an Ionic Form with Firebase.

Keep learning Ionic and Firebase

In this ionic firestore tutorial, we learned how to set up a database for ionic app. We went through the steps to save information in a Cloud Firestore databased from an application built with Ionic Framework. Additionally, we learned how to use Forms with Ionic and Firebase.

If you didn’t read the last post where we explained how to use Firebase Storage to upload files, I recommend that you check out How to upload a file to Firebase from an Ionic application

If you wish to keep learning about Firebase stay tuned for upcoming tutorials in which we will be writing about CRUD operations with firebase and also about ionic 3 firebase authentication options. You can subscribe to our newsletter to get noticed when new ionic tutorials are released.

I hope this firebase and ionic 3 tutorial was helpful for you. If you have any questions don’t hesitate to leave a comment on the section below.

Would you like to keep learning about Ionic Framework? Find dozens of ionic framework tutorials in our tutorials section.