How To Decode A JSON Web Token(JWT) In Dart

This post covers the topic how to decode a JSON Web Token(JWT) in dart. We will learn about different elements of JWT and then write a function to extract payload data from token value.

Introduction

JSON Web Token (JWT) is an industry standard mechanism to pass security credentials and claims in a client-server architecture.

A normal JWT encrypted token looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

However, once decoded, it can be used to hold different kind of useful information like user claims along with the signature to verify it’s authenticity.

Decoding A JSON Web Token

If you haven’t noticed already, a signed JWT basically has three parts. If you look closely at the sample JWT token string above, you should be able to see two dots (.) which separates the string into three parts.

• Header
  • represented by the first section
  • contains information about the algorithm used to encrypt data
• Payload
  • represented by the second section
  • contains the actual claims data
• Signature
  • represented by the third section
  • signature of the JWT issuing server

Signed JWTs in compact format are simply the header and payload objects encoded using Base64-URL encoding and separated by a dot (.). The last part of the compact representation is the signature.

[Base64-URL encoded header].[Base64-URL encoded payload].[Signature]

The part we are interested in is the payload of the JWT.

Parsing JWT Payload With Dart

Now that we have some understanding of the JWT, it’s time to write a function in Dart to decode a JWT string.

static Map<String, dynamic> tryParseJwt(String token) {
// function content here...
}

Let’s create a function tryParseJwt that takes String token and returns the payload data as a key value map.

Since, there are elements of a signed JWT token, we first check if all three parts exist.

if(token == null) return null;
    final parts = token.split('.');
    if (parts.length != 3) {
      return null;

Next, we wish to decode the payload data from JWT. Since this data is encoded with Base64, we will be using the base64Url library.

import 'dart:convert';

Before decoding, we need to make sure that the encoded string is in valid format.

final payload = parts[1];
var normalized = base64Url.normalize(payload);

Then, we decode this value first into UTF-8 value and then into a string value which is basically a JSON string.

var resp = utf8.decode(base64Url.decode(normalized));

Finally, create a map with the string with the payload data.

final payloadMap = json.decode(resp);
if (payloadMap is! Map<String, dynamic>) {
  return null;
}
return payloadMap;

Wrapping Up

Hope this post helped you in understanding the basics of JWT components and how to decode payload data from them. If you would like to learn more, check out these articles:

• Using Access Token And Refresh Token To Secure Web APIs
• Dart For Flutter Developers