MSAL: InteractionRequiredAuthError: no_tokens_found: No refresh token found in the cache. Please sign-in

Question

Here's the bit of code that I was working on. I am using MSAL for two SSO apps on same domain for example https://some-domain.com/app1 and https://some-domain.com/app2 and please see the code snippet below.

App 1 seems to be fine it allows user to sign in correctly.However, on app2 when I reload the page it throws an error

MSAL: InteractionRequiredAuthError: no_tokens_found: No refresh token found in the cache. Please sign-in.

I have used instance.acquireTokenRedirect,acquireTokenSilent and identityInstance.loginRedirect() but nothing seemed to work. Any ideas please share. Thanks.

const [userName, setUsername] = useState<string | undefined>()

useEffect(() => {
const fetchDetaiils = async () => {
      if (inProgress === InteractionStatus.None) {
        try {
          const signedInUser = identityInstance.getAllAccounts()[0]
          const resp = await identityInstance.acquireTokenSilent({
            scopes: ['user.read'],
            account,
          })
          const token: Token = resp?.idTokenClaims
          setUsername(token.email)
        } catch (err: unknown) {
          if (err instanceof Error) {
            console.log(err)
            if (err?.name === 'InteractionRequiredAuthError') {
              // await instance.acquireTokenRedirect(loginRequest)
            }
          }
        }
      }
    }

    fetchDetaiils()

Answer 1

As described in these Microsoft Docs, SSO between apps requires the use of either the login_hint or sid (session ID) parameters in the silent request.

The values of login_hint and sid can be extracted from the ID Token that is obtained in App 1. For more information, please consult the MSAL Browser Login Docs