0

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?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
EzeTeja
  • 1,125
  • 1
  • 13
  • 21
  • It is unclear what you are asking since the code to which you are referring is not included in the question. – georgeawg Aug 03 '17 at 12:30
  • I'm sorry, there is a link at the bottom, feel free to check it out. – EzeTeja Aug 03 '17 at 12:42
  • Use the promise after the code that creates the promise has been executed.. – georgeawg Aug 03 '17 at 16:34
  • Stackoverflow is not a code debugging service. When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be… **Minimal** – Use as little code as possible that still produces the same problem **in the question itself**. See [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – georgeawg Aug 03 '17 at 22:21

1 Answers1

1

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

Jed Nocum
  • 80
  • 11
  • This works... thanks! but... ``app.factory("userService", [function(){ var userService = this; userService.user = { displayName: 'Test!' } userService.setUser = function(data){ userService.user = data.user; }; userService.getUser = function(){ return userService.user; }; return userService; }]);`` When use the function to set the user data from Facebook to a property in the service... it doesn't reflects in the controller where the same property is linked with the controller property. – EzeTeja Aug 03 '17 at 14:00
  • 1
    I think this one might help you. [link](https://stackoverflow.com/questions/15380140/service-variable-not-updating-in-controller) – Jed Nocum Aug 04 '17 at 17:02