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