Just got my Ionic 3 app with Firebase integration working, in this post I will try to explain what I did to get it working.
The first part of this blog will cover the setup of Ionic 3, 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 3 application, Let’s call it
ionic3Firebase 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 ionic3Firebase blank -v3 $ cd ionic2Firebase
Check if it’s all working:
$ ionic serve
Next step will be adding firebase and angularfire2 and save it to our package.json bij adding –save.
$ npm install firebase angularfire2 --save
Start a build to see if there are no errors:
$ ionic run build
So now you can start developing you Ionic 3 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 { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
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: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{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.