title: Redirect onLoad only if not authenticated with @azure/msal-react
body: <p>I'm trying to adapt the <a href="https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/typescript-sample" rel="nofollow noreferrer">sample project</a> for my needs.</p>
  <p>My needs are essentially:</p>
  <ol>
  <li>Automatically redirect login if the user is not authenticated when they navigate to the root route...</li>
  <li>If they are, load the protected child components.</li>
  </ol>
  <p>I have step 1. working as expected. However, after they have been signed in it seems like it is trying to reroute again and I get:</p>
  <blockquote>
  <p>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</p>
  </blockquote>
  <pre><code>  70 | 
    71 | useEffect(() =&gt; {
    72 |   if (!isAuthenticated) {
  &gt; 73 |     msalInstance.loginRedirect(loginRequest);
       | ^  74 |   }
    75 | })
    76 | 
  </code></pre>
  <p>It does this whether or not there is the <code>!isAuthenticated</code> conditional.</p>
  <p>The usage of the <code>useIsAuthenticated</code> comes from <a href="https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md#useisauthenticated-hook" rel="nofollow noreferrer">this documentation</a> and appears to evaluate to <code>false</code> even if the user is logged in already.</p>
  <p>This is what I have thus far:</p>
  <pre><code>import { Configuration, RedirectRequest } from '@azure/msal-browser';
  
  // Config object to be passed to Msal on creation
  export const msalConfig: Configuration = {
    auth: {
      clientId: '&lt;client_id&gt;',
      authority: 'https://login.microsoftonline.com/&lt;tenant_id&gt;',
    },
  };
  
  // Add here scopes for id token to be used at MS Identity Platform endpoints.
  export const loginRequest: RedirectRequest = {
    scopes: ['User.Read'],
  };
  
  // Add here the endpoints for MS Graph API services you would like to use.
  export const graphConfig = {
    graphMeEndpoint: 'https://graph.microsoft.com/v1.0/me',
  };
  
  </code></pre>
  <pre><code>// index.tsx
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './components/App';
  import { PublicClientApplication } from '@azure/msal-browser';
  import { msalConfig } from './components/authConfig';
  import { MsalProvider } from '@azure/msal-react';
  
  const msalInstance = new PublicClientApplication(msalConfig);
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;MsalProvider instance={msalInstance}&gt;
        &lt;App /&gt;
      &lt;/MsalProvider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <pre><code>// App.tsx
  import React, { useEffect } from 'react';
  import {
    AuthenticatedTemplate,
    UnauthenticatedTemplate,
    useMsal,
    useIsAuthenticated,
  } from '@azure/msal-react';
  import { loginRequest } from './authConfig';
  
  const App = () =&gt; {
    const isAuthenticated = useIsAuthenticated();
    const { instance } = useMsal();
  
    console.log(isAuthenticated);
  
    useEffect(() =&gt; {
      if (!isAuthenticated) {
        instance.loginRedirect(loginRequest);
      }
    });
  
    return (
      &lt;div className='App'&gt;
        &lt;AuthenticatedTemplate&gt;
          &lt;div&gt;Signed in...&lt;/div&gt;
        &lt;/AuthenticatedTemplate&gt;
  
        &lt;UnauthenticatedTemplate&gt;
          &lt;div&gt;Signing in...&lt;/div&gt;
        &lt;/UnauthenticatedTemplate&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Suggestions for how to resolve this?</p>