How do I update loggedInUser after onlogin in Mozilla Persona

Question

I'm using Mozilla Persona on a project. I would like to update loggedInUser after onlogin. But loggedInUser is an attribute of an object passed to navigator.id.watch(). navigator.id.watch() was called once (in a AngularJS service). Should I call it again, passing the full object? It doesn't seem right. Am I wrong? =P

Here is my service:

app.factory('persona', function ($rootScope, $http) {
navigator.id.watch({
    loggedInUser: null,
    onlogin: function onlogin(assertion) {
        console.log(this);
        $http.post('/signIn', { assertion: assertion })
            .then(function (data, status, headers, config) {
                $rootScope.$broadcast('signIn', data.data);
            }, function (data, status, headers, config) {
                $rootScope.$broadcast('signInError', data.data);
            });
    },
    onlogout: function onlogout(param) {
        $http.get('/signOut')
            .then(function (data, status, headers, config) {
                $rootScope.$broadcast('signOut', data.data);
            }, function (data, status, headers, config) {
                $rootScope.$broadcast('signOutError', data.data);
            });
    }
});

return {
    signIn: function signIn() {
        navigator.id.request();
    },
    signOut: function signOut() {
        navigator.id.logout();
    }
};
});

Answer 1

Can't you just make loggedInUser become global or at least "locally global" below the same scope as your navigator.id.watch method, just like the MDN example?

After that you can get the JSON response from the Persona service, which contains some data, including the e-mail. So you could pass that data on your AJAX response and fill the loggedInUser variable

https://developer.mozilla.org/en-US/docs/Persona/Quick_Setup#Step_3.3A_Watch_for_login_and_logout_actions

var currentUser = 'bob@example.com';

navigator.id.watch({
  loggedInUser: currentUser,
  onlogin: function(assertion) {
    $.ajax({ 
      type: 'POST',
      url: '/auth/login', // This is a URL on your website.
      data: {assertion: assertion},
      success: function(res, status, xhr) { window.location.reload(); },
      error: function(xhr, status, err) {
        navigator.id.logout();
        alert("Login failure: " + err);
      }
    });
  },
  onlogout: function() {
    $.ajax({
      type: 'POST',
      url: '/auth/logout', // This is a URL on your website.
      success: function(res, status, xhr) { window.location.reload(); },
      error: function(xhr, status, err) { alert("Logout failure: " + err); }
    });
  }
});

JSON response sample from MDN:

{
  "status": "okay",
  "email": "bob@eyedee.me",
  "audience": "https://example.com:443",
  "expires": 1308859352261,
  "issuer": "eyedee.me"
}

Answer 2

At the navigator.id.watch call, set loggedInUser: localStorage.getItem('persona') || null (the null is important), then, when Persona login is successful, do localStorage.setItem('persona', theUserEmail), when it is failed, do localStorage.removeItem('persona').