Ionic 2 and Firebase

Finally got my Ionic 2 app with Firebase integration working, there were quite some struggles, so I will try to explain what I did to get it working.

The first part of this blog will cover the setup of Ionic, Angulafire2 and Firebase.

After that I will show you how to setup email/password authentication using a simple login page, a signup page and a password recovery page.

The next part will cover native Facebook and Google authentication, this will be a separate article.

And the last part will focus on retrieving (and storing) data from Firebase.

So let’s start with the setup of AngularFire2 and Firebase!

Let’s start from scratch by creating a new (blank) Ionic 2 application, called I
ionic2Firebase and go to the newly created folder. I guess it’s better for you to choose a different name, because Firebase, Facebook and Google need unique names.

$ ionic start ionic2Firebase blank --v2
$ cd ionic2Firebase

Check if it’s all working:

$ ionic serve

Next step will be adding firebase (version 3.3.0 according to the firebase version used in angularfire2) and angularfire2 (beta 6, NOT 7) and save it to our package.json bij adding –save.

$ npm install firebase@3.3.0 angularfire2@2.0.0-beta.6 --save

Start a build to see if there are no errors:

$ ionic run build

So now you can start developing you Ionic 2 application.
Open up the app.module.ts file (src/app/app.module.tst) and update it like below.
Of course you need to edit the firebaseConfig on line 8-12 with your firebase details.
So go to your Firebase console at https://console.firebase.google.com, create a new project and get your (web) configuration data.
For more information you can check https://firebase.google.com/docs/web/setup.

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AngularFireModule } from 'angularfire2';

export const firebaseConfig = {
  apiKey: '******',
  authDomain: '******',
  databaseURL: '******',
  storageBucket: '******',
  messagingSenderId: '******'
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Check if it’s working

$ionic serve

So now you can go on to the next part where I will show you how to create the login, signup and password recovery functionalities.
Go to Ionic 2 and Firebase authentication.