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

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.18.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.1.0

Description

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.

Error Message

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

Msal Logs

InteractionRequiredAuthError: no_tokens_found: No refresh token found in the cache. Please sign-in. at InteractionRequiredAuthError.AuthError [as constructor] (webpack-internal:///./node_modules/@azure/msal-common/dist/error/AuthError.js:34:24) at new InteractionRequiredAuthError (webpack-internal:///./node_modules/@azure/msal-common/dist/error/InteractionRequiredAuthError.js:49:28) at Function.InteractionRequiredAuthError.createNoTokensFoundError (webpack-internal:///./node_modules/@azure/msal-common/dist/error/InteractionRequiredAuthError.js:72:16) at RefreshTokenClient.eval (webpack-internal:///./node_modules/@azure/msal-common/dist/client/RefreshTokenClient.js:118:124) at step (webpack-internal:///./node_modules/@azure/msal-common/dist/_virtual/_tslib.js:83:23) at Object.eval [as next] (webpack-internal:///./node_modules/@azure/msal-common/dist/_virtual/_tslib.js:64:53) at eval (webpack-internal:///./node_modules/@azure/msal-common/dist/_virtual/_tslib.js:57:71) at new Promise (<anonymous>) at __awaiter (webpack-internal:///./node_modules/@azure/msal-common/dist/_virtual/_tslib.js:53:12) at RefreshTokenClient.acquireTokenWithCachedRefreshToken (webpack-internal:///./node_modules/@azure/msal-common/dist/client/RefreshTokenClient.js:112:76) at RefreshTokenClient.eval (webpack-internal:///./node_modules/@azure/msal-common/dist/client/RefreshTokenClient.js:103:44) at step (webpack-internal:///./node_modules/@azure/msal-common/dist/_virtual/_tslib.js:83:23) at Object.eval [as next] (webpack-internal:///./node_modules/@azure/msal-common/dist/_virtual/_tslib.js:64:53) at eval (webpack-internal:///./node_modules/@azure/msal-common/dist/_virtual/_tslib.js:57:71) at new Promise (<anonymous>) at __awaiter (webpack-internal:///./node_modules/@azure/msal-common/dist/_virtual/_tslib.js:53:12) at RefreshTokenClient.acquireTokenByRefreshToken (webpack-internal:///./node_modules/@azure/msal-common/dist/client/RefreshTokenClient.js:72:76) at SilentRefreshClient.eval (webpack-internal:///./node_modules/@azure/msal-browser/dist/interaction_client/SilentRefreshClient.js:48:66) at step (webpack-internal:///./node_modules/@azure/msal-browser/dist/_virtual/_tslib.js:84:23) at Object.eval [as next] (webpack-internal:///./node_modules/@azure/msal-browser/dist/_virtual/_tslib.js:65:53) at fulfilled (webpack-internal:///./node_modules/@azure/msal-browser/dist/_virtual/_tslib.js:55:58)

MSAL Configuration

looks something like below but can't share the actual config. 

const identityConfig = {
  clientId: 'abc-xyz-123'
  authority: 'blah blah blah'
  knownAuthorities: ['blah blah blah'], // Mark your B2C tenant's domain as trusted.
  redirectUri: 'http://localhost',
  navigateToLoginRequestUrl: false,
  scopes: ['user.read']
}

Relevant Code Snippets

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()

Reproduction Steps

1. login to app1
2. refresh the app2
3. it should automatically get the login information but it’s throwing error

Expected Behavior

it should allow login into two sso apps according to this https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-sso#sso-between-apps

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari

Regression

No response

Source

External (Customer)

[hectormmg]

@gitmurali we’ll look into updating the SSO docs since although technically correct, they may be misleading. Closing the issue since using ssoSilent fixed your problem.

[gitmurali]

@hectormmg I have used ssoSilent which fixed the problem. Please can this document be updated https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-sso#sso-between-apps as it’s misleading. Thanks.