flask-jwt tokens from server side does not get decoded in angular-jwt on client side

[hussaintamboli]

I am using Flask as a back end (api) and angularjs as a front end. For JWTs I am using Flask-JWT in my api. And I was trying to configure angular-jwt in my front end

On login, I call /api/v1/auth (JWT_AUTH_URL_RULE) from angularjs app and I get the token. e.g.

 eyJhbGciOiJIUzI1NiIsImV4cCI6MTQzMjExNTAzMiwiaWF0IjoxNDMyMTE1MDAyfQ.eyJ1c2VyX2lkIjoxfQ.dmwvvgDinqWojmZ9ff1wHk_gDYM-dXNG-uTrabY9fFM

Then I store it in localStorage

// angularjs code
localStorage['id_token'] = data.token;

But when I try to decode it in another part of my app, I get null

// angularjs code
console.log('token expiration date', jwtHelper.getTokenExpirationDate(localStorage.getItem('id_token')));
console.log('token expired', jwtHelper.isTokenExpired(localStorage.getItem('id_token')));

Note that the algorithms that I have tried for SECURITY_PASSWORD_HASH are

bcrypt, sha512_crypt, or pbkdf2_sha512
// SECURITY_PASSWORD_HASH from https://pythonhosted.org/Flask-Security/configuration.html

Why doesn't it work?

In fact I see it getting decoded in http://jwt.io/

[sureshjoshi]

Hey, the JWT is base64 encoded, so you'd need to use a base64 decode to get the information stored in the first two parts of the JWT (the 3rd part is the secure sign).

So, for your example (https://www.base64decode.org/): The first part of the JWT gives ('part' being the data up to the first period) {"alg":"HS256","exp":1432115032,"iat":1432115002}

And the second part gives (between first period and second period) {"user_id":1}

Here is a good discussion of JWT structure: https://developer.atlassian.com/static/connect/docs/latest/concepts/understanding-jwt.html

So, your JWT helper needs to do a base64 decode, and then parse JSON structures to give you what you want.

Please note that due to using itsdangerous under the hood, there are a few quirks where data is stored, see: https://github.com/mattupstate/flask-jwt/issues/40

Also, to make your life easier, consider using Satellizer (https://github.com/sahat/satellizer) - handles a lot of the grunt stuff behind the scenes.

[aabmass]

@hussaintamboli was definitely having the same problem as issue #40. BTW, he isn't trying to decode the JWT himself; jwtHelper is from angular-jwt (an angularjs module). The issue is that jwtHelper looks for the exp field in the payload, not in the header where flask-jwt is putting it.

[mattupstate]

Care to upgrade and see how things go?

[hussaintamboli]

Sure. I'll do that and let you know.

[hussaintamboli]

Apologies :(

Haven't found time to check this yet.