B2C token lifetime does not work and new access token cannot pass APIM

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:

1. 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;

2. 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?

I created an Azure AD B2C User flow and set the token lifetime to 5 minutes like below:

Now, when I generated the tokens via Postman and the token lifetime is set for 5 minutes like below:

https://rukb2c.b2clogin.com/rukb2c.onmicrosoft.com/B2C_1_testruk/oauth2/v2.0/token

client_id:ClientID
scope:https://rukb2c.onmicrosoft.com/ClientID/test.read offline_access openid
grant_type:authorization_code
code_verifier:S256
code:code

> 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

If the token is not expiring based on the token lifetime policy, then it might be due to clock skew and the default value is 5 minutes.

As per the comments by @Kid_Learning_C, Set ClockSkew to zero if you want token to expire at the precise time.

services.AddAuthentication("Bearer").AddJwtBearer("Bearer", options =>
        {
            options.Authority = "https://xxxx";
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateAudience = false,
                ValidateLifetime = true,
                ClockSkew = TimeSpan.Zero
            };
        });

Reference:

oauth - Clock skew and tokens - Stack Overflow by rajquest