> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/ionic-taxi-booking-app-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd.gitbook.io/ionic-taxi-booking-app-starter/extra/firebase-setup.md).

# Firebase Setup (Ionic 4 Version)

{% hint style="warning" %}
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.
{% endhint %}

## Authentication Using Firebase

{% hint style="info" %}
Learn more about Firebase Auth, Hosting and DB functionalities in our [detailed tutorial here](https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58)
{% endhint %}

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.‌

![](/files/-LqL0I17zeyaMB_aZ12P)

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.‌

![](/files/-LqL0LdZliCfEk2tWt0R)

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

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

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LdmV17nYtICLrl3bl_d%2F-LdmqJ1V22mWFflV3fyO%2F-LdmtzkeoufmTmXWcbZO%2FeditENVScreenshot.png?alt=media\&token=dee18daa-5f3f-4ede-82f0-0fd6933be7c7)

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](https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25)
* [Google Login in Ionic 4](https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39)
* [Twitter Login in Ionic 4](https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24)
* [Anonymous Login in Ionic 4](https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37)
* [Simple Email Login in Ionic 4](https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38)

## Building a CRUD With Firebase & AngularFire <a href="#building-a-crud-with-firebase-and-angularfire" id="building-a-crud-with-firebase-and-angularfire"></a>

​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()
```

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LdmV17nYtICLrl3bl_d%2F-LdsrdG5mbRZjJCcVS6G%2F-LdstTwV8P4bF8Anms1E%2Fjorge-songs.png?alt=media\&token=dcebd4a6-8cb1-4d71-b987-e5b499a1d0b1)