AngularJS + Firebase = angularFire

In the previous few articles I explored AngularJS, how it works with a RESTful backend powered by node.js/express.js and MongoDB. During that research I stumbled across Firebase, a cloud-based service running on MongoDB that automatically synchronises data between clients and the server. The Firebase team has built a solid library called angularFire to wire it into AngularJS. Here’s what it can do.

If you haven’t already, sign up for a Firebase account. Once that’s done, we can throw together a basic application that reads and writes data.

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body ng-controller="BookCtrl">
    <h1>angularFire test</h1>
    <ul>
      <li ng-repeat="book in books">{{ book.author }}: {{ book.title }}</li>
    </ul>
    <form>
      <input
        type="text"
        ng-model="newBook.author"
        placeholder="Author"
        autofocus
      />
      <input type="text" ng-model="newBook.title" placeholder="Title" />
      <button ng-click="add()">Add</button>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/0.2.0/angularfire.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

app.js should have the following content:

var myapp = angular.module('myapp', ['firebase']);

myapp.controller('BookCtrl', [
  '$scope',
  'angularFire',
  function BookCtrl($scope, angularFire) {
    var url = 'https://<yourID>.firebaseio.com/';
    var promise = angularFire(url, $scope, 'books', []);
    $scope.newBook = {};

    promise.then(function () {
      startWatch($scope);
    });
  },
]);

function startWatch($scope) {
  $scope.add = function () {
    console.log($scope.newBook);
    $scope.books.push($scope.newBook);
    $scope.newBook = '';
  };
}

You’ll get a basic HTML form and a list. Start adding authors and titles, watch the list items grow, and keep an eye on the Firebase UI. You should see something similar.

That’s it. Data stored in the cloud via Firebase, manipulated with Angular.

Now for one more feature: angularFireAuth. It lets you authenticate against the Firebase backend via:

Facebook
Twitter
GitHub
Persona
Email & Password

Most examples out there cover Facebook integration, so I put together a version using traditional email and password verification. Two ways to add users for authentication:

Via the Firebase GUI. Click the “Auth” icon on the left, select the Email & Password tab. Make sure the “Enabled” checkbox is ticked. Below that, you can add users manually.
Via code. You still need to enable email and password authentication via the checkbox above. Here’s how to register users through angularFire.

Add this line to your index.html:

<script
  type="text/javascript"
  src="https://cdn.firebase.com/v0/firebase-simple-login.js"
></script>

Add this to a new JavaScript file:

var ref = new Firebase("https://<yourID>.firebaseio.com");
var authClient = new FirebaseSimpleLogin(ref, function(error, user) {
  if (error) {
    console.log(error);
    return;
  }
  if (user) {
    console.log(user + " is logged in.");
  } else {
    console.log("user is loged out.");
  }
}

To register a user, create a form on the frontend and handle the click event in your JavaScript:

var email = $('#email').val();
var password = $('#password').val();
authClient.createUser(email, password, function (error, user) {
  if (!error) {
    console.log('User Id: ' + user.id + ', Email: ' + user.email);
  } else {
    console.log(error);
  }
});

I’ll dig into angularFireAuth in more detail in a coming article.