Microsoft-authentication-library-for-js: Looping issue after the msal token is inside the session storage token

[SC-Goestowork]

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• [ ] [email protected] or @azure/[email protected]

Important: Please fill in your exact version number above, e.g. [email protected].

Description

I have encountered a looping issue regarding msal. The msal token generation is successful but, for some reason, the site keeps on looping.

Security

Is this issue security related? No

Regression

Did this behavior work before? No

Configuration

Please provide your MSAL configuration options.

```js
// Provide configuration values here.
authConfig.js:
// Config object to be passed to Msal on creation.
// For a full list of msal.js configuration parameters,
// visit https://azuread.github.io/microsoft-authentication-library-for-js/docs/msal/modules/_authenticationparameters_.html
const msalConfig = {
auth: {
clientId: "",
authority: "https://login.microsoftonline.com/",
redirectUri: "",
cacheLocation: 'sessionStorage'
}
//cache: {
//cacheLocation: "sessionStorage", // This configures where your cache will be stored
//storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
//}
};

// Add here scopes for id token to be used at MS Identity Platform endpoints.
const loginRequest = {
};

// Add here scopes for access token to be used at MS Graph API endpoints.
const tokenRequest = {
};

authRedirect.js:
// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js

const myMSALObj = new Msal.UserAgentApplication(msalConfig);

let accessToken;

function authRedirectCallBack(error, response) {
if (error) {
console.log(error);
} else {
if (response.tokenType === "id_token") {
console.log('id_token acquired at: ' + new Date().toString());
} else if (response.tokenType === "access_token") {
console.log('access_token acquired at: ' + new Date().toString());
accessToken = response.accessToken;

      //callMSGraph(graphConfig.graphMailEndpoint, accessToken, updateUI);
      //profileButton.style.display = 'none';
      //mailButton.style.display = 'initial';
  } else {
      console.log("token type is:" + response.tokenType);
  }

}
}

function signIn() {
try {
myMSALObj.loginRedirect(loginRequest);
} catch {
console.log( "error logging in");
}
}

function signOut() {
myMSALObj.logout();
}

// This function can be removed if you do not need to support IE
function getTokenRedirect(request, endpoint) {
return myMSALObj.acquireTokenSilent(request, endpoint)
.then((response) => {
console.log(response);
if (response.accessToken) {
console.log('access_token acquired at: ' + new Date().toString());
accessToken = response.accessToken;

          // callMSGraph(endpoint, response.accessToken, updateUI);
          // profileButton.style.display = 'none';
          // mailButton.style.display = 'initial';
      }
  })
  .catch(error => {
      console.log("silent token acquisition fails. acquiring token using redirect");
      // fallback to interaction when silent call fails
      return myMSALObj.acquireTokenRedirect(request)
  });

}

// Register Callbacks for Redirect flow
myMSALObj.handleRedirectCallback(authRedirectCallBack);

myMSALObj.loginRedirect(loginRequest);

// function seeProfile() {
// getTokenRedirect(loginRequest, graphConfig.graphMeEndpoint);
// }

// function readMail() {
// getTokenRedirect(tokenRequest, graphConfig.graphMailEndpoint);
// }

Reproduction steps

1. go to the site.
2. login using azure ad credentials
3. login process loops after navigating to site

Expected behavior

the site should load properly instead of constant refreshing.

Browsers

Is this issue browser-specific? No

[tnorling]

@SC-Goestowork Can you confirm that the token is being stored in local or session storage after redirect and that the token is not present in the hash of the url? Can you also share whether or not your redirect pages use any custom hashes or query strings?

[pkanher617]

@SC-Goestowork it appears that you are calling myMSALObj.loginRedirect(loginRequest) in the script anytime the script is loaded. You should add a condition to call loginRedirect only if an account is not present:

// Redirect: once login is successful and redirects with tokens, call Graph API
if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
   // You're logged in
} else {
   // You're not logged in
    myMSALObj.loginRedirect(loginRequest);
}

[github-actions[bot]]

This issue has not seen activity in 14 days. It may be closed if it remains stale.

[tnorling]

Question has been answered. Let us know if you have further questions.