LennyZ71
LennyZ71

Reputation: 571

Authenticating Firebase with Angular.js and $.authwithPassword()

I'm attempting the following code. I'm able to authenticate a user by email/password when clicking "login", and get an object returned; but I don't understand what I'm missing to return the data that I'm trying to get from "items" and "alseCards". If I set the read and write to "true" they return data fine, just want to authenticate those with any user who is logged in. I feel it's Security/Rule setting, but just getting started with Firebase and struggling.

index.html

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js"></script>
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

<body ng-controller="controller">
    <div>
        <button ng-click="login()">Login</button>

        <p ng-if="authData">Logged in user: <strong>{{ authData.uid }}</strong>
        </p>
        <p ng-if="error">Error: <strong>{{ error }}</strong>
        </p>
    </div>
     <h1>Items</h1>
    <ul id="items">
        <li ng-repeat="item in items">
             <h2>{{item.$id}}</h2>
            <ul id="inspections">
                <li ng-repeat="inspection in item.inspections">{{inspection.description}} on {{inspection.timeStamp}} by {{inspection.inspector}}</li>
            </ul>
        </li>
    </ul>
    <script>

    </script>
    <script>
        var app = angular.module("app", ["firebase"]);
        app.controller("controller", ["$scope", "$firebaseArray", "$firebaseAuth",
                function($scope, $firebaseArrary, $firebaseAuth) {
                    var ref = new Firebase("https://<-testing->.firebaseio.com");
                    var auth = $firebaseAuth(ref);

                    $scope.login = function() {
                        $scope.authData = null;
                        $scope.error = null;

                        auth.$authWithPassword({
                                email: "[email protected]",
                                password: "alseTest"
                            }).then(function(authData) {
                                console.log(authData)
                                $scope.authData = authData;
                            }).
                        catch (function(error) {
                            $scope.error = error;
                        });
                    };



                    $scope.alseCards = $firebaseArrary(ref.child("alseCards"));
                    $scope.items = $firebaseArrary(ref.child("items"));
                }
            ]);
    </script>
</body>

Security and Rules.json

 {
  "rules": {
    "users": {"$user_id": {".write": "$user_id === auth.uid", ".read": "$user_id === auth.uid"}},
    "items": {".write": "auth !== null && auth.provider === 'password'", ".read": "auth !== null && auth.provider === 'password'"},
    "alseCards": {".write": "auth !== null && auth.provider === 'password'", ".read": "auth !== null && auth.provider === 'password'"}
  }
}

Thanks ahead of time.

Upvotes: 0

Views: 151

Answers (1)

Andr&#233; Kool
Andr&#233; Kool

Reputation: 4978

I think the problem is you have the code to get your items and alseCards outside the login function. This means it gets executed when the controller is first called and at that time the user hasn't logged in yet. Try to put it inside the login function like this:

$scope.login = function() {
  $scope.authData = null;
  $scope.error = null;

  auth.$authWithPassword({
    email: "[email protected]",
    password: "alseTest"
  }).then(function(authData) {
    console.log(authData)
    $scope.authData = authData;
    $scope.alseCards = $firebaseArrary(ref.child("alseCards"));
    $scope.items = $firebaseArrary(ref.child("items"));
  }).
  catch(function(error) {
    $scope.error = error;
  });
};

Upvotes: 1

Related Questions