firebaseAuth with Angular: User Login

Question

I am using Angular (1.3.5) and Firebase to write a toy blog program, and am currently struggling with the user login part.

I first created an Angular module:

var blogApp = angular.module('blogApp', ['ngRoute', 'firebase', 'RegistrationController']);

Then on top of blogApp, I created a controller called ** RegistrationController **:

blogApp.controller('RegistrationController', function ($scope, $firebaseAuth, $location) {

        var ref = new Firebase('https://myAppName.firebaseio.com');
       // var authLogin = $firebaseAuth(ref);


        $scope.login = function(){

            ref.authWithPassword({
                email: $scope.user.email,
                password: $scope.user.password
            }, function(err, authData) {
                if (err) {
                    $scope.message = 'login error';
                } else {
                    $scope.message = 'login sucessful!';
                }
            });
        }; // login

  });  //RegistrationController

I attached the login() method to ng-submit in my user-login form in the scope of RegistratinController .

When I click to submit the login form, the form does not make any response, without any errors showing.

The login form works only when I click the 'Submit' button twice - why is this? confusing

Answer 1

You are using the Firebase JavaScript library and not AngularFire for the login methods.

You need to pass the Firebase reference into the $firebaseAuth binding.

var auth = $firebaseAuth(ref);

From there you can call auth.$authWithPassword .

    $scope.login = function(){

        auth.$authWithPassword({
            email: $scope.user.email,
            password: $scope.user.password
        }, function(err, authData) {
            if (err) {
                $scope.message = 'login error';
            } else {
                $scope.message = 'login successful!';
            }
        });
    }; // login

AngularFire is an Angular binding for the Firebase Library that handles auto syncing over objects and arrays. AngularFire also handles when to call $scope.apply to properly update the view.

In your case, the login code is working the first click, but it doesn't get applied to the page. You can wrap this code in a $timeout , but it would be better to use the $firebaseAuth service.

Answer 2

Thanks to user jacobawenger , for the solution he posted here:

Can't get new password authentication methods to work in AngularFire 0.9.0?

This works as expected:

myApp.controller('RegistrationController', 
    function($scope, $firebaseAuth, $location) {

    var ref = new Firebase('https://myApp.firebaseio.com');
    var simpleLogin = $firebaseAuth(ref);

    $scope.login = function() {
        simpleLogin.$authWithPassword({
            email: $scope.user.email,
            password: $scope.user.password
        }).then(function() {
            $location.path('/mypage');
        }, function(err) {
            $scope.message = err.toString();
        });
    } // login

}); // RegistrationController