title: Infinite loop with MSAL library React sample
body: <p>I am trying to login user seamlessly, with out having a login button as it will be hosted on Azure. But ending in infinite loop with error:</p>
  <pre class="lang-none prettyprint-override"><code>interaction_in_progress: Interaction is currently in progress. 
  Please ensure that this interaction has been completed before calling an interactive API.  
  For more visit: aka.ms/msaljs/browser-errors.
  </code></pre>
  <p>Sample Pagelayout code modified Typescript sample from <a href="https://github.com/AzureAD/microsoft-authentication-library-for-js" rel="nofollow noreferrer">https://github.com/AzureAD/microsoft-authentication-library-for-js</a>:</p>
  <pre><code>export const PageLayout = (props: any) =&gt; {
      const { instance,accounts,inProgress } = useMsal();
      if(instance.getActiveAccount() == null)
      {
          console.log('account =' + instance.getActiveAccount());
          instance.loginRedirect(loginRequest);
      }
      console.log('count =' + instance.getAllAccounts().length);
      console.log('active =' + instance.getAllAccounts());
      return (
          &lt;&gt;
              &lt;Navbar bg=&quot;primary&quot; variant=&quot;dark&quot;&gt;
                  &lt;a className=&quot;navbar-brand&quot; href=&quot;/&quot;&gt;MS Identity Platform&lt;/a&gt;
                  {/* &lt;SignInSignOutButton/&gt; */}
              &lt;/Navbar&gt;
              &lt;h5 className=&quot;sample-header&quot;&gt;Welcome to the Microsoft Authentication Library For Typescript - React Quickstart&lt;/h5&gt;
              &lt;br/&gt;
              &lt;br/&gt;
              {props.children}
          &lt;/&gt;
      );
  };
  </code></pre>