JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl"> <a ng-click="logout()" ng-show="user">Logout</a>
 <a ng-click="loginUserOne()" ng-hide="user">Login User One</a>
 <a ng-click="loginUserTwo()" ng-hide="user">Login User Two</a>

    <br> <a ng-click="addDevice()" ng-show="user">Add Device</a>

    <ul>
        <li ng-repeat="device in devices">{{device}}</li>
    </ul>
</div>

JavaScript

angular.module('myApp', ['firebase'])
    .controller('myCtrl', ['$scope', 'angularFire', function ($scope, angularFire) {

    $scope.$on('angularFireAuth:login', function (e) {
        var ref = new Firebase('https://userswitch.firebaseio.com/users/' + $scope.user.id + '/registry/');
        $scope.devices = [];
        angularFire(ref, $scope, 'devices').then(function (unbind) {
            $scope.unbindDevices = unbind;
        });
    });

    $scope.$on('angularFireAuth:logout', function (e) {
        $scope.unbindDevices();
        $scope.devices = [];
    });

    $scope.addDevice = function () {
        $scope.devices.push({
            someAttr: "device for " + $scope.user.id
        });
    }

    $scope.loginUserOne = function () {
        $scope.user = {
            id: "user1"
        };
        $scope.$broadcast("angularFireAuth:login");
    }

    $scope.loginUserTwo = function () {
        $scope.user = {
            id: "user2"
        };
        $scope.$broadcast("angularFireAuth:login");
    }

    $scope.logout = function () {
        $scope.user = null;
        $scope.$broadcast("angularFireAuth:logout");
    }

}]);