Ionic + Firebase Seed App

This is a seed application to help you get started building apps with Ionic and Firebase. Using AngularFire, this app implements email & password authentication and adds messages to a synchronized array. The app is built using the Ionic CLI.

Getting Started

First, replace FBURL with the URL of your own Firebase on line 4 in /www/js/app.js. To run this app you need to install the Ionic CLI. Run the following commands to get started:

npm install -g ionic
git clone git@github.com:sararob/ionic-seed.git
cd ionic-seed/
ionic serve

To see a side by side iOS and Android view of your app in the browser, run ionic serve --lab instead of ionic serve. Details on ionic serve can be found in the Ionic docs.

Running your app

You can run this app in the browser using the command ionic serve, or use ionic serve --lab to run it in the browser with a side by side iOS and Android view.

To configure your app for iOS or Android and run it in the emulator, follow the instructions in our Ionic guide.

How it Works

Since Ionic is built on top of Angular, this seed application uses AngularFire.

Email & password authentication

This app makes use of Firebase's email & password authentication. To enable email & password auth, navigate to the "Login & Auth" tab in your Firebase app dashboard and select "Enable Email & Password Authentication".

Once it's enabled, you're ready to start creating and authenticating users in your app. You can create users with AngularFire's $createUser() method, passing it an email and password. Then you'll use $authWithPassword() to log users in, and $unauth() to log users out. This app also makes use of $onAuth to check the user's authentication state and set $scope.loggedInUser to the current user.

Firebase also supports authentication with Facebook, Twitter, GitHub, Google, anonymous auth, and custom authentication. Check out the docs on user authentication for details on these authentication methods.

Adding messages to a synchronized array

This app uses the $firebaseArray service to store message data in a synchronized array. Using $firebaseArray, our local Angular array is kept in sync with our remote Firebase data. To add items to $firebaseArray, use the $add() method. Check out the AngularFire documentation for more details on how this works.

Testing your app

Unit tests

Unit tests can be found in tests/Services/services.tests.js. To run them, navigate to the tests/ directory and run the command karma start. The tests check that both the Auth and Messages factories return $firebaseAuth and $firebaseArray respectively.

End-to-end tests

End-to-end tests can be found in e2e-tests/scenarios.js. To run them, navigate to the e2e/ directory and run the command protractor protractor.conf.js. The e2e tests check that the app loads correctly, logs users in, displays the messages list to logged in users, and adds a message to Firebase when the "Add" button is pressed.

Securing your app

This seed app has two basic security rules. The first ensures that only logged in users can add messages to the list:

".write": "auth != null"

The second rule ensures that new messages are not empty:

".validate": "newData.hasChild('text')"

.validate rules are run after .write rules succeed. You can see the full rules in therules.jsonfile. If you're using Firebase Hosting to deploy your application, you can deploy your security rules file to Firebase by adding arulesparameter to yourfirebase.json` file. Check out the hosting documentation for details on configuring this.

For more details on security rules, check out the security quickstart in our documentation.

Deploying your app

To publish your app in the iOS or Android app stores, follow the instructions in the Ionic documentation.

You can use Firebase Hosting to deploy your app on the web in three steps:

1. Install the Firebase command line tools

To install firebase-tools, run the command:

npm install -g firebase-tools

2. Initialize your app

cd into your app directory and run the command:

firebase init

Then you'll be prompted to enter the name of the Firebase app you'd like to deploy. After selecting your app, enter www/ as the current directory. This will tell Firebase Hosting to deploy your www/ directory (which is where your index.html file lives) every time you deploy your app. You only ever need to run this init command once.

3. Deploy your app

To deploy your app simply run:

firebase deploy

Your app will be deployed to YOUR-APP-NAME.firebaseapp.com. Custom domains are available for paid plans, and details on setting up custom domains can be found here.

File Structure