QuickJWT Example

Easily create and validate JWT tokens in your browser.
Library by Dominick Lee. Provided under the MIT license. See on GitHub

Step 1 - Include the library

Include the QuickJWT library in your HTML code using this CDN:

<script src="https://cdn.jsdelivr.net/gh/dominicklee/Quick-JWT@latest/js/quick-jwt.js"></script>

Make sure that line is placed before the "</body>" tag.

Step 2 - Load CryptoJS

This library needs the CryptoJS library for cryptography. For your convenience, you can dynamically load it in QuickJWT like so:

QuickJWT.loadCryptoJS(() => {
  // Run your JS code here after CryptoJS loads
});

Step 3 - Generate your JWT

Declare your payload and secret variables. Then use QuickJWT.sign to generate and sign your JWT. The output will be your JWT string.

QuickJWT.loadCryptoJS(() => {
  const payload = { userID: "1234567890", name: "John Doe", iat: 1516239022 };
  const secret = "your-256-bit-secret";	//change this

  // Create a token
  const token = QuickJWT.sign(payload, secret);
  console.log("Generated Token:", token);
});

Step 4 - Validate JWT signature and decode payload

If you receive a JWT token from someone, you may want to validate its signature against your own private key or secret to ensure the payload integrity. Afterwards, you may want to decode its payload contents. You can do that as follows:

QuickJWT.loadCryptoJS(() => {
  const token = 'your-JWT-token-here';	//change this
  const secret = "your-256-bit-secret";	//change this
  
  // Validate the token
  const isValid = QuickJWT.validate(token, secret);
  console.log("Is Valid:", isValid); // Output: true (if secret matches)
  
  // Decode the payload contents if signature is valid 
  if (isValid) {
    // Decode the payload
    const decodedPayload = QuickJWT.decode(token);
    console.log("Decoded Payload:", decodedPayload);
  }
});

QuickJWT - Full Demo

See the entire demo in your browser here. The contents shown here are dynamically generated with QuickJWT.

Encode JWT

Original payload:

{
  "userID": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

Generated JWT:

"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySUQiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.ubbaM726WY6-jHjFJ2AXqxDAuyndUWXz6RJT8CAfWV0"

Decode JWT

Decoded payload:

{
  "userID": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

JWT Signature Valid:

true