Getting infinite loop while calling external API after authentication

[yawxir]

I am having infinite loop if i call a .NET Core API in ComponenetDidMount or useEffect while calling a dispatcher for Redux

Code Structure:

<AzureAD provider={authProvider} reduxStore={aadStore} forceLogin={false}>
  {
    ({login, logout, authenticationState, error, accountInfo}) => {
      switch (authenticationState) {
        case AuthenticationState.Authenticated:
          return (
            <div>
                <BrowserRouter>
                <App />
                </BrowserRouter>
              {/* <button onClick={logout}>Logout</button> */}
            </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>

AuthFetch

export const authFetch = async url => {
  const token = await authProvider.getIdToken();
  return fetch(url, {
      method: 'GET',
      headers: {
          Authorization: 'Bearer ' + token.idToken.rawIdToken,
          'Content-Type': 'application/json',
      },
  });
};

App.js

  async function GetRoles()
  {
  const response =   await  authFetch("https://localhost:44351/api/values/2")
  const json = await response.json();
  console.log(json)
 return json;
}


function App() {

  useEffect(() => {
      var dataFromAPI=GetRoles();
      dispatch(addMasterData(dataFromAPI))
 
  });

If the data is not dispatched, it is working good, but with current implementation where it is required to dispatch the data to Redux, application is giving loops.

Below are MSAL logs:

authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose Telemetry Event started:
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose AcquireTokenInteractive has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose Account set from MSAL Cache
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose User session exists, login not required
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose AcquireTokenHelper has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose Interaction type: popupInteraction. isLoginCall: true
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose Cached metadata found for authority
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose Finished building server authentication request
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose Updating cache entries
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose Query parameters populated from account
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose State saved to window
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose Interaction type is popup. Generating popup window
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose OpenPopup has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:32 GMT:1.3.3-Verbose monitorWindowForHash polling started
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose monitorPopupForHash found url in hash
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose HandleAuthenticationResponse has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose GetResponseState has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Hash contains state. Creating stateInfo object
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose State matches cached state, setting requestType to login
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Obtained state from response
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Info ProcessCallBack has been called. Processing callback from redirect response
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose SaveTokenFromHash has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Info State status: true; Request type: LOGIN
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Server returns success
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Info State is right
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Fragment has session state, caching
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Info Fragment has idToken
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Fragment has clientInfo
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose PopulateAuthority has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Account object created from response
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose IdToken has nonce
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Nonce matches, saving idToken to cache
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose SaveAccessToken has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Response parameters does not contain scope, clientId set as scope
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Saving token to cache
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose New expiration set
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Status set to complete, temporary cache cleared
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose InCookie is true, setting authorityKey in cookie
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Response tokenType set to id_token
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Calling callback provided to processCallback
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Info Closing popup window
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Successfully logged in
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Telemetry Event stopped: 9edfb91e-2d32-43e2-aef0-f282097bfcda_672d6b44-8940-49c2-a173-3287d1ccd623-msal.api_event
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Flushing telemetry events:
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose AcquireTokenSilent has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Telemetry Event started: 7e5e9b0c-06d1-4f8f-837e-c188620cd521_ed32ebe9-f790-43b0-adcc-ca1f943e9b9f-msal.api_event
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Account set from MSAL Cache
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Response type: id_token
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Finished building server authentication request
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Query parameters populated from existing SSO or account
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose GetCachedToken has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Getting all cached access tokens
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose No authority passed, filtering tokens by scope
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose One matching token found, setting authorityInstance
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Evaluating access token found
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Token expiration is within offset, renewing token
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Response generated and token set
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Token found in cache lookup
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Successfully acquired token
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Telemetry Event stopped: 7e5e9b0c-06d1-4f8f-837e-c188620cd521_ed32ebe9-f790-43b0-adcc-ca1f943e9b9f-msal.api_event
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Flushing telemetry events:
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose AcquireTokenSilent has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Telemetry Event started: 11ae09a2-5e3b-4771-a309-60792f98d070_d64ef15f-2191-4acd-af53-ad138c858b75-msal.api_event
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Account set from MSAL Cache
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Response type: id_token
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Finished building server authentication request
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Query parameters populated from existing SSO or account
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose GetCachedToken has been called
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Getting all cached access tokens
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose No authority passed, filtering tokens by scope
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose One matching token found, setting authorityInstance
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Evaluating access token found
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Token expiration is within offset, renewing token
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Response generated and token set
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:34 GMT:1.3.3-Verbose Token found in cache lookup
authProvider.js:25 [MSAL] Wed, 05 Aug 2020 12:48:36 GMT:1.3.3-Verbose AcquireTokenSilent has been called

Any help would be highly appreciated.
Thanks

This issue is for a

- [x] bug report  

Expected/desired behavior

The plugin should allow to make Async API calls on component loading

OS and Version?

Windows 10

Library versions

• react-aad-msal: [2.3.5]
• msal: [1.3.3]

[amazingmaze]

Having same issue with a similar setup. Getting infinite loop when calling authProvider.getAccessToken() to get the token before calling API. Seems to be complaining that Token expiration is within offset, renewing token even though my token just refreshed and has 1 hour left before expiring.

Windows 10, Edge 84.0.522.52

[Nohac]

I'm having the same issue when using authProvider.getIdToken(). This is the error message I'm getting from the console:

TypeError: Cannot read property 'tokenType' of undefined

[FemiaLeandro]

Same issue here, has anyone reached a solution?

[nyn3x]

I switched from using react-aad (msal) to using oidc-client. This works much better, and is 100% compatible with AAD as well. I know this might not be the right answer in this thread, but could be a potential alternative as long as react-aad/msal are making it hard to use.

[Jaggler3]

I'm having the same issue when using authProvider.getIdToken(). This is the error message I'm getting from the console:

TypeError: Cannot read property 'tokenType' of undefined

I'm getting this error as well in the latest version