Simple AngularJS Authentication with JWT

Decoding JWT Payloads


Each JWT contains a payload. The payload is a base64 encoded JSON object that sits between the two periods in the token. We can decode this payload by using atob() to decode the payload to a JSON string and use JSON.parse() to parse the string into an object.

JWTs can contain custom properties in the claims object, which we will want to decode. Create a custom method in authService to do that:
self.parseJwt = function(token) {
  var base64Url = token.split('.')[1];
  var base64 = base64Url.replace('-', '+').replace('_', '/');
  return JSON.parse($window.atob(base64));

The test server includes three properties in the claims object:

  • username - should be the same you used when registering
  • id - allows the server to easily query the user from the database processing requests
  • exp - the expiration date in UNIX time

While you could store many attributes in the JWT, it's a good idea to keep the number to a minimum as the token must be sent with every request and larger tokens means larger requests sizes. Remember not to store any sensitive data in the JWT payload since it can be decoded by anyone who can see the token.


I finished! On to the next chapter