How to connect Ionic & Firebase using the Web SDK

Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

Before writing any code, we are going to take a few minutes to install everything you need to be able to build this app, that way you will not have to be switching context between coding and fixing.

The first thing you will do is install node.js.

The second thing you will do is ensure that you have Ionic installed, you will do that by opening your terminal and typing:

npm install -g ionic

Depending on your operating system (mostly if you run on Linux or Mac) you might have to add sudo before the "npm install" command.

Create the App

Now that you installed everything, you are ready to create your new Ionic app.

To do this, go ahead and open your terminal, move to wherever it is that you save your projects and start the app:

cd Development
ionic start myApp blank --type=angular
cd myApp

The start command will create a new app, and the --type=angular flag will create an Ionic app using angular as a framework for handling the logic.

The CLI is going to ask you if you want to add Cordova and Ionic Appflow SDK, choose no in both prompts, we’re using Capacitor for the native functionality and we’ll cover everything we need to know about it soon.

If you are new to the terminal, what those commands do is to:

  • Move you into the Development folder.
  • Create a new Ionic app using the blank template and calling it myApp.
  • Move into the new app’s folder.

From now on, whenever you are going to type something on the command line, it is going to be in your app’s folder unless I say otherwise.

The packages that come with the project

When you use the Ionic CLI to create a new project, it is going to do many things for you, one of those things is making sure your project has the necessary packages it needs.

That means, the start command is going to install all of the requirements and more, here’s what package.json should look like:

"dependencies": {
  "@angular/common": "~8.1.2",
  "@angular/core": "~8.1.2",
  "@angular/forms": "~8.1.2",
  "@angular/platform-browser": "~8.1.2",
  "@angular/platform-browser-dynamic": "~8.1.2",
  "@angular/router": "~8.1.2",
  "@ionic-native/core": "^5.0.0",
  "@ionic-native/splash-screen": "^5.0.0",
  "@ionic-native/status-bar": "^5.0.0",
  "@ionic/angular": "^4.7.1",
  "core-js": "^2.5.4",
  "rxjs": "~6.5.1",
  "tslib": "^1.9.0",
  "zone.js": "~0.9.1"
},

Depending on when you read this, these packages might change (specially version numbers) so keep that in mind; also you can always email me at j@javebratt.com if you have any questions/issues/problems with this.

Install Firebase

To install a new package open your Terminal again and run:

npm install firebase --save

That will install the latest version of the Firebase JavaScript SDK, which is what we will use in this first example. (By the way, if you’re using npm 5 you won’t need to add the –save flag.)

Initializing the Firebase App

The first thing we need to do for our app is to initialize it, that means telling Ionic how to connect to our Firebase database.

For that, we are going to be working on app.component.ts file.

The first thing you’re going to do in that file is to import Firebase, that way the file knows it needs to use it and has access to the methods we need.

We need to add the import line at the top of the file with the other imports:

import * as firebase from 'firebase/app';

That line of code right there imports the Firebase core functionality in the ‘firebase’ namespace, we’ll use it to initialize our app.

After that, we need to go into the constructor and call the initialize app function:

firebase.initializeApp();

That function takes a config object as a parameter, and the config object has all the API keys to connect to Firebase.

Now we need to go to our Firebase Console on the web, open a browser and navigate to https://console.firebase.google.com.

You’ll be asked to log in with your Google account, and then you’ll see a dashboard like this.

Firebase Dashboard

Click the create new app button, fill in the form and then you’ll be taken to your app’s dashboard.

To get that config object for your app, click the button that says “Add Firebase to your web app”.

Firebase Console

It will show you some initialization code, but focus just on this bit:

var config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
};

Going back to app.component.ts, you can either pass that object to the .initializeApp() function or you can create a different file to hold your credentials and then import them inside the component page.

Keeping the credentials in a separate file is a good practice if you plan to keep a public repo of your app, that way you can keep that file out of source control.

To do this, create a file called credentials.ts inside the src/app/ folder, the entire content of the file will be this:

// Initialize Firebase
export const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
};

Then, inside the app.component.ts file you can import the "firebaseConfig" object and pass it to the firebase initialization function:

import { firebaseConfig } from './credentials';

initializeApp() {
  firebase.initializeApp(firebaseConfig);
  ...
}

And that’s it, now your Ionic application can talk to your Firebase project 😃