refresh AWS Cognito access token workflow in browser with javascript v2

Question

I've got a simple web app (I'm not really a dev) which I've based off of this tutorial. Everything I've done is written in plain javascript (no React, etc) and gets deployed to a git repo with .js files run on the user's browser.

Everything is configured and works perfectly, but now I'm trying to extend functionality. The issue I'm facing is that users can spend more than 60 minutes on a single page (some websocket and API interactions which are validated using their access token), and the access token will expire. I believe it isn't refreshing through the normal SDK operations because they are staying on the same page the whole time.

Given this, I'm trying to find a solution to check if a token needs refreshing, and refresh it if near the expiration time. I've tried to implement Use Case 32 from here, but can't seem to get it to work. That code snippet references AWS.config.credentials.needsRefresh(), but the AWS-sdk .js file wasn't included in the original repo I started from. I've tried downloading the latest v2 AWS-sdk .js file, and also identifying a similar needsRefresh function in the AWS-cognito-sdk .js to no avail.

The weird thing is when I try and check for needsRefresh, it throws the following error

console.log('config' in AWS) --> True
console.log('credentials' in AWS.config) --> True
console.log('needsRefresh' in AWS.config.credentials) --> Uncaught TypeError: Cannot use 'in' operator to search for 'needsRefresh' in null

Is there another way to either: 1) check if the token needs refreshing using something similar to the use case mentioned above, or 2) manually inspect the JwtToken to see if I need refresh the token?

Answer 1

I encountered the same question. What I did is - Check the "exp" claim in ID token or access token when I need to use it. "exp" is Unix ticks, like 1711857130, which is the number of seconds that have elapsed since Jan 1st, 1970. It specifies when the token will be expired.

I just check if the current time is 20 seconds before the exp, if so, I use the cached token; If not, I use the refresh token to get new tokens.

I coded in C#, I am sure you can do the same thing in javascript.

protected IEnumerable<System.Security.Claims.Claim> ParseToken(string token)
{
    var tokenHandler = new JwtSecurityTokenHandler();
    var securityToken = tokenHandler.ReadToken(token) as JwtSecurityToken;

    if (securityToken == null)
        throw new Exception("invalid token");

    return securityToken.Claims;
}   

var claims = ParseToken(tokens.id_token);
var claimsDic = claims.ToDictionary(c => c.Type, c => c.Value);
...
authToken.ExpUnixTicks = Convert.ToInt32(claimsDic.GetStringOrDefault("exp", ""))

//check if the token is expiring
if(authToken.ExpUnixTicks >= DateTimeOffset.Now.ToUnixTimeSeconds() + 20)
...