CODEWITHSUNDEEP
javascriptangularjsfirebasefirebase-authenticationangular-promise
EzeTeja
EzeTeja

Reputation: 1305

Firebase Auth Service in Angular -- data not available to all the controllers

I'm trying to make an Angular (1.6) service to handle all the authentication with Firebase.

What am I intended to do?

I want to have a button in my navbar (navbar.html line 23) which opens a modal (loginRegister.tpl.html) and in that modal have all the different ways to authenticate to the app (I want to start with facebook). Once it has the user's information from Facebook (Auth.js line 21) I want to use the Auth service to make the information available to all the controllers, but it seems that after I assign the information to a service property, it doesn't reflect in other places where the service's property is refered (main.js line 14)

Even if I close the modal with the user's information as parameter (loginRegister.tpl.js line 6) I cannot assign it to the service's property on navbar.js line 20.

Could you assist me with this issue?

    Auth.facebookSignIn = function(){
        return authObj.$signInWithPopup("facebook")
        .then(function(data){
            Auth.user = data.user;
        })
        .catch(function(error){
            var errorCode = error.code;
            var errorMessage = error.message;
            var email = error.email;
            var credential = error.credential;
            return error;
        });
    }

plnkr

UPDATE

where should I implement the if(!Auth.userPromise){ ? because I tried adding it in loginRegister.tpl.js and it actually doesn't see the userPromise property in the service.

loginRegister.tpl.js

$ctrl.loginFacebook = function () {
    if(!Auth.userPromise) { 
        console.log("No Auth promise"); 
    } else { 
        Auth.userPromise.then(function(user){
            console.log(user);
    });
 }

UPDATE #2

I tried it but it doesn't work, I mean... It consoles the user, but I already could do that. My problem is that, for example, I reference in navbar.js (line 6) "Auth.user", and it doesn't mather what I do, I cannot update the reference and make it appear in navbar.html (line 21) I what I want to point out there is that I cannot find a way that once the user is logged in, it gets automatically reflected everywhere the Auth service is injected. Is my question clearer?

Upvotes: 0

Views: 133

Answers (1)

Jed Nocum
Jed Nocum

Reputation: 80

I think what you can do is use the result in loginRegister.js after using the Auth service (facebook login), then the getUser and setUser put it in a new service like userService and set the data in there after successful authentication. Now you can use the userService (with the users data) anywhere.

loginRegister.js

$ctrl.loginFacebook = function () {
       Auth.facebookSignIn()
        .then(function(data){
           userService.setUser(data.user); //set user
          console.log(userService.getUser()); //check if it was set properly.
          })
        .catch(function(error){
            var errorCode = error.code;
            var errorMessage = error.message;
            var email = error.email;
            var credential = error.credential;
        });
    };

plunkr

Upvotes: 1

Related Questions