ctx.isAuthenticated() is false inside onAuthentication

Hi,

Thanks for putting vue-msal together. It is generally working for me. However I noticed that the isAuthenticated() value is false within the onAuthentication handler:

onAuthentication: (ctx, error, response) => {
  console.log({ ctx, error, response });
  console.log(">>> isAuthenticated = " + ctx.isAuthenticated());
}

With this code I can see there is no error, but isAuthenticated is still false. If I peak at the the response I can see a valid response.

The next strange thing about all of this is if I call ctx.acquireToken() within onAuthentication, the returned promise of acquireToken is simply never resolved:

onAuthentication: (ctx, error, response) =>
{
  console.log({ ctx, error, response });
  console.log(">>> isAuthenticated = " + ctx.isAuthenticated());

  // Nothing is printed beyond this point, even though acquireToken yields a valid promise...
  ctx.acquireToken().then(
    () => {
      console.log(">>> success");
    },
    () => {
      console.log(">>> error");
    },
    () => {
      console.log(">>> rejected");
    });
}

So using vue-msal, what would be an appropriate technique to get the auth token immediately after a successful authentication? I am trying to make my code reactive based on that state. If I wait to call acquireToken, for example, from a click event, everything works. But I need to get the token ASAP.

Thanks!

[Agendum]

You mentioned:

you should use the data object provided by the plugin.

But I have noticed vue-msal’s login state / data.accessToken is not automatically renewed when the token’s exp elapses. Creating a timer to renew the access token at exp-minus-tokenRenewalOffsetSeconds time is trivial, but me manually updating data.accessToken also doesn’t update any other vue-msal’s data properties. For my scenario, this is actually okay, but I am not sure this is a good pattern and the inconsistent state makes me uncomfortable. What is your opinion on the matter?

[Agendum]

Thanks this does make a lot of sense. I didn’t trust that msal.accessToken was reactive and it sure is. I now don’t need to custom watch anything at all, actually. Once I wired up vue-msal using globalMixin, everything just worked in all of my components without any extra business logic. Well, the only thing I had to do with toggle the config ‘requireAuthOnInitialize’ based on window.location.pathname for my signedout route because it doesn’t seem the vue router is ready yet. But other than that, it made this whole auth story so painless. I even ended up dropping the group checking and went with checking for app roles instead, so no graph calls needed even.

Great job on vue-msal!