Creating JWT the JS way

creating-jwt-the-js-way.markdown

Creating JWT the JS way

How to create a JSON Web Token (JWT) in Javascript?

A Pen by Jonathan Petitcolas on CodePen.

License.

index.html

<!-- Including CryptoJS required libraries -->
<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/hmac-sha256.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/enc-base64-min.js"></script>

<p>
  <strong>JSON Web Token:</strong><br/>
  <span id="header"></span>.<span id="payload"></span>.<span id="signature"></span>
</p>

script.js

// Defining our token parts
var header = {
  "alg": "HS256",
  "typ": "JWT"
};

var data = {
  "id": 1337,
  "username": "john.doe"
};

var secret = "My very confidential secret!!!";

function base64url(source) {
  // Encode in classical base64
  encodedSource = CryptoJS.enc.Base64.stringify(source);
  
  // Remove padding equal characters
  encodedSource = encodedSource.replace(/=+$/, '');
  
  // Replace characters according to base64url specifications
  encodedSource = encodedSource.replace(/\+/g, '-');
  encodedSource = encodedSource.replace(/\//g, '_');
  
  return encodedSource;
}

var stringifiedHeader = CryptoJS.enc.Utf8.parse(JSON.stringify(header));
var encodedHeader = base64url(stringifiedHeader);
document.getElementById("header").innerText = encodedHeader;

var stringifiedData = CryptoJS.enc.Utf8.parse(JSON.stringify(data));
var encodedData = base64url(stringifiedData);
document.getElementById("payload").innerText = encodedData;

var signature = encodedHeader + "." + encodedData;
signature = CryptoJS.HmacSHA256(signature, secret);
signature = base64url(signature);

document.getElementById("signature").innerText = signature;

style.css

body {
  font-family: Arial;
  background: #222;
  font-size: 14px;
  color: #bbb;
}

#header {
  color: green;
}

#payload {
  color: orange;
}

#signature {
  color: red;
}