Christian Engvall

When sending data from an application to a backend server you can use json web token (JWT) to make sure the data has not been tampered with. The token is compact making it quick to send to the backend.

Here is an example of a token:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

A token is separated into three parts; Header, payload and signature. And, as you can see in the example above, these parts are separated by a “.” All three parts are base64 encoded. Let’s go trough what the different parts contains.

Part 1 - Introduction

Header

The header mostly consists of two parts alg, and typ.

{
  "alg": "HS256",
  "typ": "JWT"
}

Alg defines what hashing algoritm has been used to create the signature(which we will look at soon). And typ defines type of token, which is JWT.

Payload

The payload contains the data that you want to send to your backend. Example:

{
  "score": "12",
  "name": "Crille"
}

Signature

The signature consists of a base64 encoded HS256-hash built on the first two parts of the token. And this is signed with a shared secret that the app and the backend has.

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

Part 2 - Example: Creating a JWT with PHP

<?php

$encoded_header = base64_encode('{"alg": "HS256","typ": "JWT"}');
$encoded_payload = base64_encode('{"score": "12","name": "Crille"}');

$header_and_payload_combined = $encoded_header . '.' . $encoded_payload;

$secret_key = 'thisismysecretkey';

$signature = base64_encode(hash_hmac('sha256', $header_and_payload_combined, $secret_key, true));

$jwt_token = $header_and_payload_combined . '.' . $signature;

echo $jwt_token;

Line 3: This line base64 encodes the header json.

Line 4: This line base64 encodes the payload json.

Line 6: Here the the base64 strings are concatenated to one that looks like this:

eyJhbGciOiAiSFMyNTYiLCJ0eXAiOiAiSldUIn0=.eyJzY29yZSI6ICIxMiIsIm5hbWUiOiAiQ3JpbGxlIn0=

Line 10: Here the signature is created. It creates a hash with the s256 algoritm with the secret key that you can see on line 8. This is string is also base64 encoded.

Line 12: This line concatenates the signature with the rest of the values, and creating a jwt token looking like this:

eyJhbGciOiAiSFMyNTYiLCJ0eXAiOiAiSldUIn0=.eyJzY29yZSI6ICIxMiIsIm5hbWUiOiAiQ3JpbGxlIn0=.Or5OIu2KjpE6/rQeg0yDyAjBX7KGlHqRJBBTZYgi3I0=

Part 3: Example: Verifying signature

This code checks so that the signature that was received checks out.

#recieved_jwt would in real life be populated from a $_POST['values'] but for this example this will work
$recieved_jwt = 'eyJhbGciOiAiSFMyNTYiLCJ0eXAiOiAiSldUIn0=.eyJzY29yZSI6ICIxMiIsIm5hbWUiOiAiQ3JpbGxlIn0=.Or5OIu2KjpE6/rQeg0yDyAjBX7KGlHqRJBBTZYgi3I0=';
$secret_key = 'thisismysecretkey';

$jwt_values = explode('.', $recieved_jwt);

$recieved_signature = $jwt_values[2];
$recieved_header_and_payload = $jwt_values[0] . '.' . $jwt_values[1];

$what_signature_should_be = base64_encode(hash_hmac('sha256', $recieved_header_and_payload, $secret_key, true));

if($what_signature_should_be == $recieved_signature) {
	// signature is ok, the payload has not been tampered with
}

Line 2:  $recieved_jwt contains the jwt. This would be received from a $_POST value in real life.

Line 5: $jwt_values is an array with the jwt values in it.

Line 7: $recieved_signature contains the signature from the original jwt

Line 8: we separate the header and payload an concatenates them.

Line 10: We create a new signature with the new header and payload.

Line 12: Check if the signature we created is the same as the one we received. If it is the data has not been tampered with.

Part 4 - A quick checklist

1. Base64 encode a header JSON Object.
2. Base64 encode a payload JSON Object.
3. Concatenate the header and payload strings with “.” separator
4. Compute the signature of the header and payload.
5. Base64 encode the signature.
6. Concatenate the signature to the header and payload string.

Conclusion

A json web token is quite easy to create yourself. And it’s easy to validate the signature as well. If the shared key (or $secret_key as its called above) gets in the wrong hands you can not trust the signatures anymore and need to change it.