Ionic 3 Firebase Starter

Ionic 3 Firebase Starter

Starter to get you up and running quickly with Firebase and Ionic




Member since 2015


iOS, Android  
4 years ago
4 years ago

Ionic 3 Firebase Starter

Get up and running quickly with Ionic and Firebase.


  1. Ionic 3.0.1.
  2. Angular 4.0.0.
  3. Firebase 3.
  4. Firebase Email/Password Authentication.
  5. Boilerplate code to help you work with Firebase objects/lists and images.
  6. Uses the base Ionic styling allowing you to easily add your own styles over the top.
  7. Where relevant Promises and Observables are used. This allows you to easily respond to interaction with the app/Firebase.
  8. Includes the Ionic native camera plugin for working with images.

Email/Password Auth

Firebase Email/Password authentication.

  1. Register with email/password.
  2. Login with email/password.
  3. Forgot password.
  4. Logout.
  5. Error messaging and form validation.

Firebase Objects

Boilerplate for working with firebase objects.

  1. Set an object with examples of three native Firebase types... string, number and boolean.
  2. Listen to object changes from Firebase and change your view as and when the changes take place.

Firebase Lists

Boilerplate for working with Firebase lists.

  1. Add and remove from a list.
  2. Listen to changes in a list and change your view accordingly.

Firebase Images

Boilerplate for working with Firebase images.

  1. Upload an image to firebase.
  2. Download and view an image.
  3. Uses the Ionic native camera plugin which lets you take a photo or choose a photo from your library to upload.

Getting Started


  1. Download and unzip this project.
  2. In terminal navigate into the projects root folder and install the required packages by entering the following:

npm install

Firebase Project

To use this starter you will first need to create a project in Firebase and then connect this with the app.

  1. To use this app with Firebase you will need a google account with access to Firebase.
  2. In Firebase navigate to your console and select "create new project".
  3. Select your new project in Firebase and from the "Overview" screen select "Add Firebase to your web app".
  4. Copy the config object and in the starter project paste it into the "firebaseConfig" object found in the file app.module.ts.

Firebase Authentication

To allow users to sign up through your app with an email and password you first need to enable this in Firebase.

  1. Navigate to your project in Firebase.
  2. From the side menu navigate to the "Authentication" screen.
  3. In the "Authentication" screen select "Sign-In Method" from the tabs at the top.
  4. Edit Email/Password so that it is enabled.



Open terminal, navigate to the project's root folder and enter the following:

ionic serve


Open terminal, navigate to the project's root folder and enter the following:

ionic platform add ios

Once this is done you can now emulate your project in a simulator by typing the following:

ionic emulate ios

For more information about deploying your app to a device take a look at the official Ionic docs.