title: MSAL.js acquireTokenSilent resulting null token
body: <p>I'm working with an existing Single Page Application that we recently moved from an On-Prim auth provider to Azure Active Directory and MSAL.js We're using the WindowsAzureActiveDirectoryBearerAuthenticationMiddleware on the backend to secure the WebAPI endpoints.</p>
  
  <p>The API is secure, users can login and everything works. The problem start at around the time the token expires at the one hour mark. The tokenSilent method returns a token with a null accessToken. </p>
  
  <p>I found this issue on Guthub.</p>
  
  <p><a href="https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/736" rel="nofollow noreferrer">https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/736</a></p>
  
  <p>The short and dirty here, token requests that are single scoped to the application will only return refreshed id_token but not a refreshed accessToken. The solution is to add an additional scope. If I do it throws an error that says <strong>Client ID can only be provided as a single scope</strong></p>
  
  <p>Any help would be appreicated</p>
  
  <pre><code>var clientApplication;
  
  // Enter Global Config Values &amp; Instantiate MSAL Client application
  window.msalConfig = {
      auth: {
              clientId: 'obfuscated'
              , authority: "https://login.microsoftonline.com/common"
              , validateAuthority: true
              , redirectUri: window.location.protocol + "//" + window.location.host + "/msal.html" //http://localhost:58541/msal.html
              }
      , cache: {
              cacheLocation: "localStorage"
              }
      , graphScope: {
              scopes: ["https://graph.microsoft.com/User.Read", "https://graph.microsoft.com/Mail.Send" ]
              }
      , appScope: {
              scopes: ["obfuscated"]
              }
  };
  
  axios.interceptors.request.use(async function (options) {
  
      var scope = window.msalConfig.appScope;     //based on where the request is going, will need to decide what token to get.
      var tokenType = "AuthToken";                //this probably ins't needed after rewriting all existing jquery.ajax hooks
      if (options.url.includes("microsoft")) {
          scope = window.msalConfig.graphScope;
          tokenType = "GraphToken";               //this probably ins't needed after rewriting all existing jquery.ajax hooks
      }
  
      self.Loading({ State: true, Title: "Working on it..." });
  
      options.headers['Authorization'] = "Bearer " + await tokenSilent(tokenType, scope);
  
      return options;
  }, function (error) {
      console.log('Axios Request Error: ', error);
      return promise.reject(error);
  });
  
  
            async function tokenSilent(tokenType, scope) {
              console.log('Axios Request VERBOS: main.js.tokenSilent');
              return await clientApplication.acquireTokenSilent(scope)
                  .then(async function (token) {
                      Cookies.set(tokenType, token.accessToken); // "Bearer " +
                      self.LoginID(token.account.userName);
                      return token.accessToken;
                  }, async function (error) {
                      return await tokenPopup(scope);
                      console.log(error);
                  });
          };
  
          async function tokenPopup(tokenType, scope) {
              console.log('Axios Request VERBOS: main.js.tokenPopup');
              return await clientApplication.acquireTokenPopup(scope)
                  .then(async function (token) {
                      Cookies.set(tokenType, token.accessToken); //"Bearer " +
                      self.LoginID(token.account.userName);
                      return token.accessToken;
                  }, async function (error) {
                      return await loginPopup(scope);
                      console.log(error);
                  });
          };
  
          async function loginPopup(tokenType, scope) {
              console.log('Axios Request VERBOS: main.js.loginPopup');
              window.location.hash = "/auth";
          };
  </code></pre>
  
  <p>Is there a way to extend the tokenlifecycle of my enterprise application, or is my code wrong and it's not getting the refreshed token? </p>