title: Unable to acquire token silently or via redirect using msal-browser
body: <p>I'm trying to develop a VueJS single page application that logs you into AAD so that I can get an access token to call various APIs (e.g. Graph).</p>
  <p>Once a user is logged in, you have to acquire a token and there are two ways of doing this: silently (and if this fails, using the redirect experience).</p>
  <p>However, I am unable to acquire a token using both approaches:</p>
  <pre class="lang-js prettyprint-override"><code>export default class AuthService {
    constructor() {
      console.log('[AuthService.constructor] started constructor');
  
      this.app = new Msal.PublicClientApplication(msalConfig);
      this.signInType = 'loginRedirect';
    }
  
    init = async () =&gt; {
      console.log('[AuthService.init] started init');
  
      await this.app.handleRedirectPromise().catch(error =&gt; {
        console.log(error);
      });
  
  
      try {
  
        let signedInUser = this.app.getAllAccounts()[0];
  
        //  if no accounts, perform signin
        if (signedInUser === undefined) {
          alert(this.app.getAllAccounts().length == 0)
          await this.signIn();
          signedInUser = this.app.getAllAccounts()[0];
          console.log(&quot;user has been forced to sign in&quot;)
        }
  
        console.log(&quot;Signed in user is: &quot;, signedInUser);
  
        // Acquire Graph token
        try {
          var graphToken = await this.app.acquireTokenSilent(authScopes.graphApi);
          console.log(&quot;(Silent) Graph token is &quot;, graphToken);
          alert(graphToken);
        } catch (error) {
          alert(&quot;Error when using silent: &quot; + error)
          try {
            var graphToken = await this.app.acquireTokenRedirect(authScopes.graphApi);
          } catch (error) {
            alert (&quot;Error when using redirect is: &quot; +  error)
          }
  
          alert(&quot;(Redirect) Graph token is &quot; + graphToken);
        }
  
      } catch (error) {
        console.log('[AuthService.init] handleRedirectPromise error', error);
      }
    }
  
    signIn = async () =&gt; {
      console.log('[AuthService.signIn] signInType:', this.signInType);
      this.app.loginRedirect(&quot;user.read&quot;, &quot;https://xxx.azurewebsites.net/user_impersonation&quot;);
    }
  
    signOut = () =&gt; {
      this.app.logout();
    }
  }
  </code></pre>
  <p>Once I load the SPA, I get redirected to the AAD login page.</p>
  <p>And then I get the following alert prompts:</p>
  <blockquote>
  <p>Error when using silent: ClientAuthError: no_account_in_silent_request: Please pass an account object, silent flow is not supported without account information</p>
  </blockquote>
  <blockquote>
  <p>Error when using redirect is: BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.</p>
  </blockquote>
  <blockquote>
  <p>(Redirect) Graph token is undefined</p>
  </blockquote>
  <p>Even though I'm signed in, why does <code>acquireTokenSilent</code> think I'm not signed in?</p>
  <p>And what does <code>BrowserAuthError: interaction_in_progress</code> mean? I searched this online and the only result I found was because someone was using an outdated version of msal-browser. In my case, I'm using the latest and greatest (v2.0.1).</p>
  <hr />
  <p><strong>Update 1:</strong></p>
  <p>I've fixed my silent token acquisition by using the following code excerpt:</p>
  <pre class="lang-js prettyprint-override"><code>const silentRequest = {
    account: signedInUser,
    scopes: authScopes.graphApi.scopes1
  }
  var graphToken = await this.app.acquireTokenSilent(silentRequest);
  </code></pre>
  <p>Looks like I was passing my scopes in the wrong format (i.e. supposed to pass an array and it wasn't actually an array!)</p>
  <p>There is however a discrepancy in the Microsoft documentation for how to use <code>acquireTokenSilent</code></p>
  <p>Over <a href="https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/acquire-token.md" rel="noreferrer">here</a>, we're told to just pass in a set of scopes to the <code>acquireTokenSilent</code> method. However, <a href="https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#silentflowrequest" rel="noreferrer">over here</a>, we're told to also pass in the accountInfo alongside the scopes.</p>
  <p>Let's see if I can get <code>acquireTokenRedirect</code> working now...</p>
  <hr />
  <p><strong>Update 2:</strong>
  After much trial and error, I finally got <code>acquireTokenRedirect</code> working.</p>
  <pre><code>import * as Msal from '@azure/msal-browser';
  
  const msalConfig = {
    auth: {
      clientId:    &quot;XYZ&quot;,
      authority:   &quot;ABC&quot;,
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: true
    }
  };
  
  export default class AuthenticationService {
  
    constructor() {
  
      this.app = new Msal.PublicClientApplication(msalConfig)
    }
  
    init = async () =&gt; {
  
      try {
        let tokenResponse = await this.app.handleRedirectPromise();
  
        let accountObj;
        if (tokenResponse) {
          accountObj = tokenResponse.account;
        } else {
          accountObj = this.app.getAllAccounts()[0];
        }
  
        if (accountObj &amp;&amp; tokenResponse) {
          console.log(&quot;[AuthService.init] Got valid accountObj and tokenResponse&quot;)
        } else if (accountObj) {
          console.log(&quot;[AuthService.init] User has logged in, but no tokens.&quot;);
          try {
            tokenResponse = await this.app.acquireTokenSilent({
              account: this.app.getAllAccounts()[0],
              scopes: [&quot;user.read&quot;]
            })
          } catch(err) {
            await this.app.acquireTokenRedirect({scopes: [&quot;user.read&quot;]});
          }
        } else {
          console.log(&quot;[AuthService.init] No accountObject or tokenResponse present. User must now login.&quot;);
          await this.app.loginRedirect({scopes: [&quot;user.read&quot;]})
        }
      } catch (error) {
        console.error(&quot;[AuthService.init] Failed to handleRedirectPromise()&quot;, error)
      }
  
    }
  
  }
  </code></pre>