From Angular app is there a way to check if bearer token is expired?

user_19774702 0
Viewed 61

My question is simple, is there a "good" and applicable way to check when a bearer token is expired from my Angular app?

This is my problem:

If I leave the app open in my browser... someone could see what is on my screen (because i am still "tecnically" logged in). Whereas if i implement a log out when token is expired that would not happen.

Here's what i would want:

  • I do NOT want to check the token when i do API's calls (since i'am already doing that).

  • What i want is to let the angular app "automatically" know when the token is expired.

Here's what i've tried:

  • I tried to create a function that is called every five seconds to check for bearer token expiration but i think this is not a doable solution and will result in performance issues and unclean code.

  • What i also did was create an Angular interceptor and intercept any 403 / 401 API's calls but that only solves my problem slightly.

  • I am already checking token validity on back-end when an api call is made

I scattered online for solutions, and my understanding is that there isn't a "clean" one right now.

Any help here would be apreciated!

bearer-token jwt angular html javascript
1 Answers

I doubt there is any out-of-the-box solution for this, as this is a very specific requirement.

I would have a counter in the client side (browser), once this counter reaches zero, proactively logout the user in the client side.

Then the question is, how to set this counter at the first place? You could check every time there is an incoming request (with an Angular http-interceptor) and extract this information from the bearer token. These tokens should include an expiration time (rfc7519 section-4.1.4). This way if the backend decides to extend the session (increasing the expiration time), you will automatically update the counter and do not logout the user before that happens.

The code would be something similar to this:

let previousTimeoutId;

// "expirationTime" is calculated from the incoming JWT Bearer token
function updateLogoutCounter(expirationTime) {
    // remove any previously created "logout" call 
    if(previousTimeoutId) {
        clearTimeout(previousTimeoutId);
    }
    
    // "logoutApp" is the function that triggers the logout in the client side
    previousTimeoutId = setTimeout(logoutApp, expirationTime);
}

// in the http interceptor, call the "updateLogoutCounter" function

It seems it is clear for you, but it is important to remind everybody:

  • Never trust the client side, Bearer tokens are always checked in the backend.
  • Never accept any incoming request with an invalid token.
  • It is a good practice to use a library to check the validity of Bearer tokens, to make sure all possible values are correctly verified.
  • It is a good practice to use an external service to create these Bearer tokens (IAM, WAF, etc.), to make sure the creation of the JWT is up-to-date and correctly implemented.
user_15498370
Related