ChrizTalk

Ionic 2 and Firebase

January 20, 2017ChrizFirebase, Ionic1 comment
If you like it, please share it:

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.


If you like it, please share it:
Previous Post Cross database queries on views in SQL Azure Next Post Ionic 2 and Firebase authentication

1 comment. Leave new

Ionic 2 and Firebase authentication - ChrizTalk
January 25, 2017 10:59 am

[…] recovery form that will bind to your Firebase application. This post is a based on my previous post about the setup of Ionic, Angularfire2 and Firebase so I will go on from […]

Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Ionic 3 and Firebase Facebook authentication using AngularFire2
  • Ionic 3 and Firebase authentication using AngularFire2
  • Ionic 3, Firebase and AngularFire2
  • Ionic 2 and Font Awesome using Sass
  • Using Google Fonts in Ionic 2

My Ionic 2 Theme

Please have a look at my new Ionic 2 theme.

&copy 2016 ChrizTalk