Firebase Setup (Ionic 4 Version)

Use Firebase authentication, upload, storage, CRUD functionalities

This section is for the Ionic 4 version of this platform, where Firebase Functions were used to make the apps talk to each other. Ionic 5 version does not use Firebase Functions.

Authentication Using Firebase

Learn more about Firebase Auth, Hosting and DB functionalities in our detailed tutorial here

This starter provides you with Login, Signup and Reset Password functionality using Firebase Authentication. Along with this, there is a booking functionality connecting all 3 apps together, that is explained in other sections.‌

You can test the authentication in the already provided app code.‌

When you want to attach the authentication process to your own Firebase project, simply get the config parameters from Firebase console.‌

Once you have the config parameters, paste them in the environment files in the starter code. There are two environment files, one for dev and one for prod app.‌

This configuration can be imported in app.module.ts and main.ts by importing the environment

import { environment } from 'src/environments/environment';

Make sure to have the config in the environment.prod.ts when you create a production build‌.

You can create several different types of Login with Firebase. Read more details about each of them in our tutorials

• Facebook Login in Ionic 4
• Google Login in Ionic 4
• Twitter Login in Ionic 4
• Anonymous Login in Ionic 4
• Simple Email Login in Ionic 4

Building a CRUD With Firebase & AngularFire

​You can open your app.module.ts and import everything we'll be using, this is the only time you'll see this file

import { AngularFireModule } from 'angularfire2';import { AngularFireDatabaseModule } from 'angularfire2/database';
imports: [    
    AngularFireModule.initializeApp(firebaseConfig),    
    AngularFireDatabaseModle  
],‌

AngularFireModule and AngularFireDatabaseModle are both responsible for crud operation in Firebase​

Code sample for read data flow from Firebase

this.afs.collection('completedRides').valueChanges().subscribe(res => {
        this.rides = res;
 });

Code sample for Write data flow from Firebase

this.db.collection('customers')
          .doc(uid)
          .set({
            name: `${user['first_name']} ${user['last_name']}`,
            email: user['email'],
            phone: `${user['area']}-${user['phone']}`
          });

Code sample for Update data flow from Firebase

this.db.collection('drivers').doc(uid).update({
        available: status
  });

Code sample for Delete data flow from Firebase

this.db.collection('drivers').doc(uid).delete()