How to solve CacheManager:getIdToken - No token found error?

Question

I am using MSAL in React App. After the sign-in, I am getting the details using this code-

const [userDetails, setUserDetails] = useState(null); 
useEffect(() => {
    instance
      .handleRedirectPromise()
      .then(() => {
        const currentUser = instance.getAllAccounts()[0];
        setUserDetails(currentUser);
      })
      .catch((error) => console.log(error));
  }, []);

In the first load, I am getting these details in the const userDetails-

{
    "homeAccountId": "XX-X553252fedd35",
    "environment": "login.XX.net",
    "tenantId": "XX-63c7-XX-91c6-553252fedd35",
    "username": "******@XX.XX.com",
    "localAccountId": "XX-7e21-4730-XX-XX",
    "name": "XX XX",
    "idToken": "xcasdcasdf3adsfa4sdafsd43fadsf43asdfxx"
    "idTokenClaims": {
     XXXX: XXXX
    }
}

First load-

But when I reload the page, the IdToken got missing from this userDetails const.

And in the console, I got this log message after reloading-

@azure/msal-common@12.0.0 : Info - CacheManager:getIdToken - No token found

After reload-

Answer 1

Hello @Devesh and everybody. Apologies for the inconvenience, msal-browser@3.3.0 prevents token look-ups for tenanted authorities. Downgrading to msal-browser@3.2.0 will solve the issue while the fix gets rolled out, potentially this week.

10/31 Update: msal-browser@3.4.0 has been released and fixes the discussed issue.

Let us know if you need additional assistance. If the answer was helpful, please accept it and rate it so that others facing a similar issue can easily find a solution.

Answer 2

It seems as an issue with the latest version of the app. Try using this: