JWT Tokens Issues in AngularJS Satellizer

I have been using AngularJS and Laravel to develop my new web application for about a month now. One big challenge that I have, and still have, is the JWTs(JSON Web Tokens). JWTs are used to maintain secure connections between servers and client-side applications. I used the tymondesigns/jwt-auth package for laravel, and sahat/satellizer package for AngularJS. They are both maintained and under active development.

Problem:

Satellizer doesn’t have a function to refresh token with server, which causes the token to expire on the client application. After expiration, Satellizer automatically removes the token from local storage, which on the next request, server will return error 400 because token was not specified.

Possbile Solutions:

  1. Refresh the token on every request, so the token will never expire as long as the user keeps interacting with the server. Problem is that on async request, the application will receive different tokens on different server calls. This can cause many issues and bugs.
  2. Refresh the token when the old token is expired. This is a better solution, but hard to implement. We need to pause and store all unauthorized request, refresh the token, then re-process all stored request with the new token. angular-http-auth is a library that provides interceptors to angular http functions. We can use this to detect 401 errors and renew token when we receive them. This cannot be done easily because Satellizer is not compatible with angular-http-auth.

There is also another problem on the server side where the Laravel 5 package JWT-auth dose not provide an easy to use refresh token feature.

Conclusion

The best possible option might be writing a new module to do this, which most of the code will be custom and this will surly take some time. The current plan is ignore this error and process to develop more user features before tackling it. This strategy reminded me about the Ostrich algorithm.

3 Comments

Add yours →

  1. I found a simple solution to this issue. In your $httpProvider interceptors just add this:

    ‘response’:function(response){
    if(response.headers().authorization){
    var nt = response.headers().authorization.substring(7);
    $window[‘localStorage’].setItem(‘satellizer_token’, nt);
    }
    return response;
    },

    and just make sure you have your jwt.refresh middleware set up. This will refresh your token every api request.

  2. george oslobanu

    March 21, 2016 — 12:06 pm

    I’ve landed here trying to find what satellizer is doing after the token expires.
    Anyway I’m not sure what are you trying to do? keeping the token permanently alive ? why don’t you increase the expiration time for the token ? why don’t you redirect the users to login again ?

    • It’s really a UX thing. The user should be able stay in the application as long as they are active. However, without a way to refresh the token on each request, the user will be forced to logout after the first token expires.

      Say I set my token expiration time to 1 hour, without token refreshing, even though users are active at the 59 minute, they will still be forced to log out.

Leave a Reply

Your email address will not be published. Required fields are marked *