# Firebase Integration It has the following steps: 1. [**Editing environment files in project**](https://app.gitbook.com/@enappd/s/ionic-4-grocery-shopping-app-platform/~/drafts/-M5LWsCICWcHUVGOtxeg/firebase-setup/firebase-integration-into-user-app#1-editing-environment-files-in-project) 2. [**Creating database in Firebase**](https://app.gitbook.com/@enappd/s/ionic-4-grocery-shopping-app-platform/~/drafts/-M5LWsCICWcHUVGOtxeg/firebase-setup/firebase-integration-into-user-app#2-creating-database-in-firebase) 3. [**Enable Sign In Provider**](https://app.gitbook.com/@enappd/s/ionic-4-grocery-shopping-app-platform/~/drafts/-M5LWsCICWcHUVGOtxeg/firebase-setup/firebase-integration-into-user-app#3-enable-sign-in-provider) 4. [**Add User**](#4-add-user) ### 1. Editing environment files in project 1.1 Open the project in your code editor and navigate as follows:- Src -> Environments -> “environments.ts” 1.2 The code to be replaced is shown and highlighted below. Replace the highlighted code below with the code you copied to text editor from firebase in previous step. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M0-2_SBiC6MrGBKAU%2FScreenshot%202020-04-20%20at%203.25.22%20PM.png?alt=media\&token=cadf63ad-cbd7-49b3-a3c2-55afb1738952) 1.3. Now open “environments.prod.ts” file from “Environments” folder. 1.4. The code to be replaced is shown and highlighted below. Replace the highlighted code below with the code you copied to text editor from firebase in previous step. ( Same step as above ) ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M0AQvZxrEf8M2kVwH%2FScreenshot%202020-04-20%20at%203.26.05%20PM.png?alt=media\&token=822697f4-b7d1-4536-9794-b039b169eb81) ### 2. Creating database in Firebase 2.1 The image shown below is the same screen we saw after competing all the steps of [New Firebase Project Setup](https://enappd.gitbook.io/ionic-grocery-shopping-app-platform/firebase-setup/new-firebase-project-setup) section in firebase console. Click on “Continue to console” button. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M3rzp_tX-qdpmogH8%2Fimage.png?alt=media\&token=4a99c16d-396e-461c-bbe1-cad61e46b7b5) 2.2 You should see the following screen where your app will be added to firebase. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M4QmJ2ItV484yL-M_%2FScreenshot%202020-04-20%20at%203.44.18%20PM.png?alt=media\&token=ac429d33-daa0-4cbe-b86d-fc67ed933927) \ 2.3 Click on **Database** shown under the "Develop" section.It should show you the following screen and click on “Create database” ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M4ipmjL4wusLXDA_j%2Fimage.png?alt=media\&token=3d1ef04a-c45c-490b-b79d-4412e0b67447) 2.4 Select “Start in test mode” and click “Next” as shown below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M4s3v6GVw3itxx_v5%2Fimage.png?alt=media\&token=2d23ff9f-47ce-48e8-b6fa-d83320a6589f) 2.5. Click on “Done”. It should show you the following screen. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M4xZEf7vkboU5pE1t%2Fimage.png?alt=media\&token=de09c165-a953-45b5-8e35-06068a31fa31) ### 3. Enable Sign In Provider 3.1 Click on “Authentication” shown under the "Develop" section. It should show you the following screen. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5MC7IhPOEIEQZ_NmSU%2F-M5MDC1EeO6VvNEvHEfI%2Fimage.png?alt=media\&token=7aa33d5f-b14f-49ac-9bb9-78336536fe9c) 3.2 Click on "Sign in method". It should show you the following screen. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5MC7IhPOEIEQZ_NmSU%2F-M5MDJLy122yqD2Pin7i%2Fimage.png?alt=media\&token=6d7e9f33-1111-44f8-b9cd-25ac3d60eb89) 3.3 Select the "Email/Password" at the top of this list of "Provider" (which is disabled currently). It should show you the following screen. "Enable" the first option and make sure that second one is "diasbled" and click “Save”. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5MC7IhPOEIEQZ_NmSU%2F-M5MDSs7Gi4bj0RHJNMv%2Fimage.png?alt=media\&token=7a83e83d-4134-4604-9bd7-8fc217a5a878) ### 4. Add user 4.1 Click on **Users** shown under the **Authentication** section. It should show you the following screen where no user is present currently. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5MF2Qa0kdCEvsB5m4w%2F-M5MFeVamgGjm3Q9zpcu%2FScreenshot%202020-04-19%20at%209.07.41%20PM.png?alt=media\&token=6c75ce10-7d80-4e6f-97ea-9429877a145a) 4.2 Click on **Add** **user**. It should show you the following screen. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5MF2Qa0kdCEvsB5m4w%2F-M5MFxG8hcVVrFDZsVcx%2FScreenshot%202020-04-19%20at%209.08.41%20PM.png?alt=media\&token=df665039-da67-4c5d-be18-958d1f662e02) 4.3 Add **Email** and **Password** of the user you want to add and click on **Add** **user a**s shown below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5MF2Qa0kdCEvsB5m4w%2F-M5MGNd_7BqN-VfBkgmq%2FScreenshot%202020-04-19%20at%209.09.09%20PM.png?alt=media\&token=899d5f41-3bc5-4afe-8e1f-7f5668ed6b61) 4.4 The user you added should appear in **Users** section, with the email id you provided as the **Identifier** field. It is shown in the following screen. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5MF2Qa0kdCEvsB5m4w%2F-M5MGqkYkhEulqY47n5A%2FScreenshot%202020-04-19%20at%209.12.54%20PM.png?alt=media\&token=14119b81-bbdd-495b-a848-e415dafd0935) ### Testing Grocery Dashboard App Login Now we have successfully created a new user for our Grocery App. Let us go back to the browser where we can test our Dashboard app for Login. Go to [Grocery Dashboard Testing](https://enappd.gitbook.io/ionic-grocery-shopping-app-platform/how-to-use-this-starter-1/grocery-dashboard-app-setup/testing-dashboard-after-firebase) section to see how to do it. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://enappd.gitbook.io/ionic-grocery-shopping-app-platform/firebase-setup/firebase-integration-in-grocery-dashboard-app.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.