I have my reactJS SPA and I have my web api hosted in an Azure VM. I put APIM in front of the VM and the APIM validates token against B2C for authorization. In the B2C User Flow, I have set the token lifetime to 5 minutes;
In the SPA, when I first log in, it works well and I can make calls to the web APIs with no problem. However, later I have 2 problems:
Even though I set the token lifetime to 5 minutes, it is still valid after 5 minutes; It only becomes invalid at around 13 or 14 minutes; So weird;
After the tokens are refreshed, the new access token cannot pass APIM; it returns a 401 error; I can verify that the new tokens are in position in the session storage; the refresh process is successful
Here is the loginRequest
I used at first to sign in:
export const loginRequest = {
scopes: ['openid', 'profile'],
};
Here is the code I use to refresh token:
export const msalInstance = new PublicClientApplication(msalConfig);
export const GetAzureB2CAccessToken = async () => {
const activeAccount = msalInstance.getActiveAccount(); // This will only return a non-null value if you have logic somewhere else that calls the setActiveAccount API
const accounts = msalInstance.getAllAccounts();
if (!activeAccount && accounts.length === 0) {
/*
* User is not signed in. Throw error or wait for user to login.
* Do not attempt to log a user in outside of the context of MsalProvider
*/
throw new Error('user is not signed in;');
}
var request = {
scopes: [
'openid',
'profile',
'https://devjohn1.onmicrosoft.com/123qwe-19eb-fff-qqqq-123qwe123qwe/johnapp_api',
],
account: activeAccount || accounts[0],
};
const tokenResponse = await msalInstance.acquireTokenSilent(request);
return tokenResponse.accessToken;
};
Any ideas?