# Firebase

## Authentication Using Firebase

This starter provides you with Login, Signup and Reset Password functionality using Firebase Authentication. 

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.

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubDI0IWpooFnYB83lf%2F-LubEAmtO1myztXhDyoh%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LaEjiQVp-C8c0r1dybd_-LaElvVc5Aa7KHPX7sxK_Screen%20Shot%202019-03-18%20at%201.19.36%20PM.png?alt=media\&token=15e5ece9-b546-4c66-b9f9-0334ca91b1ce)

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.

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubDI0IWpooFnYB83lf%2F-LubE4fkwxcOb_KaMDvf%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LaEjiQVp-C8c0r1dybd_-LaEmK7O-MJVucteYXlk_Screen%20Shot%202019-03-18%20at%201.21.15%20PM.png?alt=media\&token=fce292db-aa91-485b-8ccb-80e16dd2009c)

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

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

{% hint style="info" %}
Make sure to have the `config` in the `environment.prod.ts` when you create a production build
{% endhint %}

## Code Structure

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubDI0IWpooFnYB83lf%2F-LubDySrmiUkiZxg9ZUY%2FScreen%20Shot%202019-11-26%20at%203.51.59%20PM.png?alt=media\&token=e6963d22-28ec-4ad8-bcda-edd7fe9a5601)

The `src/app/pages/firebase` folder contains the code related to 

* Login - Email login
* Signup - Email signup
* Image Upload
* CRUD data functions - `firebase-home`

These files use service data and functions provided in `src/app/services/firestore` 

* `filestorage.service.ts` - For storage purpose
* `firebase-authentication.service.ts` - For Authentication functions
* `firestore.services.ts` - For CRUD functions

{% hint style="info" %}
When you are using the app Sidemenu, the **Login** option actually performs a **Logout** actions to take you to the Login page.
{% endhint %}

Following articles from our knowledge base can assist you with Firebase features

{% embed url="<https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23>" %}

{% embed url="<https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38>" %}

{% embed url="<https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58>" %}