title: Chrome not prompting windows auth login until devtools opened
body: <p>I have a react app that is needing to authenticate against a windows auth server. I am achieving this by hitting an endpoint to get my user details, with the credentials: include header. From my understanding, this should trigger the login prompt on chrome. However the prompt does not show until I either:</p>
  <ul>
  <li>Hard refresh the page</li>
  <li>Open devtools</li>
  </ul>
  <p>Because it doesn't prompt a logon, the app shows as empty, because I'm returning null if its not authenticated.</p>
  <p>How can I get chrome to actually prompt for logon details in the normal app view?</p>
  <p><em>App.tsx</em></p>
  <pre><code>export const App: React.FC = () =&gt; {
    const { isAuthenticated, login } = useAuth();
  
    useEffect(() =&gt; {
      if (!isAuthenticated) {
        login();
      }
    }, [isAuthenticated, login]);
  
    if (!isAuthenticated) {
      return null;
    }
  
    return (
      &lt;div&gt;App Content&lt;/div&gt;
    );
  };
  </code></pre>
  <p><em>AuthProvider.tsx</em></p>
  <pre><code>export const AuthProvider: React.FC = ({ children }) =&gt; {
    const [isLoading, setIsLoading] = useState&lt;boolean&gt;(true);
    const [user, setUser] = useState&lt;IUserDetail&gt;();
  
    const login = useCallback(() =&gt; {
      setIsLoading(true);
      UserApi.getMe()
        .then(({ data }) =&gt; setUser(data))
        .finally(() =&gt; setIsLoading(false));
    }, []);
  
    const logout = useCallback(() =&gt; {
      setUser(undefined);
    }, []);
  
    return (
      &lt;AuthContext.Provider
        value={{
          user,
          isAuthenticated: Boolean(user),
          isLoading,
          login,
          logout,
        }}
      &gt;
        {children}
      &lt;/AuthContext.Provider&gt;
    );
  };
  
  export const useAuth = () =&gt; useContext(AuthContext);
  </code></pre>
  <p><em>UserApi.ts</em></p>
  <pre><code>export const getMe = () =&gt; {
    return axios.get&lt;IUserDetail&gt;(&quot;/api/users/me&quot;);
  };
  </code></pre>
  <p><em>Axios interceptor logic, which sets the credentials header for every request</em></p>
  <pre><code>axios.interceptors.request.use((request) =&gt; {
    request.headers[&quot;credentials&quot;] = &quot;include&quot;;
  
    return request;
  });
  </code></pre>