Ionic 5 - Grocery Shopping App Platform with Admin
  • Ionic 5 Grocery Platform with Dashboard
  • Why use this Starter
  • Admin Panel Features
  • SETUP AND DEPLOYMENT
    • Initial Dev Environment Setup
    • Running the App (Web Browser)
  • How to use this Starter
    • Grocery Dashboard And App Complete Setup
    • Grocery Dashboard App - Setup
      • Grocery Dashboard Testing
    • Grocery App - Setup
      • Grocery App Testing
    • Testing Integration of Grocery Dashboard and App
  • Extra
    • Understanding the Database
    • App Specific Requirements
    • Add More Features
    • FAQs
  • FIREBASE SETUP
    • New Firebase Project Setup
    • Firebase Integration
    • Hosting on Firebase
Powered by GitBook
On this page
  • 1. Editing environment files in project
  • 2. Creating database in Firebase
  • 3. Enable Sign In Provider
  • 4. Add user
  • Testing Grocery Dashboard App Login

Was this helpful?

  1. FIREBASE SETUP

Firebase Integration

This page describes the steps to integrate a new Firebase project for the Grocery Dashboard App.

PreviousNew Firebase Project SetupNextHosting on Firebase

Last updated 5 years ago

Was this helpful?

It has the following steps:

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.

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 )

2. Creating database in Firebase

2.2 You should see the following screen where your app will be added to firebase.

2.3 Click on Database shown under the "Develop" section.It should show you the following screen and click on “Create database”

2.4 Select “Start in test mode” and click “Next” as shown below.

2.5. Click on “Done”. It should show you the following screen.

3. Enable Sign In Provider

3.1 Click on “Authentication” shown under the "Develop" section. It should show you the following screen.

3.2 Click on "Sign in method". It should show you the following screen.

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

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.

4.2 Click on Add user. It should show you the following screen.

4.3 Add Email and Password of the user you want to add and click on Add user as shown below.

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.

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.

2.1 The image shown below is the same screen we saw after competing all the steps of section in firebase console. Click on “Continue to console” button.

Go to section to see how to do it.

New Firebase Project Setup
Grocery Dashboard Testing
Editing environment files in project
Creating database in Firebase
Enable Sign In Provider
Add User