Auth0 badgeAuth0 University

Angular JS Authentication: Securing your app with Auth0

Angular JS Authentication: Securing your app with Auth0

  1. Course Catalog
  2. Angular JS Authentication: Securing your app with Auth0
  3. JSON Web Tokens

JSON Web Tokens

So what exactly is a JSON Web Token? Well it's an open standard under RFC that describes a way to transmit what are known as claims between two parties in a secure way. Now that's a mouthful, so let's break it down.

Essentially, JWTs communicate JSON objects, and one of the objects in them is a set of claims. So what exactly is a claim? Well put simply, it's a piece of information that is asserted about a subject. And for the case of authentication, the subject is the user.

So what exactly does a JWT look like? Well here's an example. And as you can see here, this doesn't really mean a whole lot to us as humans, and that's because JWTs are encoded. And in fact, there are three distinct parts that are each encoded as you might have guessed here by this dot separator.

All right, so why don't we take a look at what a decoded JWT looks like so that we can see what's going on with these three parts. Okay so I'm over here at, and this is a website made by Auth0 that gives us some really nice resources and information about JSON Web Tokens and also a really nice debugging tool so that we can actually inspect our tokens.

So over here on the left, we can drop in and encode a JWT. And then over here on the right, we get the decoded values from it. And this actually reveals to us the three different parts on the token. We've got a header, a payload, and a signature. So let's run through each of these three parts.

The header contains information about the algorithm and the token type. And so we can see here, our algorithm that we're going to be using is HS256 and the type is JWT for "JSON Web Token".

Now the payload is where we actually store the claims that we were talking about. So those claims--being assertions about a subject--are going to be stored in this object within the payload. And there are certain claims that are registered with the JWT specification, and these are claims like sub for subject, which in this case is our username of John Doe, and iat for issued at, that's the time that the token was issued at, and also exp for expiry and this gives us an expiry time for the token so that we can limit how long it can be used for.

And then we've also got claims that we can define our self. So we can provide claims like name, and admin, and those can be any kind of arbitrary keys and values that we like. Now we aren't forced to use any of the registered claims, and we can provide any kind of arbitrary claims that we want within the payload as well. So this gets really useful for transferring information.

Now the header and the payload obviously look different over here in the encoded JWT than they do over in the decoded JWT and that's because each of these is Base64 URL encoded. So the objects are encoded and then they're tacked together with this dot separator.

We also see down here in the signature what looks to be encoding but it's actually a bit different. So what's happening in the signature is that we're taking the encoded header, plus the encoded payload, plus a secret--so this will be a secret that lives on our server--and then we're hashing that using the HS256 algorithm. And so what this does is it effectively secures or digitally signs our token because as long as we have an unguessable secret key, we can be sure that the information within the JSON Web Token doesn't get tampered with.

So obviously the key that we see here which is just the word "secret" isn't all that secure. In reality, we would want a long and unguessable secret key.

Okay so that's what JSON Web Tokens look like but how are they used for authentication in Angular apps? Well essentially what we need to make that possible is a way for the user to send their credentials to a server and then receive a JSON Web Token back if everything checks out. And then on every subsequent request that gets made to the server for secured resources, the user sends the JSON Web Token back.

And then back at the server it can be checked against that secret key and be verified. And so how does the user send the JWT back to the server once they have it? Well what we do is we attach it as an Authorization header using the Bearer scheme. So HTTP requests just need to attach an extra header, which is the JWT and that gives us a way to authenticate and verify our user's identity.

So that covers what JSON Web Tokens are and how they work. Now that we have that understanding, let's start implementing it in an angular application.