This post is based on Firebase 2. About a week after writing it, Google announced Firebase 3. I’ve since written another post that explains how to use Firebase 3 instead.

In this article I’ll show how I was able to get Firebase integrated into my Ionic 2 application. This was a great way to stand up an application in record time, without having to worry about building a backend to go with it.


You’ll see a few examples out there of how to add Firebase to your Ionic 2 application. Most common is to add a script tag to www/index.html, which links to the Firebase CDN:

  <!-- this Ionic's root component and where the app will load -->
  <script src='https://cdn.firebase.com/js/client/2.3.0/firebase.js'></script>
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/angular2-polyfills.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>

This has its downsides, obviously:
– The app will no longer work offline.
– You’re entirely dependent on the CDN working at all times.
– If anything changes in their hosted file (unlikely, but possible), then your app will break.

I’ll continue to explore ways of adding files to the build now that, as of Ionic 2.0.0-beta.4, Webpack has been removed from the project root.

Adding the Firebase typing definition

When I upgraded my beta to Ionic 2.0.0-beta.24, I noticed the new typings/ folder, which was in my opinion a really nice addition. Typings allow you to define the full breadth of TypeScript models that you’ll be using, and that folder – according to the plan behind Ionic 2 – is where you’re intended to keep all of the typings in your project.

You can find the Firebase .d.ts file on the DefinitelyTyped GitHub page. I’m a local copy guy, so I pulled down that file and added it directly to the typings/ directory. I believe there’s a way to reference a remote file, but I’m not sure how to do that.

Creating a Firebase data service

Now that we have access to Firebase, and we’ve got all of its methods definitely typed, we can move on to creating a data service that will allow us to reference our Firebase DB layer. At this point I assume you’ve already gone to the Firebase website and created an application. If not, head on over now, it only takes a minute if you’ve got a Gmail account.

From here on out, creating an injectable service that calls your Firebase instance is extremely simple:

import {Injectable} from 'angular2/core';

export class DataService {
    public db;
    constructor() {
        this.db = new Firebase('https://your-application.firebaseio.com/');

That is, at the very least, all you’ll need to get started with Firebase as a data service. From here you can reference DataService as a provider in any Page or Component in your project, and use standard Firebase methods to query data. We’ll see a few examples of that in a minute.

Decoupling your data service

If you’re very strict about decoupling, you might want to wrap all of the native Firebase methods in your own service methods. The benefit of doing that is that you can swap out Firebase for, say, Couchbase or MongoDB, by only having to replace the inner workings of your DataService. That’s a phenomenal idea, and way beyond the scope of this article. But setting it up in a separate class will put you well on your way.

If that’s the case, then you’ll probably want to set your db class member to private, and have all of your application methods that pull data exposed as public instead.

For now, I’m just going with the integrated solution, which is the lowest-hanging fruit. Don’t hate me.

Implementing Your DataService

You now have a reference to the root of your Firebase JSON tree. Any call from here on out will either be to that root, or to one of its child() references. So let’s take a quick look at how that works.

Pulling user data

So if you don’t know by now, a Firebase database is nothing more than a gigantic JSON tree, with reference paths to the various nodes within that tree. A reference path in Firebase looks pretty much like a file path structure. Super convenient if you ask me.

I’ll go into it more once I write up an article detailing my user login flow, but for now we’ll take a high level look at how I set up a UserService class, which references the current authenticated user in Firebase, as well as pulls information about them from the users node in my Firebase JSON.

Setting up a data structure

In my application, I have a sizable users node in my JSON tree that stores all user information. Each user is referenced by their Firebase uid, as per the example in the Firebase user-auth docs.

Here’s what my JSON tree looks like:

users: {
    some_uid_1: {
        settings: {},
        profile: {},
        activity: {}
    some_uid_2: {
        settings: {},
        profile: {},
        activity: {}

Class implementation

So when I a user logs in an returns a uid, I pass that as the key on the users path to fetch their data. In my SettingsPage class that injects my user service, the call to Firebase looks something like this super-abbreviated class definition:

export class AbbreviatedSettingsClass {
    public settings;

    constructor(private _user: UserService) {}

    onPageWillEnter() {

    private fetchSettings() {
        this._data.db.child(`users/${this._user.getUser().uid}/settings`).on('value', data => {
            this.settings = data.val();

As you can imagine, the getUser() method in my UserService returns the current logged-in user, and via template literals the path becomes something like users/some_uid_1/settings. If you’re familiar with Firebase, you know that path returns a data snapshot for the settings object under some_uid_1, from which I can pull data to populate my template. That’s essentially what happens in the value event handler.

There are plenty of other ways we could get into how to pull data, or how to structure your calls to Firebase. This was only meant to be a simple example. In a future post I’ll go into how I set up a login/registration screen, which will bring me into a deeper discussion about my user service.

Leave a Reply