尝试进行身份验证时出现react-aad-msal无限循环错误

Question

我有以下代码：（https://www.npmjs.com/package/react-aad-msal）

// authProvider.js
import { MsalAuthProvider, LoginType } from 'react-aad-msal';

const config = {
  auth: {
    authority: 'porject url',
    clientId: 'clientId',
    redirectUri: 'https://localhost:5001/'
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

const authenticationParameters = {
  scopes: [
    'project scope'
  ]
}

const options = {
  loginType: LoginType.Popup
}

export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)

我正在使用库中的示例，就像这样：

ReactDOM.render(
    <AzureAD provider={authProvider} forceLogin={true}>
    {
        ({login, logout, authenticationState, error, accountInfo}) => {
        switch (authenticationState) {
            case AuthenticationState.Authenticated:
            return (
                <div>
                <span>Welcome, {accountInfo.account.name}!</span>
                <button onClick={logout}>Logout</button>
                <App />
                </div>
            );
            case AuthenticationState.Unauthenticated:
            return (
                <div>
                {error && <p><span>An error occured during authentication, please try again!</span></p>}
                <p>
                    <span>Hey stranger, you look new!</span>
                    <button onClick={login}>Login</button>
                </p>
                </div>
            );
            case AuthenticationState.InProgress:
            return (<p>Authenticating...</p>);
        }
        }
    }
    </AzureAD>
    , 
    document.getElementById('root')
);

应用程序运行后，立即出现以下无限循环：