appToTakeOverTheWorld - firebase and angular: authentication and deployment (part 3)

So we have our app to take over the world and control our machines, which are really database entries.

The app is open source on github

So far we've done some initial setup in part 1

and made a controller and a service in part 2

Deployment

Now we're going to deploy what we have using Firebase's free hosting service

So let's get down with npm:

$ npm install -g firebase-tools

Cool. done. You're doing great. Now let's go through the excruciating deployment process:

$ firebase init
----------------------------------------------------
Your Firebase Apps connorleech@gmail.com
----------------------------------------------------
app2takeovertheworld
----------------------------------------------------
Enter the name of the Firebase app you would like to use for hosting
Firebase app: app2takeovertheworld
----------------------------------------------------
Site URL: https://app2takeovertheworld.firebaseapp.com
----------------------------------------------------
Enter the name of your app's public directory.
(usually where you store your index.html file)
Public Directory: (current directory) app
Initializing app into current directory...
Writing firebase.json settings file...
Successfully initialized app
To deploy: firebase deploy

Okay you miss it. Check the demo: app2takeovertheworld.firebaseapp.com

firebase init will create a firebase.json in your project root. We specify the firebase instance we're using as our database backend and we specify the app/ directory because that's where all of our files are. Then like the good people of the command line tell you: firebase deploy and if you're really lazy firebase open.

Our app is live in production without writing a single line of server code. Woohoo!

Authentication using twitter

In part 1 we registered a twitter app and put the credentials into firebase.

Okay now add a 'callback url' and enable the Login with twitter functionality so our settings look like:

There are some Firebase instructions here: https://www.firebase.com/docs/security/simple-login-twitter.html (note: these are for using the plain Firebase javascript library, not the angularFire library. There is a difference. Most of the methods are the same, except angularFire goes like: ref.$login() and returns a promise instead of the normal JS library which would be ref.login(). We're using angularFire)

Okay, settings out of the way. CODE!!

Create an Auth service:

app.service('Auth', ['$firebaseSimpleLogin', 'FIREBASE_URL', 
    function($firebaseSimpleLogin, FIREBASE_URL){

        var FBRef = new Firebase(FIREBASE_URL)
        var auth = null;

        return {
            init: function() {
                return auth = $firebaseSimpleLogin(FBRef);
            },
            loginWithTwitter: function(cb){
                auth.$login('twitter').then(function(user){
                    if (cb) cb(null, user)
                }, cb)
            },
            logout: function(){
                auth.$logout()
            }
        };

    }])

We're going to have auth attached to $rootScope that will monitor our login state in $rootScope.auth.user but we haven't done that yet. Check it, go to app.js, add this:

app.run(['Auth', '$rootScope', function(Auth, $rootScope){
  // establish authentication
  $rootScope.auth = Auth.init();
}])

So now when our page loads we create that auth variable on the $rootScope. If you show it on the page with: <pre>{{ auth | json }}</pre> You'll see it's an object with a user key that's set to null.

Okay let's make this magic happen. I create a navbar and a nav controller that will handle authentication.

Make the view:

<div class="header" ng-controller="NavCtrl">
  <ul class="nav nav-pills pull-right">
    <li><a ng-href="#">Home</a></li>
    <li><a ng-if='!auth.user' ng-click='login()'>Sign in with twitter</a></li>
    <li><a ng-if='auth.user' ng-click='logout()'>Logout</a></li>
  </ul>
  <h3 class="text-muted">appToTakeOverTheWorld</h3>
</div>

This will call methods from the NavCtrl (haven't built that yet) and also show and hide the buttons based on if the user is logged in. (When our app is first initialized and the Auth service is instantiated the auth.user property is null). (fun fact: ng-if hides elements from the DOM completely whereas ng-show and ng-hide erase them with some CSS)

Make index.html look like whoa:

<div class="container">
        <div ng-include="'views/nav.html'"></div>
        <div ng-view=""></div>
    </div>

and then finally our controller that will call the methods from the Auth service and tie all this together:

app.controller('NavCtrl', ['$scope', 'Auth', function ($scope, Auth) {

    $scope.login = function(){
        Auth.loginWithTwitter(function(err, user){
            if(err) return console.error(err.toString());

            console.log('Cool you logged in')
            console.log(user)
        })
    };

    $scope.logout = function(){
        Auth.logout()
    }
}])

Our take over the world app can now handle twitter login. woohoo.

The full source on github.

demo is here

If you have questions hit me up on twitter

Or check out the Firebase + Angular Google Group. The Firebase team does a stellar job of monitoring that and answering questions.